What are the hex codes in the Scarlet Burnt Orange & Cedar palette?

The Scarlet Burnt Orange & Cedar color palette consists of Espresso #441800, Cedar #994617, Burnt Orange #C4602E, Bone #E1DBC3.

How should I use the Scarlet Burnt Orange & Cedar palette on a website?

Use Bone #E1DBC3 as the background, Espresso #441800 for text, Cedar #994617 for buttons and links, and Burnt Orange #C4602E for accents. 2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Bone at 10.99:1.

Which colors in Scarlet Burnt Orange & Cedar have enough contrast for text?

The highest-contrast pair is #441800 on #E1DBC3 with a ratio of 10.99:1, which passes WCAG AA for normal text.

#441800Espresso

#994617Cedar

#C4602EBurnt Orange

#E1DBC3Bone

Scarlet Burnt Orange & Cedar color palette

Luxury Dark Warm Brown Orange Beige

Color codes click any value to copy

Name	HEX	RGB	HSL	OKLCH
Espresso	`#441800`	`rgb(68, 24, 0)`	`hsl(21, 100%, 13%)`	`oklch(27.3% 0.076 46)`
Cedar	`#994617`	`rgb(153, 70, 23)`	`hsl(22, 74%, 35%)`	`oklch(49.4% 0.125 46)`
Burnt Orange	`#C4602E`	`rgb(196, 96, 46)`	`hsl(20, 62%, 47%)`	`oklch(60.1% 0.143 45)`
Bone	`#E1DBC3`	`rgb(225, 219, 195)`	`hsl(48, 33%, 82%)`	`oklch(89.0% 0.033 95)`

Why it works and how to use it

Scarlet Burnt Orange & Cedar is a vivid analogous color palette tagged luxury, dark, warm. Analogous neighbors on the wheel (Espresso, Cedar, Burnt Orange) give it a natural, low-tension flow. Saturation runs high, so use the brightest color sparingly and let the others carry the surface area. The overall temperature is warm.

With 4 chromatic colors, Cedar takes the lead while the rest support. Lightness runs from 13% to 82%. Well suited to premium branding and packaging.

Background: Bone (#E1DBC3) is the lightest color, so it belongs on large surfaces.
Text: Espresso (#441800) on #E1DBC3 gives 10.99:1, passing WCAG AAA.
Primary: Cedar (#994617) is the most saturated mid-tone; use it for buttons and links (4.66:1 against the background, fine for UI elements).
Accent: Burnt Orange (#C4602E) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Espresso on Bone at 10.99:1.

Preview on a real UI see how the palette feels in context

BrandFeaturesPricingBlogGet started

Design faster with Scarlet Burnt Orange & Cedar

A palette preview that turns four colors into a page, so you can judge hierarchy, contrast and mood before you commit.

Primary action Secondary

Card title

Roles are assigned by lightness.

Color blindness simulation

#441800

#994617

#C4602E

#E1DBC3

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Palette card

Contrast check WCAG ratios between palette colors

Pair	Sample	Ratio	Level
`#441800` on `#E1DBC3`	Aa	10.99:1	AAA
`#994617` on `#E1DBC3`	Aa	4.66:1	AA
`#441800` on `#C4602E`	Aa	3.68:1	AA large only
`#C4602E` on `#E1DBC3`	Aa	2.99:1	Fail
`#441800` on `#994617`	Aa	2.36:1	Fail
`#994617` on `#C4602E`	Aa	1.56:1	Fail

:root {
  --espresso: #441800;
  --cedar: #994617;
  --burnt-orange: #C4602E;
  --bone: #E1DBC3;
}

$espresso: #441800;
$cedar: #994617;
$burnt-orange: #C4602E;
$bone: #E1DBC3;

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      colors: {
        'espresso': '#441800',
        'cedar': '#994617',
        'burnt-orange': '#C4602E',
        'bone': '#E1DBC3',
      },
    },
  },
};

{
  "name": "Scarlet Burnt Orange & Cedar",
  "colors": [
    "#441800",
    "#994617",
    "#C4602E",
    "#E1DBC3"
  ]
}

background: linear-gradient(135deg, #441800, #994617, #C4602E, #E1DBC3);

Or ask about it in ChatGPT Claude Perplexity

Edit this palette in the generator →

Added 2025-09-07 · Free for commercial use, no attribution needed.

Similar palettes 24 more in this mood