#ff6e40

#ff442b

#d12810

#ab3422

Fire Breath

Actions

Explore the gradient in different formats, and actions.

Colors overview

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ff6e40	rgb(255, 110, 64)	hsl(14 100% 63%)	hwb(14 25% 0%)	lch(64.8 76.2 44.3)	lab(64.8 54.5 53.2)	cmyk 0%, 57%, 75%, 0%
	#ff442b	rgb(255, 68, 43)	hsl(7.1 100% 58%)	hwb(7.1 17% 0%)	lch(58.5 90.6 39.5)	lab(58.5 69.9 57.6)	cmyk 0%, 73%, 83%, 0%
	#d12810	rgb(209, 40, 16)	hsl(7.5 86% 44%)	hwb(7.5 6.3% 18%)	lch(46.6 84.8 41.2)	lab(46.6 63.9 55.8)	cmyk 0%, 81%, 92%, 18%
	#ab3422	rgb(171, 52, 34)	hsl(7.9 67% 40%)	hwb(7.9 13% 33%)	lch(40.6 62.5 39)	lab(40.6 48.5 39.3)	cmyk 0%, 70%, 80%, 33%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#ff6e40

AA - 2.77



#ff442b

AA - 3.43



#d12810

AA - 5.22



#ab3422

AA - 6.46



Color blindness

The simulation of color blindness may not be 100% accurate sometimes.

Colors preview as gradient with protanopia

Colors preview as palette with protanopia

UI components preview

Preview the gradient in different UI components.



32°

CPU



48°

GPU



100%

Usage



11°

Rain



70%

Storage

HDR color space

HDR oklab colors



--angle: 45deg; 
background: linear-gradient(var(--angle), oklab(70.9% 0.148 0.115), oklab(66.1% 0.194 0.117), oklab(55.7% 0.176 0.107), oklab(50.1% 0.135 0.083))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #ff6e40, #ff442b, #d12810, #ab3422)

Colors



<!-- Primary Colors -->
<color name="fire_breath_color_10">#ff6e40</color>
<color name="fire_breath_color_20">#ff442b</color>
<color name="fire_breath_color_30">#d12810</color>
<color name="fire_breath_color_40">#ab3422</color>

Gradient PRO

Pro feature only

Get access to all app tokens, export files, and more.

PWA prompt