#CC5500

Burnt Orange color code

Burnt Orange hex code: #CC5500 · RGB 204, 85, 0. Also called dark orange, Texas orange (similar).

Build a website palette from burnt orange →

What color is burnt orange?

Burnt orange is a deep, brownish orange, as if orange had been scorched. The common reference value is #CC5500. It's darker and less neon than CSS darkorange, which gives it a warm, autumnal, slightly retro feel.

Burnt orange is a fall favorite and a 1970s revival color: it shows up in autumn campaigns, coffee and craft beer, outdoor brands, college sports and retro design.

White text passes AA for large text on #CC5500 but falls just short for small text (about 4.3:1); deep burnt orange (#A84300) passes comfortably. Pair burnt orange with navy or teal for contrast, or cream, mustard and brown for a warm 70s palette.

Burnt Orange variants

Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.

Burnt orange (reference value)#CC5500rgb(204, 85, 0) · reference

Deep burnt orange#A84300rgb(168, 67, 0) · HueWiz pick

Soft burnt orange#D9773Argb(217, 119, 58) · HueWiz pick

Burnt orange tint#F0B48Argb(240, 180, 138) · HueWiz pick

Burnt Orange on a real website

The same base color in a light and a dark theme. Surfaces and text are tinted with burnt orange's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.

light theme

StudioWorkAboutContact

Spring collection

Designed around burnt orange.

A short paragraph shows how body text reads on this surface, with an inline link in the brand color.

Get startedLearn more

NewCard on surface with an accent badge.

Light roles · surface #FFF4F0 · text #2F190E · link #BE4F00

dark theme

StudioWorkAboutContact

Spring collection

Designed around burnt orange.

A short paragraph shows how body text reads on this surface, with an inline link in the brand color.

Get startedLearn more

NewCard on surface with an accent badge.

Dark roles · surface #1F0F08 · text #F8ECE6 · link #D35B10

Burnt Orange color palettes

Hand-picked combinations that work with burnt orange. Hover a swatch to see its code; click to copy.

Burnt Orange contrast & accessibility

WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.

Pairing	Ratio	Normal text	Large text
White text on burnt orange	`4.31:1`	Fail	AA
Black text on burnt orange	`4.86:1`	AA	AAA
Burnt Orange text on white	`4.31:1`	Fail	AA
Burnt Orange text on near-black #111111	`4.37:1`	Fail	AA
White text on deeper burnt orange #C75300	`4.50:1`	AA	AAA

Burnt Orange shades for Tailwind & design systems

An 11-step 50–950 ramp generated in OKLCH from #CC5500. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.

Tailwind CSS v4

@import "tailwindcss";

@theme {
  --color-burnt-orange-50: #FFF4F0;
  --color-burnt-orange-100: #FFE7DD;
  --color-burnt-orange-200: #FFCFB9;
  --color-burnt-orange-300: #FFAB85;
  --color-burnt-orange-400: #EE8756;
  --color-burnt-orange-500: #D76527;
  --color-burnt-orange-600: #B54B00;
  --color-burnt-orange-700: #923B00;
  --color-burnt-orange-800: #712B00;
  --color-burnt-orange-900: #511D00;
  --color-burnt-orange-950: #330F00;
  --color-burnt-orange: #CC5500;
}

CSS variables

:root {
  --burnt-orange: #CC5500;
  --burnt-orange-rgb: 204 85 0;
  --burnt-orange-light: #FFE7DD;
  --burnt-orange-dark: #712B00;
}

.btn-burnt-orange {
  background: #C75300;
  color: #000000;
}

Need semantic roles (surface, text, primary, accent) and exports? Open burnt orange in the Tailwind color generator.

Burnt Orange FAQ

What is the hex code for burnt orange?

#CC5500 is the value HueWiz uses for burnt orange; it equals rgb(204, 85, 0). Other common versions include #A84300 (deep burnt orange), #D9773A (soft burnt orange), #F0B48A (burnt orange tint).

Is burnt orange a warm or cool color?

With an HSL hue of 25° and 100% saturation, burnt orange reads as a warm orange.

What text color looks best on burnt orange?

Use dark text. White on #CC5500 measures 4.31:1 and black measures 4.86:1; WCAG AA needs 4.5:1 for normal text. For white text, deepen it to about #C75300.

What colors go with burnt orange?

Try retro 70s (#CC5500, #E1AD01, #6B4226); orange & navy (#CC5500, #1D3557, #F7F4EF); autumn (#A84300, #D9773A, #708238). Each palette above can be copied or opened in the HueWiz studio.