Heat Wave
#ff7a00
Brighter heat-orange for high-contrast UI accents
About Heat Wave
Heat Wave reads like that first bright flare you see off a roadside sign at dusk. It's noticeably lighter and less heavy than Butternut Squash, so it won't sink into that grounded, food-rooted depth. Compared with Arancio, the undertone feels more energetic and less terracotta-clay, with fewer "red bleed" cues. And vs Habañero, it comes off slightly calmer in intensity, more sunburnt warmth than spicy forwardness.
I use it when I want a high-visibility highlight that still feels friendly in interface surfaces: e-commerce category headers, seasonal promos in retail, and product hero CTAs for food and travel brands. It's great for states where you need urgency without the darker punch of deeper oranges, especially filled buttons and active chips. Think the one you reach for when you want heat to read clearly on-screen without tipping into that "too hot" feel Habañero can get on very light backgrounds.
Pair it with warm creams or soft charcoals, and watch contrast with thin UI text. If you're layering over busy imagery, it holds up better when you keep the surrounding neutrals clean.
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.