This palette draws inspiration from the warm yellow-orange and natural green tones in the provided image, combined with earthy and neutral shades for balance and versatility. The colors harmonize to evoke a fresh, organic, and energetic brand identity suitable for plant-based or eco-conscious businesses.
This palette draws inspiration from the warm yellow-orange and natural green tones in the provided image, combined with earthy and neutral shades for balance and versatility. The colors harmonize to evoke a fresh, organic, and energetic brand identity suitable for plant-based or eco-conscious businesses.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors form an analogous color scheme with warm yellow-orange through bright yellow to fresh green, providing vibrant yet natural cohesion for a plant-based brand.
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 form an analogous color scheme with warm yellow-orange through bright yellow to fresh green, providing vibrant yet natural cohesion for a plant-based brand.
RolesLogo, Link, Btn Primary Bg
Goldenrod introduces energetic warmth and optimism, making it perfect for the logo and primary button background to capture attention and convey vitality.
#F5A623245, 166, 3537, 91, 550, 32, 86, 4RolesHeadline
Sunray Yellow complements Goldenrod with brightness and clarity, ideal for primary button text and headlines that need to stand out with legibility and cheerfulness.
#FFD966255, 217, 10245, 100, 700, 15, 60, 0RolesBtn Secondary Bg, Btn Outlined Border, Btn Outlined Text
Moss Green anchors the palette with a natural, earthy tone that reinforces themes of growth and sustainability, making it suitable for secondary buttons and outlined elements.
#6AA84F106, 168, 79102, 36, 4837, 0, 53, 34The support colors extend the palette with softer green and muted brown shades to balance and enhance the main colors without overpowering them.
RolesIcon, Border, Divider
Sky Blue adds coolness and contrast, bringing a fresh, airy element that balances the warmth of Goldenrod and Sunray Yellow.
#9FC5E8159, 197, 232209, 61, 7731, 15, 0, 9RolesOutline
Olive Drab provides a subtle, muted accent that complements Moss Green and grounds the palette with a natural, earthy character.
#BDB76B189, 183, 10756, 38, 580, 3, 43, 26Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBg Dark
#F3F3F3243, 243, 2430, 0, 950, 0, 0, 5RolesText, Btn Primary Text, Btn Secondary Text
#33333351, 51, 510, 0, 200, 0, 0, 80Copy 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-goldenrod: #F5A623;
--color-sunray-yellow: #FFD966;
--color-moss-green: #6AA84F;
--color-sky-blue: #9FC5E8;
--color-olive-drab: #BDB76B;
--color-pure-white: #FFFFFF;
--color-alabaster: #F3F3F3;
--color-charcoal: #333333;
}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: #F5A623;
--role-link: #F5A623;
--role-btn-primary-bg: #F5A623;
--role-headline: #FFD966;
--role-btn-secondary-bg: #6AA84F;
--role-btn-outlined-border: #6AA84F;
--role-btn-outlined-text: #6AA84F;
--role-icon: #9FC5E8;
--role-border: #9FC5E8;
--role-divider: #9FC5E8;
--role-outline: #BDB76B;
--role-bg-light: #FFFFFF;
--role-bg-dark: #F3F3F3;
--role-text: #333333;
--role-btn-primary-text: #333333;
--role-btn-secondary-text: #333333;
}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.{
"goldenrod": "#F5A623",
"sunray-yellow": "#FFD966",
"moss-green": "#6AA84F",
"sky-blue": "#9FC5E8",
"olive-drab": "#BDB76B",
"pure-white": "#FFFFFF",
"alabaster": "#F3F3F3",
"charcoal": "#333333"
}