A soft botanical base with citrus and terracotta accents creates a fresh, editorial system that feels sunlit, tactile, and quietly modern. The palette balances natural greens with warm edible tones, making it suitable for brands that want an artisanal look with clear digital usability.
A soft botanical base with citrus and terracotta accents creates a fresh, editorial system that feels sunlit, tactile, and quietly modern. The palette balances natural greens with warm edible tones, making it suitable for brands that want an artisanal look with clear digital usability.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors stay within a green-to-gold range, echoing the image’s dappled leaves, citrus, and warm tabletop light. That close relationship creates a recognizable system that feels cohesive without becoming flat.
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 green-to-gold range, echoing the image’s dappled leaves, citrus, and warm tabletop light. That close relationship creates a recognizable system that feels cohesive without becoming flat.
RolesLogo, Link, Btn Primary Bg, Headline
A grounded olive that establishes the brand’s botanical core and gives the system a calm, natural anchor.
#7A8E5A122, 142, 9083, 22, 4514, 0, 37, 44RolesBtn Secondary Bg, Btn Outlined Border
A bright citrus gold that adds energy and visibility while staying connected to the sunlit mood of the image.
#E2B53B226, 181, 5944, 74, 560, 20, 74, 11RolesBtn Outlined Text
A warm peel-toned accent that brings a handcrafted, edible quality and keeps the palette from leaning too cool.
#D57A3D213, 122, 6124, 64, 540, 43, 71, 16The support colors extend the warm, natural range with restrained earthy and leafy notes, helping the palette stay useful across interfaces and printed touchpoints. They reinforce,
RolesIcon, Border
A muted clay brown that supports structure and adds an earthy counterweight to the brighter citrus notes.
#8F6B4D143, 107, 7727, 30, 430, 25, 46, 44RolesDivider, Outline
A soft muted green that lightens the system for UI separation without competing with the main olive tone.
#B7C39B183, 195, 15578, 25, 696, 0, 21, 24Utility colors for backgrounds, text, borders, and balance.
RolesBg Light
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F4F1EA244, 241, 23442, 31, 940, 1, 4, 4RolesBg Dark, Text, Btn Primary Text, Btn Secondary Text
#17171723, 23, 230, 0, 90, 0, 0, 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-moss-olive: #7A8E5A;
--color-citrus-glow: #E2B53B;
--color-terracotta-peel: #D57A3D;
--color-clay-husk: #8F6B4D;
--color-olive-mist: #B7C39B;
--color-pure-white: #FFFFFF;
--color-warm-linen: #F4F1EA;
--color-ink-black: #171717;
}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: #7A8E5A;
--role-link: #7A8E5A;
--role-btn-primary-bg: #7A8E5A;
--role-headline: #7A8E5A;
--role-btn-secondary-bg: #E2B53B;
--role-btn-outlined-border: #E2B53B;
--role-btn-outlined-text: #D57A3D;
--role-icon: #8F6B4D;
--role-border: #8F6B4D;
--role-divider: #B7C39B;
--role-outline: #B7C39B;
--role-bg-light: #FFFFFF;
--role-bg-dark: #171717;
--role-text: #171717;
--role-btn-primary-text: #171717;
--role-btn-secondary-text: #171717;
}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-olive": "#7A8E5A",
"citrus-glow": "#E2B53B",
"terracotta-peel": "#D57A3D",
"clay-husk": "#8F6B4D",
"olive-mist": "#B7C39B",
"pure-white": "#FFFFFF",
"warm-linen": "#F4F1EA",
"ink-black": "#171717"
}