Burnt Orange color guide
HEX
#CC5500
RGB
204, 85, 0
HSL
25°, 100%, 40%
HSV
25°, 100%, 80%
Burnt orange (#CC5500) is a deep, warm orange that feels more mature and earthy than pure orange. It works as a primary or accent color for creative, outdoor, and heritage brands.
Best for
Legal and institutional branding across web and print.
Compare with
Accessibility
Check contrast before using burnt orange for text-heavy layouts, especially on low-contrast backgrounds.
How does burnt orange compare to nearby colors?
What is the difference between burnt orange and brown?
Burnt Orange (#CC5500) and Brown (#964B00) may look neighboring at first glance, yet their surface character diverges once they sit next to whites, charcoals, and other real layout neutrals. Burnt Orange shifts the system toward paper, tint, and background behavior more than Brown does. Choose burnt orange when the surrounding system aligns better with food, promotion, and social-first graphics, and move to brown when the stronger contextual fit is hospitality, food, and grounded heritage brands.
What color is burnt orange?
Burnt orange is the official color of the University of Texas at Austin and is strongly associated with autumn, harvest festivals, and 1970s retro design. It has experienced a resurgence in modern fashion and interior design as part of the earthy-tones trend.
What is the hex code for burnt orange?
| Format | Value |
|---|---|
| HEX | #CC5500 |
| RGB | rgb(204, 85, 0) |
| HSL | hsl(25°, 100%, 40%) |
| HSV / HSB | hsv(25°, 100%, 80%) |
| CMYK (approx.) | cmyk(0%, 58%, 100%, 20%) |
Convert Burnt Orange to other color formats
Open the color converter with Burnt Orange (#CC5500) prefilled to copy RGB, HSL, HSV, CMYK, or OKLCH values.
Convert Burnt Orange in the color converter →What does burnt orange mean in design?
Burnt orange conveys creativity, warmth, and retro authenticity. It is more sophisticated than pure orange — less playful, more grounded. In design, it works for brands that want orange's energy without its corporate-tech associations.
How do I use burnt orange in code?
| CSS (hex) | color: #CC5500; |
| CSS (rgb) | color: rgb(204, 85, 0); |
| CSS (hsl) | color: hsl(25, 100%, 40%); |
| RGB % | rgb(80%, 33%, 0%) |
| Tailwind | text-[#CC5500] |
| SwiftUI | Color(red: 0.800, green: 0.333, blue: 0.000) |
| UIKit | UIColor(red: 0.800, green: 0.333, blue: 0.000, alpha: 1.0) |
| Android | Color.rgb(204, 85, 0) |
| Compose | Color(0xFFCC5500) |
| Web Safe | #CC6600 |
Is burnt orange accessible?
| Combination | Ratio | AA | AA lg | AAA | AAA lg | UI |
|---|---|---|---|---|---|---|
| AaWhite text on this color | 4.31:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| AaBlack text on this color | 4.87:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
| AaThis color as text on white | 4.31:1 | ✗ | ✓ | ✗ | ✗ | ✓ |
| AaThis color as text on black | 4.87:1 | ✓ | ✓ | ✗ | ✓ | ✓ |
WCAG 2.1: AA normal ≥ 4.5:1, AA large text ≥ 3:1, AAA normal ≥ 7:1, AAA large ≥ 4.5:1, UI components ≥ 3:1.
How does burnt orange look with color blindness?
Simulated appearance for common types of color vision deficiency. Actual perception varies by individual.
What colors go with burnt orange
Because burnt orange already carries warmth, navy blue gives the pair a steadier backbone and keeps it closer to packaging and campaign work than to one-note seasonal color.
With a vivid burnt orange, cream is gentler than white, so the palette keeps warmth and avoids looking overlit.
Forest Green brings a different temperature cue than burnt orange, which helps the palette feel more layered and less one-note.
What colors clash with burnt orange
Neon Green changes the meaning of burnt orange too abruptly, replacing the source color's food, promotion, and social-first graphics cues with something much louder and less stable.
Magenta remaps burnt orange too aggressively, dragging it away from food, promotion, and social-first graphics and into a brighter, more performative palette.
How should I use burnt orange in design?
- •Burnt orange is a strong primary color for autumn campaigns, food brands, and outdoor lifestyle marketing.
- •Pair burnt orange with navy and cream for a classic, warm professional palette.
- •Use burnt orange for headlines and accent elements rather than backgrounds — it has enough intensity to command attention.
What are good burnt orange palettes?
Quiet contrast
Nonprofit campaigns, fundraising pages, and grant materials.
Design with burnt orange in Moda
Create a presentation or document using burnt orange as your accent color. Moda's AI applies your color palette automatically.
Create a design with burnt orange →What are the shades and tints of burnt orange?
Shades (darker)
Tints (lighter)
Tones (desaturated)
Hue variations
What are the color harmonies for burnt orange?
Harmonies are calculated from the base swatch. When a harmony matches a named color page, it links there; otherwise it appears here as a computed reference swatch.
Similar colors
Persimmon
Persimmon stays very close to burnt orange in hue, but it lands lighter, which makes it better for backgrounds, tints, and softer supporting areas than for accents, stronger hierarchy, and firmer structure.
Mahogany
Mahogany sits close to burnt orange in hue, but its orange-warm cast changes the mood of the palette even when the contrast shift is small.
Rust
Rust sits close to burnt orange on the wheel, but it carries less chroma, which makes it better for steadier surfaces and calmer long-form use than for sharper emphasis and quicker visual pickup.
Pumpkin
Pumpkin is close enough to burnt orange to keep the palette cohesive, yet the lighter-darker shift still decides whether the family behaves more like atmosphere or more like structure.
Brown
Brown stays very close to burnt orange in hue, but it lands darker, which makes it better for headlines, anchors, and darker sections than for lighter surfaces and more open applications.
Frequently asked questions
What is the hex code for burnt orange?
The hex code for burnt orange is #CC5500. In RGB, that's 204 red, 85 green, and 0 blue. The approximate CMYK equivalent is 0% cyan, 58% magenta, 100% yellow, and 20% key (black).
Is burnt orange a warm or cool color?
Burnt Orange reads as warm. It feels most natural with creams, golds, rusts, and other warm accents, while cooler partners like navy or teal create sharper contrast.
Is burnt orange better as an accent or a full-palette color?
Burnt Orange is usually best when it leads in short bursts rather than covering everything. It can headline a palette, but most layouts work better when the color handles accents, highlights, or one main hero role instead of every surface.
How should I use burnt orange in a design?
Burnt Orange is vivid enough to work best in controlled doses such as CTAs, highlighted metrics, chart accents, or a single hero element. Surround it with quieter neutrals so it does not exhaust the layout.
Can I use burnt orange for text or backgrounds?
Burnt Orange works better with dark text than white text. Black text reaches 4.87:1 contrast on the swatch, which makes the color more usable as a background or highlight surface than as a dark panel.
More orange colors
Keep exploring color resources
All color pages
Browse the full library of color references, pairings, and palettes.
Orange colors
Compare burnt orange with other orange tones.
Brown colors
Explore nearby color families to build stronger palettes and contrasts.
Neutral colors
Explore nearby color families to build stronger palettes and contrasts.
Red colors
Explore nearby color families to build stronger palettes and contrasts.
Last updated April 6, 2026
Color values are computed from the listed hex code using standard conversion formulas. RGB, HSL, and HSV are exact screen-ready conversions. CMYK is an approximate on-screen reference, not a press-ready print specification. Pairings, palettes, and use-case guidance are heuristic recommendations derived from color relationships, contrast behavior, and common presentation, document, and UI patterns.