This palette turns the image's layered greens and chartreuse accent into a crisp, nature-led brand system with a modern editorial edge. The deep forest, muted olive, and vivid lime work together as a recognizable progression from grounded to energizing.
This palette turns the image's layered greens and chartreuse accent into a crisp, nature-led brand system with a modern editorial edge. The deep forest, muted olive, and vivid lime work together as a recognizable progression from grounded to energizing.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay within a tight green family, moving from dark woodland depth to a brighter lime note that keeps the system fresh without breaking recognition. This creates a cohesive palette that feels organic, contemporary, and easy to apply across identity and interface design.
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 tight green family, moving from dark woodland depth to a brighter lime note that keeps the system fresh without breaking recognition. This creates a cohesive palette that feels organic, contemporary, and easy to apply across identity and interface design.
RolesLogo, Btn Primary Bg
This deep fir green anchors the brand with authority and gives the palette a strong, memorable base.
#123E2C18, 62, 44155, 55, 1671, 0, 29, 76RolesLink, Btn Secondary Bg
This canopy green adds movement and midtone balance, making the system feel usable and connected.
#2C5A3B44, 90, 59140, 34, 2651, 0, 34, 65RolesBtn Outlined Border, Btn Outlined Text, Headline
This lime sprout accent delivers energy and visibility, giving the palette a sharp contemporary point of emphasis.
#A9D221169, 210, 3374, 73, 4820, 0, 84, 18The support colors extend the greens with quieter, less saturated tones that improve usability and depth without competing with the main palette. They are designed to soften transitions, support interface structure, and keep the image-inspired system balanced.
RolesIcon, Border, Divider, Outline
This moss slate bridges the dark and bright greens with a restrained, practical tone for interface details, providing subtle separation and structure after removal of the other support color.
#5F705795, 112, 87101, 13, 3915, 0, 22, 56Utility colors for backgrounds, text, borders, and balance.
RolesBg Dark, Btn Primary Text, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Light
#F4F7F2244, 247, 24296, 24, 961, 0, 2, 3RolesText
#11111117, 17, 170, 0, 70, 0, 0, 93Copy 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-fir: #123E2C;
--color-canopy-green: #2C5A3B;
--color-lime-sprout: #A9D221;
--color-moss-slate: #5F7057;
--color-pure-white: #FFFFFF;
--color-soft-mist: #F4F7F2;
--color-near-black: #111111;
}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: #123E2C;
--role-btn-primary-bg: #123E2C;
--role-link: #2C5A3B;
--role-btn-secondary-bg: #2C5A3B;
--role-btn-outlined-border: #A9D221;
--role-btn-outlined-text: #A9D221;
--role-headline: #A9D221;
--role-icon: #5F7057;
--role-border: #5F7057;
--role-divider: #5F7057;
--role-outline: #5F7057;
--role-bg-dark: #FFFFFF;
--role-btn-primary-text: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-bg-light: #F4F7F2;
--role-text: #111111;
}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-fir": "#123E2C",
"canopy-green": "#2C5A3B",
"lime-sprout": "#A9D221",
"moss-slate": "#5F7057",
"pure-white": "#FFFFFF",
"soft-mist": "#F4F7F2",
"near-black": "#111111"
}