This forest-inspired palette pairs deep evergreen, bark, and quiet moss-like accents with clean neutrals for a grounded and usable brand system. It feels natural and credible while preserving strong hierarchy, readable contrast, and flexible UI behavior.
This forest-inspired palette pairs deep evergreen, bark, and quiet moss-like accents with clean neutrals for a grounded and usable brand system. It feels natural and credible while preserving strong hierarchy, readable contrast, and flexible UI behavior.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors now lean more distinctly on evergreen and bark, with the palette balanced by a quiet support accent for structure. This keeps the system recognizable as forest-led while improving role clarity after removing the softer moss green.
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 now lean more distinctly on evergreen and bark, with the palette balanced by a quiet support accent for structure. This keeps the system recognizable as forest-led while improving role clarity after removing the softer moss green.
RolesLogo, Btn Primary Bg
This deep evergreen establishes the brand as steady, rooted, and clearly forest inspired.
#1F4D3A31, 77, 58155, 43, 2160, 0, 25, 70RolesHeadline
This bark tone brings warmth and earthy contrast that keeps the palette from feeling overly uniform.
#6B4F3A107, 79, 5826, 30, 320, 26, 46, 58The support colors add quiet environmental texture and help the core greens and earth tones feel layered without competing for attention. They reinforce the forest mood through understated accents that work well in interfaces.
RolesBtn Outlined Border, Link, Btn Secondary Bg, Icon
This muted fern green supports outlines, links, and secondary actions with a subtle botanical note that remains visually subordinate.
#7A8F6A122, 143, 10694, 15, 4915, 0, 26, 44RolesBtn Outlined Text, Border
This restrained lichen accent softens structural elements and supports readable outline button text on light surfaces.
#9BAA8A155, 170, 13888, 16, 609, 0, 19, 33Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesDivider, Outline
#F4F1EA244, 241, 23442, 31, 940, 1, 4, 4RolesBg Dark, Text
#14141320, 20, 1960, 3, 80, 0, 5, 92Copy 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-evergreen-canopy: #1F4D3A;
--color-bark-ridge: #6B4F3A;
--color-fern-mist: #7A8F6A;
--color-lichen-veil: #9BAA8A;
--color-pure-white: #FFFFFF;
--color-mist-linen: #F4F1EA;
--color-charcoal-soil: #141413;
}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: #1F4D3A;
--role-btn-primary-bg: #1F4D3A;
--role-headline: #6B4F3A;
--role-btn-outlined-border: #7A8F6A;
--role-link: #7A8F6A;
--role-btn-secondary-bg: #7A8F6A;
--role-icon: #7A8F6A;
--role-btn-outlined-text: #9BAA8A;
--role-border: #9BAA8A;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-divider: #F4F1EA;
--role-outline: #F4F1EA;
--role-bg-dark: #141413;
--role-text: #141413;
}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.{
"evergreen-canopy": "#1F4D3A",
"bark-ridge": "#6B4F3A",
"fern-mist": "#7A8F6A",
"lichen-veil": "#9BAA8A",
"pure-white": "#FFFFFF",
"mist-linen": "#F4F1EA",
"charcoal-soil": "#141413"
}