Burnt Orange color guide

#CC5500
HEX
#CC5500
RGB
rgb(204, 85, 0)
HSL
hsl(25, 100%, 40%)
CMYK
cmyk(0%, 58%, 100%, 20%)

Orange with the brightness pulled down into something earthy. It has become the default warm accent for editorial design.

Best for
Warm accents in muted, grown-up palettes.

Accessibility

Burnt Orange text on whiteAA Large
Sample4.31:1
White text on burnt orangeAA Large
Sample4.31:1
Burnt Orange text on blackAA
Sample4.87:1
Black text on burnt orangeAA
Sample4.87:1

Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.

Colors that go with burnt orange

Combinations that hold up in a real layout rather than only on the colour wheel.

Burnt Orange color harmonies

Complementary
The opposite hue — highest contrast, best used sparingly.
#CC5500 #0077CC
Analogous
Neighbouring hues that sit together calmly.
#CC0011 #CC5500 #CCBB00
Triadic
Three evenly spaced hues — vivid but balanced.
#CC5500 #00CC55 #5500CC
Split complementary
Softer than complementary, with the same tension.
#CC5500 #00CCBB #0011CC

Burnt Orange shades and tints

The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.

#FFF0E5#FFD2B3#FFB580#FF974D#FF791A#E66000#B34A00#803500#4D2000#291100

Burnt Orange FAQ

What is the hex code for burnt orange?

Burnt Orange is #CC5500. In other formats that is rgb(204, 85, 0), hsl(25, 100%, 40%), and approximately cmyk(0%, 58%, 100%, 20%) for print.

What colors go with burnt orange?

Cream, Teal, Charcoal all pair well with burnt orange. Warm accents in muted, grown-up palettes.

Is burnt orange accessible for text?

Not on white: burnt orange reaches only 4.31:1 there, below the 4.5:1 WCAG AA threshold. Use it as a background with black text on top, or reserve it for large display type.

Should text on burnt orange be black or white?

Use black text. It gives the higher contrast ratio of the two against #CC5500.

More orange colors