A warm, market-inspired palette built from ripe mango orange, oat-cream beige, and deep botanical green, with muted terracotta and moss accents to keep the system grounded. It feels handcrafted and inviting while still giving the brand clear contrast for UI hierarchy and signage.
A warm, market-inspired palette built from ripe mango orange, oat-cream beige, and deep botanical green, with muted terracotta and moss accents to keep the system grounded. It feels handcrafted and inviting while still giving the brand clear contrast for UI hierarchy and signage.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The main colors pair vivid mango orange with a grounded deep green, anchored by a soft oat-cream tone for a recognizable market-style system. Together they create a lively, artisanal contrast that feels fresh, edible, and easy to apply in a
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 pair vivid mango orange with a grounded deep green, anchored by a soft oat-cream tone for a recognizable market-style system. Together they create a lively, artisanal contrast that feels fresh, edible, and easy to apply in a
RolesLogo, Btn Primary Bg
The energetic signature color that gives the brand instant appetite appeal and strong shelf presence.
#F26A21242, 106, 3321, 89, 540, 56, 86, 5RolesLink, Btn Secondary Bg, Headline
A grounded botanical tone that adds structure, trust, and a more refined counterbalance to the orange.
#2F5A3A47, 90, 58135, 31, 2748, 0, 36, 65RolesBg Light, Bg Dark
A warm light neutral that softens the palette and keeps text and backgrounds readable across the system.
#F4E6D1244, 230, 20936, 61, 890, 6, 14, 4Muted support accents extend the palette with earthy variation without competing with the main orange and green. They add tactile warmth and material depth for borders, dividers, h
RolesBtn Outlined Border, Btn Outlined Text
A muted terracotta accent that supports outlined actions while staying visually tied to the mango hue.
#C97B53201, 123, 8320, 52, 560, 39, 59, 21RolesIcon, Border, Divider, Outline
A subdued moss-green utility tone that reinforces the botanical direction and handles interface structure quietly.
#6F8B52111, 139, 8289, 26, 4320, 0, 41, 45Utility colors for backgrounds, text, borders, and balance.
RolesBtn Secondary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0#F7F1E8247, 241, 23236, 48, 940, 2, 6, 3RolesText, Btn Primary Text
#15151521, 21, 210, 0, 80, 0, 0, 92Copy 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-mango-fire: #F26A21;
--color-cambodia-pine: #2F5A3A;
--color-oat-milk-cream: #F4E6D1;
--color-clay-peel: #C97B53;
--color-olive-stem: #6F8B52;
--color-pure-white: #FFFFFF;
--color-alabaster-oat: #F7F1E8;
--color-charcoal-ink: #151515;
}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: #F26A21;
--role-btn-primary-bg: #F26A21;
--role-link: #2F5A3A;
--role-btn-secondary-bg: #2F5A3A;
--role-headline: #2F5A3A;
--role-bg-light: #F4E6D1;
--role-bg-dark: #F4E6D1;
--role-btn-outlined-border: #C97B53;
--role-btn-outlined-text: #C97B53;
--role-icon: #6F8B52;
--role-border: #6F8B52;
--role-divider: #6F8B52;
--role-outline: #6F8B52;
--role-btn-secondary-text: #FFFFFF;
--role-text: #151515;
--role-btn-primary-text: #151515;
}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.{
"mango-fire": "#F26A21",
"cambodia-pine": "#2F5A3A",
"oat-milk-cream": "#F4E6D1",
"clay-peel": "#C97B53",
"olive-stem": "#6F8B52",
"pure-white": "#FFFFFF",
"alabaster-oat": "#F7F1E8",
"charcoal-ink": "#151515"
}