A disciplined botanical palette built from one grounded green, one vivid floral red, and restrained stone neutrals. The system keeps its fresh natural character while feeling more focused and premium, with clear contrast for both brand identity and interface use.
A disciplined botanical palette built from one grounded green, one vivid floral red, and restrained stone neutrals. The system keeps its fresh natural character while feeling more focused and premium, with clear contrast for both brand identity and interface use.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form a compact complementary system: the deep green provides stability and brand recognition, while the floral red adds sharp, memorable contrast. Together they create a clearer and more premium botanical identity without a
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 form a compact complementary system: the deep green provides stability and brand recognition, while the floral red adds sharp, memorable contrast. Together they create a clearer and more premium botanical identity without a
RolesLogo, Btn Primary Bg, Link, Btn Outlined Text
A deep botanical green that grounds the brand, signals trust, and works well for primary actions and identity details.
#2C6B3F44, 107, 63138, 42, 3059, 0, 41, 58RolesHeadline, Btn Secondary Bg
A vivid red that adds editorial energy and gives the palette a strong focal accent for headlines and secondary actions.
#C81D34200, 29, 52352, 75, 450, 86, 74, 22The support colors extend the botanical palette with softer structural accents that stay visually subordinate to the main green and red. They handle outlines, icons, and borders so
RolesBtn Outlined Border, Icon
A bright mossy lime that adds lively supporting accents for icons and outlines without competing with the main colors.
#87D11F135, 209, 3185, 74, 4735, 0, 85, 18RolesBorder
A muted sage tone that keeps borders calm and readable while reinforcing the palette’s organic direction.
#A9B59A169, 181, 15487, 15, 667, 0, 15, 29Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesDivider, Outline
#F3F1EA243, 241, 23447, 27, 940, 1, 4, 5RolesBg Dark, Text
#16181422, 24, 2090, 9, 98, 0, 17, 91Copy 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-anchor: #2C6B3F;
--color-floral-crimson: #C81D34;
--color-lime-moss: #87D11F;
--color-sage-mist: #A9B59A;
--color-pure-white: #FFFFFF;
--color-stone-mist: #F3F1EA;
--color-deep-charcoal: #161814;
}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: #2C6B3F;
--role-btn-primary-bg: #2C6B3F;
--role-link: #2C6B3F;
--role-btn-outlined-text: #2C6B3F;
--role-headline: #C81D34;
--role-btn-secondary-bg: #C81D34;
--role-btn-outlined-border: #87D11F;
--role-icon: #87D11F;
--role-border: #A9B59A;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-divider: #F3F1EA;
--role-outline: #F3F1EA;
--role-bg-dark: #161814;
--role-text: #161814;
}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-anchor": "#2C6B3F",
"floral-crimson": "#C81D34",
"lime-moss": "#87D11F",
"sage-mist": "#A9B59A",
"pure-white": "#FFFFFF",
"stone-mist": "#F3F1EA",
"deep-charcoal": "#161814"
}