This earthy, botanical-inspired palette blends deep greens with warm muted neutrals and soft accents to evoke a sense of natural calm, organic warmth, and refined heritage, perfect for brands rooted in natural luxury or wellness.
This earthy, botanical-inspired palette blends deep greens with warm muted neutrals and soft accents to evoke a sense of natural calm, organic warmth, and refined heritage, perfect for brands rooted in natural luxury or wellness.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine three harmonious green hues from deep forest to subdued leaf green, creating a recognizable and soothing nature-inspired foundation.
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 three harmonious green hues from deep forest to subdued leaf green, creating a recognizable and soothing nature-inspired foundation.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text
Conveys stability, sophistication, and a strong connection to nature.
#34452E52, 69, 46104, 20, 2325, 0, 33, 73RolesBtn Secondary Bg, Headline
Provides a softer, versatile tone that balances depth with approachability.
#51644A81, 100, 74104, 15, 3419, 0, 26, 61Offers a gentle, fresh accent that complements the darker greens and enhances readability.
#768F6C118, 143, 108103, 14, 4917, 0, 24, 44Soft, muted neutrals extend the palette, supporting the greens with warm beige and a dusty rose that adds subtle warmth and approachable softness without overwhelming.
RolesIcon, Border, Divider, Outline
Balances the main greens with a neutral yet warm tone for elements that need subtle emphasis.
#C9C1AC201, 193, 17243, 21, 730, 4, 14, 21Adds a muted touch of softness and understated elegance that complements natural greens.
#D8C4B6216, 196, 18225, 30, 780, 9, 16, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F8F6F0248, 246, 24045, 36, 960, 1, 3, 3RolesBg Dark, Text
#22252034, 37, 3296, 7, 148, 0, 14, 85Copy 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-deep-forest-green: #34452E;
--color-moss-green: #51644A;
--color-leaf-green: #768F6C;
--color-warm-sand: #C9C1AC;
--color-dusty-rose: #D8C4B6;
--color-pure-white: #FFFFFF;
--color-off-white: #F8F6F0;
--color-charcoal-black: #222520;
}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: #34452E;
--role-link: #34452E;
--role-btn-primary-bg: #34452E;
--role-btn-outlined-border: #34452E;
--role-btn-outlined-text: #34452E;
--role-btn-secondary-bg: #51644A;
--role-headline: #51644A;
--role-icon: #C9C1AC;
--role-border: #C9C1AC;
--role-divider: #C9C1AC;
--role-outline: #C9C1AC;
--role-bg-light: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-dark: #222520;
--role-text: #222520;
}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.{
"deep-forest-green": "#34452E",
"moss-green": "#51644A",
"leaf-green": "#768F6C",
"warm-sand": "#C9C1AC",
"dusty-rose": "#D8C4B6",
"pure-white": "#FFFFFF",
"off-white": "#F8F6F0",
"charcoal-black": "#222520"
}