Burnt Orange#D94F2F
Deep Brown#3F1B17
Terra Cotta#E05A32
Warm Beige#D8B7A0
Dusty Blush#C08174
Palette direction

Burnt Orange Terra Color Palette

This palette draws inspiration from the warm, earthy hues and deep contrasts of the image, crafting a vibrant yet balanced color system. The main colors establish a clear visual hierarchy with distinctive warmth, energy, and grounded sophistication, while the support colors subtly enhance depth and harmony. The neutrals provide clean and readable contrast to ensure accessibility and clarity.

MonochromaticCreativeburnt orangeterra cottadeep brownwarm neutrals
palette-preview.example
Creative color direction

Burnt Orange Terra Color Palette

This palette draws inspiration from the warm, earthy hues and deep contrasts of the image, crafting a vibrant yet balanced color system. The main colors establish a clear visual hierarchy with distinctive warmth, energy, and grounded sophistication, while the support colors subtly enhance depth and harmony. The neutrals provide clean and readable contrast to ensure accessibility and clarity.

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 Pure White #FFFFFFon Deep Brown #3F1B1715.2:1 Excellent
Logo Very Dark Brown #2A1E1Bon Pure White #FFFFFF16.2:1 Excellent
Logo Very Dark Brown #2A1E1Bon Warm Beige #D8B7A08.6:1 Excellent
Logo Very Dark Brown #2A1E1Bon Dusty Blush #C081745.1:1 Strong
Icon color
BackgroundBurnt Orange#D94F2FTextPure White#FFFFFF
Primary Button4.11:1
Large text

Best for the main action users should notice first.

BackgroundTerra Cotta#E05A32TextVery Dark Brown#2A1E1B
Secondary Button4.37:1
Large text

Useful for softer choices and secondary paths.

BackgroundPure White#FFFFFFTextDusty Blush#C08174
Outlined Button3.17:1
Large text

Good for lower-emphasis actions on light surfaces.

BackgroundPure White#FFFFFFTextTerra Cotta#E05A32
Text Button3.70:1
Large text

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

Palette composition8 colorsMonochromatic color relationship
9:41Burnt Orange Terra 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 Terra Color PaletteCreative brand direction ColorFly.design
Strategic palette preview
Why it works

A usable
color system.

The main colors form a triadic harmony balancing an energetic burnt orange, a strong deep brown, and a warm terra cotta for high recognition and complementary vibrancy.

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 #D94F2F
HeadlineUsed for main titles and key messages.Terra Cotta #E05A32
LinkUsed for links and interactive text.Terra Cotta #E05A32

Buttons

Primary Button
BackgroundBurnt Orange #D94F2F
TextPure White #FFFFFF
Secondary Button
BackgroundTerra Cotta #E05A32
TextVery Dark Brown #2A1E1B
Outlined Button
BackgroundBurnt Orange #D94F2F
TextDusty Blush #C08174

Interface

TextDefault readable body text.Very Dark Brown #2A1E1B
Bg LightLight page or section background.Pure White #FFFFFF
Bg DarkDark page or section background.Near White #F7EDE6
IconSmall interface icons and marks.Warm Beige #D8B7A0
BorderCards, inputs, and component borders.Warm Beige #D8B7A0
DividerSubtle separators between content.Warm Beige #D8B7A0
OutlineFocus rings and emphasis outlines.Warm Beige #D8B7A0

Palette Colors

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

Main (Brand) Colors

The main colors form a triadic harmony balancing an energetic burnt orange, a strong deep brown, and a warm terra cotta for high recognition and complementary vibrancy.

PrimaryBurnt Orange

RolesLogo, Btn Primary Bg, Btn Outlined Border

Burnt Orange adds energy and passion, creating a dynamic and attention-grabbing focal point.

HEX#D94F2F
RGB217, 79, 47
HSL11, 69, 52
CMYK0, 64, 78, 15
SecondaryDeep Brown

Deep Brown brings depth and sophistication, grounding the palette and ensuring readability.

HEX#3F1B17
RGB63, 27, 23
HSL6, 47, 17
CMYK0, 57, 63, 75
TertiaryTerra Cotta

RolesLink, Btn Secondary Bg, Headline

Terra Cotta complements with warmth and approachability, softening the intensity of the Burnt Orange.

HEX#E05A32
RGB224, 90, 50
HSL14, 74, 54
CMYK0, 60, 78, 12

Support Colors

The support colors extend the main palette with subtle warm beige and dusty blush that provide gentle contrasts and accents without overpowering the primary hues.

Warm Beige

RolesIcon, Border, Divider, Outline

Warm Beige creates a soft and inviting frame around key elements, balancing the stronger main colors.

HEX#D8B7A0
RGB216, 183, 160
HSL25, 42, 74
CMYK0, 15, 26, 15
Dusty Blush

RolesBtn Outlined Text

Dusty Blush offers a muted, softer contrast that harmonizes well with the terra cotta and burnt orange.

HEX#C08174
RGB192, 129, 116
HSL10, 38, 60
CMYK0, 33, 40, 25

Neutral Colors

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

Pure White

RolesBg Light, Btn Primary Text

HEX#FFFFFF
RGB255, 255, 255
HSL0, 0, 100
CMYK0, 0, 0, 0
Near White

RolesBg Dark

HEX#F7EDE6
RGB247, 237, 230
HSL25, 52, 94
CMYK0, 4, 7, 3
Very Dark Brown

RolesText, Btn Secondary Text

HEX#2A1E1B
RGB42, 30, 27
HSL12, 22, 14
CMYK0, 29, 36, 84

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: #D94F2F;
  --color-deep-brown: #3F1B17;
  --color-terra-cotta: #E05A32;
  --color-warm-beige: #D8B7A0;
  --color-dusty-blush: #C08174;
  --color-pure-white: #FFFFFF;
  --color-near-white: #F7EDE6;
  --color-very-dark-brown: #2A1E1B;
}

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: #D94F2F;
  --role-btn-primary-bg: #D94F2F;
  --role-btn-outlined-border: #D94F2F;
  --role-link: #E05A32;
  --role-btn-secondary-bg: #E05A32;
  --role-headline: #E05A32;
  --role-icon: #D8B7A0;
  --role-border: #D8B7A0;
  --role-divider: #D8B7A0;
  --role-outline: #D8B7A0;
  --role-btn-outlined-text: #C08174;
  --role-bg-light: #FFFFFF;
  --role-btn-primary-text: #FFFFFF;
  --role-bg-dark: #F7EDE6;
  --role-text: #2A1E1B;
  --role-btn-secondary-text: #2A1E1B;
}

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": "#D94F2F",
    "deep-brown": "#3F1B17",
    "terra-cotta": "#E05A32",
    "warm-beige": "#D8B7A0",
    "dusty-blush": "#C08174",
    "pure-white": "#FFFFFF",
    "near-white": "#F7EDE6",
    "very-dark-brown": "#2A1E1B"
}
Press Space to load new palette