This color palette is inspired by the lush green tones of palm leaves and the warm natural skin tones visible beneath, combined with deep shadows and soft natural light to create a balanced, organic, and calming visual identity.
This color palette is inspired by the lush green tones of palm leaves and the warm natural skin tones visible beneath, combined with deep shadows and soft natural light to create a balanced, organic, and calming visual identity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors harmonize lush deep forest green with the lighter mid green and warm peachy skin tones, creating a natural and organic look with subtle complexity.
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 harmonize lush deep forest green with the lighter mid green and warm peachy skin tones, creating a natural and organic look with subtle complexity.
RolesLogo, Btn Primary Bg, Btn Outlined Border
Forest Green grounds the brand with a rich natural depth evoking trust, growth, and luxury.
#2E4D3D46, 77, 61149, 25, 2440, 0, 21, 70RolesLink, Btn Secondary Bg, Headline
Fern Green adds freshness and vitality, reinforcing nature and organic freshness in the brand identity.
#59846289, 132, 98133, 19, 4333, 0, 26, 48RolesBtn Outlined Text
Warm Peach introduces a subtle warmth and approachability, softening the greens for balance and inclusivity.
#C58B74197, 139, 11617, 41, 610, 29, 41, 23The support colors echo the natural shadows and highlights with softened compliments that enhance usability without overpowering the main greens and warm tones.
RolesIcon, Border, Divider
Sage provides a muted softer green to complement the main greens by adding gentle contrast and calmness.
#A9CBB7169, 203, 183145, 25, 7317, 0, 10, 20RolesOutline
Deep Taupe balances warmth against the greens with a nuanced somberness, reinforcing natural shadow and depth.
#77584E119, 88, 7815, 21, 390, 26, 34, 53Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F7F5F2247, 245, 24236, 24, 960, 1, 2, 3RolesText
#3B3B3B59, 59, 590, 0, 230, 0, 0, 77Copy 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-forest-green: #2E4D3D;
--color-fern-green: #598462;
--color-warm-peach: #C58B74;
--color-sage: #A9CBB7;
--color-deep-taupe: #77584E;
--color-white: #FFFFFF;
--color-ivory: #F7F5F2;
--color-charcoal: #3B3B3B;
}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: #2E4D3D;
--role-btn-primary-bg: #2E4D3D;
--role-btn-outlined-border: #2E4D3D;
--role-link: #598462;
--role-btn-secondary-bg: #598462;
--role-headline: #598462;
--role-btn-outlined-text: #C58B74;
--role-icon: #A9CBB7;
--role-border: #A9CBB7;
--role-divider: #A9CBB7;
--role-outline: #77584E;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #F7F5F2;
--role-text: #3B3B3B;
}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.{
"forest-green": "#2E4D3D",
"fern-green": "#598462",
"warm-peach": "#C58B74",
"sage": "#A9CBB7",
"deep-taupe": "#77584E",
"white": "#FFFFFF",
"ivory": "#F7F5F2",
"charcoal": "#3B3B3B"
}