A simplified botanical palette built from two distinct greens, one restrained floral red, and clean stone neutrals. It keeps the fresh organic character but removes extra complexity so the system feels clearer, calmer, and easier to use across brand and interface touchpoints.
A simplified botanical palette built from two distinct greens, one restrained floral red, and clean stone neutrals. It keeps the fresh organic character but removes extra complexity so the system feels clearer, calmer, and easier to use across brand and interface touchpoints.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay recognizable as a plant-led system, with layered greens carrying the brand and a controlled red providing contrast and emphasis. Simplifying the palette makes the relationship feel cleaner while preserving the same liv
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 stay recognizable as a plant-led system, with layered greens carrying the brand and a controlled red providing contrast and emphasis. Simplifying the palette makes the relationship feel cleaner while preserving the same liv
RolesLogo, Btn Primary Bg
A grounded botanical green that now functions as the core brand anchor and primary action color.
#2C6B3F44, 107, 63138, 42, 3059, 0, 41, 58RolesLink, Btn Secondary Bg
A fresher foliage green that supports interaction states and adds movement without complicating the system.
#4F8A3B79, 138, 59105, 40, 3943, 0, 57, 46RolesHeadline
A vivid floral red reserved for emphasis, giving the simplified palette a clear point of energy.
#C81D34200, 29, 52352, 75, 450, 86, 74, 22The support colors quietly extend the botanical story with muted structural accents that stay subordinate to the main greens and red. They add usability for UI details without re-
RolesBtn Outlined Border, Icon
An earthy green-gray that softens borders and icons so they remain practical and understated.
#7C8E63124, 142, 9985, 18, 4713, 0, 30, 44RolesBtn Outlined Text, Border
A muted sage that keeps outlined treatments readable while preserving the palette’s calm botanical tone.
#A9B59A169, 181, 15487, 15, 667, 0, 15, 29Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesDivider, Outline
#F3F1EA243, 241, 23447, 27, 940, 1, 4, 5RolesBg Dark, Text, Btn Secondary 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-canopy-green: #2C6B3F;
--color-leaf-green: #4F8A3B;
--color-petal-red: #C81D34;
--color-moss-stem: #7C8E63;
--color-sage-veil: #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: #4F8A3B;
--role-btn-secondary-bg: #4F8A3B;
--role-headline: #C81D34;
--role-btn-outlined-border: #7C8E63;
--role-icon: #7C8E63;
--role-btn-outlined-text: #A9B59A;
--role-border: #A9B59A;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-divider: #F3F1EA;
--role-outline: #F3F1EA;
--role-bg-dark: #161814;
--role-text: #161814;
--role-btn-secondary-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.{
"canopy-green": "#2C6B3F",
"leaf-green": "#4F8A3B",
"petal-red": "#C81D34",
"moss-stem": "#7C8E63",
"sage-veil": "#A9B59A",
"pure-white": "#FFFFFF",
"stone-mist": "#F3F1EA",
"deep-charcoal": "#161814"
}