Heat Wave

#ff7a00

Brighter heat-orange for high-contrast UI accents

Save
Share

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 , so it won't sink into that grounded, food-rooted depth. Compared with , 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.

Gradient preview

See how this color looks in an animated mesh gradient.

Conversions

Click any value to copy.

Need this programmatically? Color API

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

Aa
2.61:1Fail

On Gray 100 #f5f5f5

Aa
2.40:1Fail

On Gray 900 #18181b

Aa
6.78:1AAAAA Large

On Black #000000

Aa
8.04:1AAA

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

Complementary
Analogous
Triadic
Split Complementary
Tetradic

Suggested palettes

Palettes built around this color.

4 colors
3 colors
4 colors
4 colors

Community palettes

Published palettes that include this color.

Similar colors

Create a gradient with Heat Wave

Open the generator with this color pre-loaded.

Start creating