This palette evokes a peaceful, magical forest setting with deep greens and warm earth tones, balanced by harmonious support colors and natural neutrals perfect for a college of magic brand.
This palette evokes a peaceful, magical forest setting with deep greens and warm earth tones, balanced by harmonious support colors and natural neutrals perfect for a college of magic brand.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine harmonious forest greens and warm earthy browns to embody the magical and serene nature of a woodland college setting.
Clear roles create a consistent brand experience.Assign existing palette colors to brand, typography, and interface roles.
A compact view of the brand, support, and neutral colors that make up this system.
The main colors combine harmonious forest greens and warm earthy browns to embody the magical and serene nature of a woodland college setting.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Pine Green conveys growth, harmony, and the depth of the forest, establishing a strong magical foundation.
#2C5F2D44, 95, 45121, 37, 2754, 0, 53, 63RolesHeadline, Btn Secondary Bg
Clay Brown provides warmth and grounding, reflecting the earthiness and peacefulness within the forest setting.
#7D5A50125, 90, 8013, 22, 400, 28, 36, 51Support colors extend the main palette with soft, natural tones that enrich the forest mood while maintaining visual balance and subtlety.
RolesIcon, Border, Divider, Outline
Sage adds a gentle, muted green to complement the deeper Pine Green and Clay Brown without overpowering them.
#9DBF9E157, 191, 158122, 21, 6818, 0, 17, 25Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#F9F6F0249, 246, 24040, 43, 960, 1, 4, 2RolesText
#2A2A2A42, 42, 420, 0, 160, 0, 0, 84RolesBg Dark
#E6E2D3230, 226, 21147, 28, 860, 2, 8, 10Copy palette values for design systems, websites, and client handoff.
Use these in CSS when you want every raw palette color available by name. Best for websites, landing pages, and design system variables.
Use when: you need the actual colors.:root {
--color-pine-green: #2C5F2D;
--color-clay-brown: #7D5A50;
--color-sage: #9DBF9E;
--color-ivory: #F9F6F0;
--color-charcoal: #2A2A2A;
--color-sand: #E6E2D3;
}Use these in CSS when colors are assigned to practical jobs like text, buttons, borders, links, and backgrounds.
Use when: you need UI roles, not just swatches.:root {
--role-logo: #2C5F2D;
--role-link: #2C5F2D;
--role-btn-primary-bg: #2C5F2D;
--role-btn-outlined-border: #2C5F2D;
--role-btn-outlined-text: #2C5F2D;
--role-headline: #7D5A50;
--role-btn-secondary-bg: #7D5A50;
--role-icon: #9DBF9E;
--role-border: #9DBF9E;
--role-divider: #9DBF9E;
--role-outline: #9DBF9E;
--role-bg-light: #F9F6F0;
--role-btn-primary-text: #F9F6F0;
--role-btn-secondary-text: #F9F6F0;
--role-text: #2A2A2A;
--role-bg-dark: #E6E2D3;
}Use this structured palette data in apps, generators, plugins, or tools that need to read the palette programmatically.
Use when: a developer or app needs data.{
"pine-green": "#2C5F2D",
"clay-brown": "#7D5A50",
"sage": "#9DBF9E",
"ivory": "#F9F6F0",
"charcoal": "#2A2A2A",
"sand": "#E6E2D3"
}