This palette translates the image’s fresh green banding into a more strategic brand system with crisp, botanical energy and strong digital usability. The combination feels lively but controlled, making it suitable for a brand that wants to signal growth, clarity, and modern confidence.
This palette translates the image’s fresh green banding into a more strategic brand system with crisp, botanical energy and strong digital usability. The combination feels lively but controlled, making it suitable for a brand that wants to signal growth, clarity, and modern confidence.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay within a tightly related green range, creating a recognizable stripe-like system that feels naturally cohesive. The shifts in depth and brightness give the palette motion without breaking its fresh, organic identity.
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 within a tightly related green range, creating a recognizable stripe-like system that feels naturally cohesive. The shifts in depth and brightness give the palette motion without breaking its fresh, organic identity.
RolesLogo, Btn Secondary Bg
This balanced medium green anchors the brand with a steady, adaptable presence.
#2A8C5A42, 140, 90149, 54, 3670, 0, 36, 45RolesLink, Btn Primary Bg
This brighter green adds energy and visibility, making interactive elements feel fresh and immediate.
#72D98C114, 217, 140135, 58, 6547, 0, 35, 15RolesHeadline, Btn Outlined Border, Btn Outlined Text
This light yellow-green introduces lift and distinctiveness while keeping the palette botanically connected.
#CBEFA1203, 239, 16188, 71, 7815, 0, 33, 6The support colors add quiet depth and structure without competing with the main greens. They extend the palette with darker leaf tones that improve hierarchy and bring a more grounded, usable interface feel.
RolesIcon, Border
This darker support green strengthens UI structure and adds a grounded counterpoint to the brighter mains.
#1F5E3B31, 94, 59147, 50, 2567, 0, 37, 63RolesDivider, Outline
This muted moss tone softens separations and outlines while preserving the palette’s natural character.
#4C7A4976, 122, 73116, 25, 3838, 0, 40, 52Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F5F7F1245, 247, 24180, 27, 961, 0, 2, 3RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#10171216, 23, 18137, 18, 830, 0, 22, 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-emerald-current: #2A8C5A;
--color-mint-pulse: #72D98C;
--color-lime-veil: #CBEFA1;
--color-forest-undertone: #1F5E3B;
--color-moss-frame: #4C7A49;
--color-pure-white: #FFFFFF;
--color-soft-mist: #F5F7F1;
--color-deep-charcoal: #101712;
}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: #2A8C5A;
--role-btn-secondary-bg: #2A8C5A;
--role-link: #72D98C;
--role-btn-primary-bg: #72D98C;
--role-headline: #CBEFA1;
--role-btn-outlined-border: #CBEFA1;
--role-btn-outlined-text: #CBEFA1;
--role-icon: #1F5E3B;
--role-border: #1F5E3B;
--role-divider: #4C7A49;
--role-outline: #4C7A49;
--role-bg-light: #FFFFFF;
--role-bg-dark: #101712;
--role-text: #101712;
--role-btn-primary-text: #101712;
--role-btn-secondary-text: #101712;
}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-current": "#2A8C5A",
"mint-pulse": "#72D98C",
"lime-veil": "#CBEFA1",
"forest-undertone": "#1F5E3B",
"moss-frame": "#4C7A49",
"pure-white": "#FFFFFF",
"soft-mist": "#F5F7F1",
"deep-charcoal": "#101712"
}