Burnt Orange
A saturated and high-energy burnt orange
Burnt Orange is a saturated, high-energy tone that demands attention. Because it is so intense, it functions best as a 10% accent color rather than a dominant background. Pair it with dark slate or charcoal grays to ground its warmth. The hex code for this color is #cc5500, which offers enough contrast for legible black text in UI designs.
About Burnt Orange
Terracotta pot left too long on the stove
What does burnt orange mean?
It commonly calls to mind autumn, fire, clay, and spice, so designers often reach for it when warmth should lead. Its middling lightness keeps it grounded, while the strong saturation gives it a bold, burning glow that never tips into neon.
Where you see burnt orange
- terracotta pots
- rust on old iron
- pumpkins
- sweet potatoes
- paprika
- bonfire coals
What it works for
It works for fall packaging, food menus, sports branding, and accent text or buttons that need heat without turning red.
What colors go with burnt orange?
Teal #008080Its firey warmth pushes against teal's cool depth, and the tension makes both colors read stronger.Cream #fffdd0Cream cools nothing but blunts the burn, giving this orange room to glow without overwhelming a page.Olive Green #808000Olive's earthy murk tames the flame, a pairing that feels like a forest at sunset.Navy Blue #000080Navy sits near the opposite side of the wheel, a warm-cool clash that stays bold, not chaotic.Charcoal #36454fCharcoal builds a dark backdrop so this orange blazes like coals against a night wall.
Questions about Burnt Orange
What is the hex code for Burnt Orange?
Burnt Orange is #cc5500. In RGB that is rgb(204, 85, 0), in HSL hsl(25, 100%, 40%) and in CMYK 0%, 58%, 100%, 20%.
How can I effectively use #cc5500 in UI designs?
Since #cc5500 is a high-energy, saturated tone, use it sparingly as a 10 percent accent color to draw attention to call-to-action buttons or highlights. It provides enough contrast to remain readable when paired with black or dark text, but it will quickly overwhelm a layout if used as a primary background.
Is Burnt Orange readable on white or black?
Burnt Orange has a 4.31:1 contrast ratio on white and 4.86:1 on black. WCAG asks for 4.5:1 for body text and 3:1 for large text, so on white it works only for large text (24px, or 18.5px bold) and on black it works for body text. Try other pairs in the contrast checker.