This palette draws inspiration from the rich, layered greens and vivid lime hues in the image to create a fresh, energetic system ideal for eco-conscious and vibrant brands. It combines strong greens with a bright yellow-green accent and balanced neutrals for versatility and clarity.
This palette draws inspiration from the rich, layered greens and vivid lime hues in the image to create a fresh, energetic system ideal for eco-conscious and vibrant brands. It combines strong greens with a bright yellow-green accent and balanced neutrals for versatility and clarity.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors work together as an analogous green harmony, ranging from deep grass green to vivid lime, evoking vitality and modernity for a cohesive brand presence.
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 work together as an analogous green harmony, ranging from deep grass green to vivid lime, evoking vitality and modernity for a cohesive brand presence.
RolesLogo, Link, Btn Primary Bg, Headline
Grass Green brings a grounded, natural feel that communicates growth and reliability.
#1f8e0f31, 142, 15112, 81, 3178, 0, 89, 44RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Lime Green injects energy and a contemporary edge, perfect for call-to-action elements.
#5be21291, 226, 1899, 85, 4860, 0, 92, 11RolesBg Dark
Yellow-Green adds brightness and optimism, supporting contrast and readability in the palette.
#b7eb34183, 235, 5277, 82, 5622, 0, 78, 8The support colors extend the main greens with softer, cooler green variations that balance intensity and add subtle depth without competing visually.
RolesIcon, Border, Divider, Outline
Olive Green provides a muted, stable tone that complements the brighter main greens and anchors interface elements.
#5c9a3192, 154, 4995, 52, 4040, 0, 68, 40Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Primary Text
#ffffff255, 255, 2550, 0, 1000, 0, 0, 0#f2f9d4242, 249, 21271, 76, 903, 0, 15, 2RolesText, Btn Secondary Text
#2f3b1647, 59, 2279, 46, 1620, 0, 63, 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-grass-green: #1f8e0f;
--color-lime-green: #5be212;
--color-yellow-green: #b7eb34;
--color-olive-green: #5c9a31;
--color-white: #ffffff;
--color-pale-lime: #f2f9d4;
--color-dark-olive: #2f3b16;
}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: #1f8e0f;
--role-link: #1f8e0f;
--role-btn-primary-bg: #1f8e0f;
--role-headline: #1f8e0f;
--role-btn-secondary-bg: #5be212;
--role-btn-outlined-border: #5be212;
--role-btn-outlined-text: #5be212;
--role-bg-dark: #b7eb34;
--role-icon: #5c9a31;
--role-border: #5c9a31;
--role-divider: #5c9a31;
--role-outline: #5c9a31;
--role-bg-light: #ffffff;
--role-btn-primary-text: #ffffff;
--role-text: #2f3b16;
--role-btn-secondary-text: #2f3b16;
}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.{
"grass-green": "#1f8e0f",
"lime-green": "#5be212",
"yellow-green": "#b7eb34",
"olive-green": "#5c9a31",
"white": "#ffffff",
"pale-lime": "#f2f9d4",
"dark-olive": "#2f3b16"
}