This palette turns the image’s earthy produce tones into a bold, usable brand system with grounded contrast and a lively accent rhythm. It feels fresh and artisanal without becoming rustic or overly muted.
This palette turns the image’s earthy produce tones into a bold, usable brand system with grounded contrast and a lively accent rhythm. It feels fresh and artisanal without becoming rustic or overly muted.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors combine a charred charcoal, ripe squash orange, and garden leaf green to echo the image’s market crates and produce with a strong, recognizable balance. Together they create a vivid but grounded identity that feels seasonal, appetizing, and dependable.
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 combine a charred charcoal, ripe squash orange, and garden leaf green to echo the image’s market crates and produce with a strong, recognizable balance. Together they create a vivid but grounded identity that feels seasonal, appetizing, and dependable.
RolesLogo, Btn Secondary Bg
This near-black brown anchors the palette with a sturdy, market-crate feel that gives the brand structure and seriousness.
#2C2A2744, 42, 3936, 6, 160, 5, 11, 83RolesBtn Primary Bg, Headline
This saturated orange delivers appetite, energy, and immediate shelf appeal without drifting into neon brightness.
#F28C28242, 140, 4030, 89, 550, 42, 83, 5RolesLink
This softened green adds freshness and organic credibility, reinforcing the produce-led story while staying practical on screen.
#5A8F3B90, 143, 5998, 42, 4037, 0, 59, 44The support colors extend the palette with a restrained mossy blue-green and a muted stone gray, adding depth and utility without competing with the primary market tones. They help separate content, guide attention, and keep the system feeling natural and composed.
RolesBtn Outlined Border, Icon
This subdued blue-green softens the palette’s warmth and gives outlines and icons a calm, natural counterpoint.
#547A6384, 122, 99144, 18, 4031, 0, 19, 52RolesBorder, Divider, Outline
This balanced gray supports UI structure and spacing while echoing the image’s rough, practical surfaces.
#7A7D78122, 125, 12096, 2, 482, 0, 4, 51Utility colors for backgrounds, text, borders, and balance.
RolesBg Light, Btn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesBtn Outlined Text
#F3F0E8243, 240, 23244, 31, 930, 1, 5, 5RolesBg Dark, Text, Btn Primary Text
#11110F17, 17, 1560, 6, 60, 0, 12, 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-charcoal-crate: #2C2A27;
--color-squash-orange: #F28C28;
--color-garden-leaf: #5A8F3B;
--color-moss-river: #547A63;
--color-stone-stem: #7A7D78;
--color-pure-white: #FFFFFF;
--color-soft-linen: #F3F0E8;
--color-deep-ink: #11110F;
}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: #2C2A27;
--role-btn-secondary-bg: #2C2A27;
--role-btn-primary-bg: #F28C28;
--role-headline: #F28C28;
--role-link: #5A8F3B;
--role-btn-outlined-border: #547A63;
--role-icon: #547A63;
--role-border: #7A7D78;
--role-divider: #7A7D78;
--role-outline: #7A7D78;
--role-bg-light: #FFFFFF;
--role-btn-secondary-text: #FFFFFF;
--role-btn-outlined-text: #F3F0E8;
--role-bg-dark: #11110F;
--role-text: #11110F;
--role-btn-primary-text: #11110F;
}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.{
"charcoal-crate": "#2C2A27",
"squash-orange": "#F28C28",
"garden-leaf": "#5A8F3B",
"moss-river": "#547A63",
"stone-stem": "#7A7D78",
"pure-white": "#FFFFFF",
"soft-linen": "#F3F0E8",
"deep-ink": "#11110F"
}