This palette is inspired by fresh, natural greens and clean, earthy neutrals, reflecting sustainability and environmental care. It combines vibrant and muted greens to showcase growth and balance, supported by soft warm tones representing calm and purity.
This palette is inspired by fresh, natural greens and clean, earthy neutrals, reflecting sustainability and environmental care. It combines vibrant and muted greens to showcase growth and balance, supported by soft warm tones representing calm and purity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
This palette features analogous shades of green ranging from vibrant to muted, which work together to convey freshness, growth, and balance in a recognizable system that is ideal for sustainability themes.
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.
This palette features analogous shades of green ranging from vibrant to muted, which work together to convey freshness, growth, and balance in a recognizable system that is ideal for sustainability themes.
RolesLogo, Link, Btn Primary Bg
Emerald Green represents growth, vitality, and a strong association with nature and sustainability.
#4CAF5076, 175, 80122, 39, 4957, 0, 54, 31RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Mint Green provides a softer, calming contrast that supports the primary green while maintaining a natural vibe.
#81C784129, 199, 132123, 38, 6435, 0, 34, 22RolesHeadline
Forest Green adds depth and seriousness, ideal for headlines and creating visual hierarchy.
#388E3C56, 142, 60123, 43, 3961, 0, 58, 44These support colors extend the main greens with earthy and warm tones that balance the palette and enhance usability without competing.
RolesIcon, Border, Divider, Outline
Pale Green is a subdued accent that emphasizes cleanliness and blends well with the main greens for subtle UI elements.
#C8E6C9200, 230, 201122, 38, 8413, 0, 13, 10RolesBg Light
Soft Sage offers a light, neutral background that feels natural and complements green tones with gentle warmth.
#F1F8E9241, 248, 23388, 52, 943, 0, 6, 3Utility colors for backgrounds, text, borders, and balance.
RolesBg Dark
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#FAFAFA250, 250, 2500, 0, 980, 0, 0, 2RolesText, Btn Primary Text, Btn Secondary Text
#1B1B1B27, 27, 270, 0, 110, 0, 0, 89Copy 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-emerald-green: #4CAF50;
--color-mint-green: #81C784;
--color-forest-green: #388E3C;
--color-pale-green: #C8E6C9;
--color-soft-sage: #F1F8E9;
--color-white: #FFFFFF;
--color-ivory: #FAFAFA;
--color-charcoal: #1B1B1B;
}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: #4CAF50;
--role-link: #4CAF50;
--role-btn-primary-bg: #4CAF50;
--role-btn-secondary-bg: #81C784;
--role-btn-outlined-border: #81C784;
--role-btn-outlined-text: #81C784;
--role-headline: #388E3C;
--role-icon: #C8E6C9;
--role-border: #C8E6C9;
--role-divider: #C8E6C9;
--role-outline: #C8E6C9;
--role-bg-light: #F1F8E9;
--role-bg-dark: #FFFFFF;
--role-text: #1B1B1B;
--role-btn-primary-text: #1B1B1B;
--role-btn-secondary-text: #1B1B1B;
}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.{
"emerald-green": "#4CAF50",
"mint-green": "#81C784",
"forest-green": "#388E3C",
"pale-green": "#C8E6C9",
"soft-sage": "#F1F8E9",
"white": "#FFFFFF",
"ivory": "#FAFAFA",
"charcoal": "#1B1B1B"
}