This vibrant palette is inspired by the bright, ripe oranges balanced with a soft, fresh green from the background. It creates a lively and friendly brand identity with energetic main colors and calm support tones. The neutrals anchor the palette for usability and readability, making it ideal for food, wellness, or fresh consumer brands.
This vibrant palette is inspired by the bright, ripe oranges balanced with a soft, fresh green from the background. It creates a lively and friendly brand identity with energetic main colors and calm support tones. The neutrals anchor the palette for usability and readability, making it ideal for food, wellness, or fresh consumer brands.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors create a complementary contrast with vivid orange and fresh green, giving strong brand recognition through energetic and natural tones.
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 create a complementary contrast with vivid orange and fresh green, giving strong brand recognition through energetic and natural tones.
RolesLogo, Btn Primary Bg, Btn Outlined Text, Link
Persimmon brings warmth and energy, evoking appetite appeal and vitality.
#FF7F11255, 127, 1728, 100, 530, 50, 93, 0RolesHeadline, Btn Secondary Bg, Btn Outlined Border
Tea Green adds a natural freshness that balances the orange’s intensity with calm and growth connotations.
#A8D58E168, 213, 14298, 46, 7021, 0, 33, 16Support colors extend the main palette with soft cream and muted green tones that complement and balance without overpowering.
RolesIcon, Border, Divider, Outline
Light Khaki offers a soft, muted yellow-green that supports the main colors by adding subtle warmth and grounding.
#DAD7B2218, 215, 17856, 35, 780, 1, 18, 15Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F2F5DA242, 245, 21867, 57, 911, 0, 11, 4RolesText, Btn Primary Text, Btn Secondary Text
#2B2B2B43, 43, 430, 0, 170, 0, 0, 83Copy 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-persimmon: #FF7F11;
--color-tea-green: #A8D58E;
--color-light-khaki: #DAD7B2;
--color-white: #FFFFFF;
--color-honeydew: #F2F5DA;
--color-charcoal: #2B2B2B;
}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: #FF7F11;
--role-btn-primary-bg: #FF7F11;
--role-btn-outlined-text: #FF7F11;
--role-link: #FF7F11;
--role-headline: #A8D58E;
--role-btn-secondary-bg: #A8D58E;
--role-btn-outlined-border: #A8D58E;
--role-icon: #DAD7B2;
--role-border: #DAD7B2;
--role-divider: #DAD7B2;
--role-outline: #DAD7B2;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F2F5DA;
--role-text: #2B2B2B;
--role-btn-primary-text: #2B2B2B;
--role-btn-secondary-text: #2B2B2B;
}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.{
"persimmon": "#FF7F11",
"tea-green": "#A8D58E",
"light-khaki": "#DAD7B2",
"white": "#FFFFFF",
"honeydew": "#F2F5DA",
"charcoal": "#2B2B2B"
}