Burnt Orange#C45812
Mustard Yellow#D6911C
Light Brown#B78A5E
Warm Brown#75502D
Mutated Gray#8F8E8B
Palette direction

Burnt Orange Earthy Color Palette

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.

MonochromaticCreativeburnt orangeearthy toneswarm colorsnatural palette
palette-preview.example
Creative color direction

Burnt Orange Earthy Color Palette

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 system
Logo contrast guide

Logo color pairings

ColorFly checks the palette colors against each other and suggests the clearest logo/background combinations.

Logo Charcoal #3B3A36on Pure White #FFFFFF11.4:1 Excellent
Logo Pure White #FFFFFFon Charcoal #3B3A3611.4:1 Excellent
Logo Charcoal #3B3A36on Ivory #F2E6D59.2:1 Excellent
Icon color
BackgroundBurnt Orange#C45812TextPure White#FFFFFF
Primary Button4.42:1
Large text

Best for the main action users should notice first.

BackgroundMustard Yellow#D6911CTextCharcoal#3B3A36
Secondary Button4.30:1
Large text

Useful for softer choices and secondary paths.

BackgroundLight Brown#B78A5ETextBurnt Orange#C45812
Outlined Button1.43:1
Low

Good for lower-emphasis actions on light surfaces.

BackgroundLight Brown#B78A5ETextBurnt Orange#C45812
Text Button1.43:1
Low

A quiet action for links, navigation, and inline decisions.

Palette composition8 colorsMonochromatic color relationship
9:41Burnt Orange Earthy Color Palette Color role balance
Monochromatic system
60% DominantNeutrals

Backgrounds, large surfaces, whitespace, and reading comfort.

30% SecondarySupport colors

Sections, secondary UI, illustrations, and repeated brand moments.

10% AccentMain colors

High-attention moments like primary actions and memorable highlights.

CBurnt Orange Earthy Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

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.

Color Roles and Usage Map

Assign existing palette colors to brand, typography, and interface roles.

Brand identity

LogoUsed for logo marks and core brand symbols.Burnt Orange #C45812
HeadlineUsed for main titles and key messages.Burnt Orange #C45812
LinkUsed for links and interactive text.Burnt Orange #C45812

Buttons

Primary Button
BackgroundBurnt Orange #C45812
TextPure White #FFFFFF
Secondary Button
BackgroundMustard Yellow #D6911C
TextCharcoal #3B3A36
Outlined Button
BackgroundBurnt Orange #C45812
TextBurnt Orange #C45812

Interface

TextDefault readable body text.Charcoal #3B3A36
Bg LightLight page or section background.Light Brown #B78A5E
Bg DarkDark page or section background.Ivory #F2E6D5
IconSmall interface icons and marks.Warm Brown #75502D
BorderCards, inputs, and component borders.Warm Brown #75502D
DividerSubtle separators between content.Warm Brown #75502D
OutlineFocus rings and emphasis outlines.Warm Brown #75502D

Palette Colors

A compact view of the brand, support, and neutral colors that make up this system.

Main (Brand) Colors

The triadic scheme uses burnt orange, mustard yellow, and light brown to create a dynamic yet balanced combination, evoking creativity, warmth, and friendliness.

PrimaryBurnt Orange

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.

HEX#C45812
RGB196, 88, 18
HSL24, 83, 42
CMYK0, 55, 91, 23
SecondaryMustard Yellow

RolesBtn Secondary Bg

Mustard Yellow brings warmth and friendliness, creating an inviting secondary button background that contrasts well with burnt orange.

HEX#D6911C
RGB214, 145, 28
HSL38, 77, 47
CMYK0, 32, 87, 16
TertiaryLight Brown

RolesBg Light

Light Brown provides a soft, warm anchoring background tone that grounds the palette in earthy natural vibes.

HEX#B78A5E
RGB183, 138, 94
HSL30, 38, 54
CMYK0, 25, 49, 28

Support Colors

Support colors extend the warmth and neutrality of the main palette with muted brown and gray tones, adding subtle depth without competing for attention.

Warm Brown

RolesIcon, Border, Divider, Outline

Warm Brown complements the light brown and burnt orange by adding depth and subtle contrast for interface elements.

HEX#75502D
RGB117, 80, 45
HSL29, 44, 32
CMYK0, 32, 62, 54
Mutated Gray

Muted Gray balances the palette with a neutral tone that provides sophistication and softens the vibrancy of the main colors.

HEX#8F8E8B
RGB143, 142, 139
HSL45, 2, 55
CMYK0, 1, 3, 44

Neutral Colors

Utility colors for backgrounds, text, borders, and balance.

Ivory

RolesBg Dark

HEX#F2E6D5
RGB242, 230, 213
HSL35, 53, 89
CMYK0, 5, 12, 5
Pure White

RolesBtn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Charcoal

RolesText, Btn Secondary Text

HEX#3B3A36
RGB59, 58, 54
HSL48, 4, 22
CMYK0, 2, 8, 77

Export and Handoff

Copy palette values for design systems, websites, and client handoff.

Color tokens

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;
}

Role tokens

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;
}

JSON

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"
}
Press Space to load new palette