This palette features warm earthy tones with vibrant orange highlights, balanced by neutral grays and browns to create a grounded yet energetic brand identity. The colors work together to convey warmth, creativity, and stability, suitable for brands wanting a natural and approachable feel.
This palette features warm earthy tones with vibrant orange highlights, balanced by neutral grays and browns to create a grounded yet energetic brand identity. The colors work together to convey warmth, creativity, and stability, suitable for brands wanting a natural and approachable feel.
Explore the color systemColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.
The triadic scheme uses burnt orange, mustard yellow, and light brown to create a dynamic yet balanced combination, evoking creativity, warmth, and friendliness.
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 triadic scheme uses burnt orange, mustard yellow, and light brown to create a dynamic yet balanced combination, evoking creativity, warmth, and friendliness.
RolesLogo, Link, Btn Primary Bg, Btn Outlined Border, Btn Outlined Text, Headline
Burnt Orange adds vibrant energy and creativity to the brand, serving as a strong recognizable color for key interactive elements.
#C45812196, 88, 1824, 83, 420, 55, 91, 23RolesBtn Secondary Bg
Mustard Yellow brings warmth and friendliness, creating an inviting secondary button background that contrasts well with burnt orange.
#D6911C214, 145, 2838, 77, 470, 32, 87, 16RolesBg Light
Light Brown provides a soft, warm anchoring background tone that grounds the palette in earthy natural vibes.
#B78A5E183, 138, 9430, 38, 540, 25, 49, 28Support colors extend the warmth and neutrality of the main palette with muted brown and gray tones, adding subtle depth without competing for attention.
RolesIcon, Border, Divider, Outline
Warm Brown complements the light brown and burnt orange by adding depth and subtle contrast for interface elements.
#75502D117, 80, 4529, 44, 320, 32, 62, 54Muted Gray balances the palette with a neutral tone that provides sophistication and softens the vibrancy of the main colors.
#8F8E8B143, 142, 13945, 2, 550, 1, 3, 44Utility colors for backgrounds, text, borders, and balance.
RolesBg Dark
#F2E6D5242, 230, 21335, 53, 890, 5, 12, 5RolesBtn Primary Text
#FFFFFF255, 255, 2550, 0, 1000, 0, 0, 0RolesText, Btn Secondary Text
#3B3A3659, 58, 5448, 4, 220, 2, 8, 77Copy 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-burnt-orange: #C45812;
--color-mustard-yellow: #D6911C;
--color-light-brown: #B78A5E;
--color-warm-brown: #75502D;
--color-mutated-gray: #8F8E8B;
--color-ivory: #F2E6D5;
--color-pure-white: #FFFFFF;
--color-charcoal: #3B3A36;
}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: #C45812;
--role-link: #C45812;
--role-btn-primary-bg: #C45812;
--role-btn-outlined-border: #C45812;
--role-btn-outlined-text: #C45812;
--role-headline: #C45812;
--role-btn-secondary-bg: #D6911C;
--role-bg-light: #B78A5E;
--role-icon: #75502D;
--role-border: #75502D;
--role-divider: #75502D;
--role-outline: #75502D;
--role-bg-dark: #F2E6D5;
--role-btn-primary-text: #FFFFFF;
--role-text: #3B3A36;
--role-btn-secondary-text: #3B3A36;
}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.{
"burnt-orange": "#C45812",
"mustard-yellow": "#D6911C",
"light-brown": "#B78A5E",
"warm-brown": "#75502D",
"mutated-gray": "#8F8E8B",
"ivory": "#F2E6D5",
"pure-white": "#FFFFFF",
"charcoal": "#3B3A36"
}