This palette translates the bouquet’s fresh green fruit, soft white petals, and deep leaf shadows into a refined floral system. The mix feels clean and natural with enough contrast to work for a contemporary brand that wants elegance without losing vitality.
This palette translates the bouquet’s fresh green fruit, soft white petals, and deep leaf shadows into a refined floral system. The mix feels clean and natural with enough contrast to work for a contemporary brand that wants elegance without losing vitality.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors work together as a soft botanical family, moving from vivid green fruit tones to crisp white bloom tones with a cool leafy anchor. The result feels recognizable, fresh, and natural without becoming overly predictable.
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 a soft botanical family, moving from vivid green fruit tones to crisp white bloom tones with a cool leafy anchor. The result feels recognizable, fresh, and natural without becoming overly predictable.
RolesLogo, Btn Primary Bg
It brings the bouquet’s lively botanical energy and gives the palette a clear fresh focal point.
#84A12F132, 161, 4775, 55, 4118, 0, 71, 37RolesLink, Btn Secondary Bg
It softens the stronger greens and adds a calm, airy surface color that still feels organic.
#DCE7C7220, 231, 19981, 40, 845, 0, 14, 9RolesBtn Outlined Border, Btn Outlined Text, Headline
It captures the pale petals and provides a bright floral note that keeps the system light and refined.
#F4F6F1244, 246, 24184, 22, 951, 0, 2, 4The support colors extend the palette with grounded leaf and stem tones that add depth without competing with the main floral greens. They help the system feel usable across interfaces by balancing brightness with a natural dark accent.
RolesIcon, Border
It adds a muted plant-like midpoint that supports structure while staying quiet beside the brighter greens.
#6F7D5D111, 125, 9386, 15, 4311, 0, 26, 51RolesDivider, Outline
It supplies a deep leafy contrast that strengthens hierarchy and keeps thin UI elements legible.
#2F3A2E47, 58, 46115, 12, 2019, 0, 21, 77Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F8F5247, 248, 24580, 18, 970, 0, 1, 3RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#171A1623, 26, 22105, 8, 912, 0, 15, 90Copy 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-moss-green: #84A12F;
--color-sage-mist: #DCE7C7;
--color-ivory: #F4F6F1;
--color-olive-drab: #6F7D5D;
--color-charcoal-green: #2F3A2E;
--color-white: #FFFFFF;
--color-snow: #F7F8F5;
--color-raven: #171A16;
}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: #84A12F;
--role-btn-primary-bg: #84A12F;
--role-link: #DCE7C7;
--role-btn-secondary-bg: #DCE7C7;
--role-btn-outlined-border: #F4F6F1;
--role-btn-outlined-text: #F4F6F1;
--role-headline: #F4F6F1;
--role-icon: #6F7D5D;
--role-border: #6F7D5D;
--role-divider: #2F3A2E;
--role-outline: #2F3A2E;
--role-bg-light: #FFFFFF;
--role-bg-dark: #171A16;
--role-text: #171A16;
--role-btn-primary-text: #171A16;
--role-btn-secondary-text: #171A16;
}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.{
"moss-green": "#84A12F",
"sage-mist": "#DCE7C7",
"ivory": "#F4F6F1",
"olive-drab": "#6F7D5D",
"charcoal-green": "#2F3A2E",
"white": "#FFFFFF",
"snow": "#F7F8F5",
"raven": "#171A16"
}