Fire Bolt
#cc4411
Hot orange-red with higher contrast than terracotta
About Fire Bolt
Fire Bolt feels like a fresh spark on a dark surface, more punchy and immediate than the clay-leaning Fox, but without the blushy, meatier softness of Bloody Salmon. It sits brighter and more saturated than Dark Orange, so it reads as a true flame-orange instead of a deep terracotta mood. I use it when I want orange to land as urgency, not warmth that's been simmering.
It's the one you reach for in live status badges, shipping and incident dashboards, and operations UIs where attention needs to jump fast without turning brick-brown. I've had good luck with it on CTA highlights in fintech and logistics portals, and on progress bars when you need a clean, confident signal that still looks intentional next to neutrals.
Quirk: Fire Bolt can look slightly "cleaner" and more aggressive on cream backgrounds. If your layout already has warm accents, pair it with a cooler gray or near-white to keep it from feeling too hot.
Code snippets
Copy this color into your project.
Contrast checker
WCAG 2.1 contrast ratios. AA requires 4.5:1 for normal text, 3:1 for large. AAA requires 7:1 / 4.5:1.
On White #ffffff
On Gray 100 #f5f5f5
On Gray 900 #18181b
On Black #000000
Variations
Shades
Darker variations, created by mixing toward black.
Tints
Lighter variations, created by mixing toward white.
Tones
Muted variations, created by reducing saturation.
Hues
Hue rotations around the color wheel.
Temperatures
Warm and cool shifts of this color.
Color harmonies
Suggested palettes
Palettes built around this color.
Community palettes
Published palettes that include this color.