Fire Color Gradient

 #ee4611

 #c33a0e

 #992d0b

 #6e2108

Colors overview

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ee4611	rgb(238, 70, 17)	hsl(14 87% 50%)	hwb(14 6.7% 6.7%)	lch(55.5 90.1 45)	lab(55.5 63.7 63.7)	cmyk 0%, 71%, 93%, 7%
	#c33a0e	rgb(195, 58, 14)	hsl(15 87% 41%)	hwb(15 5.5% 24%)	lch(45.9 76.6 45.2)	lab(45.9 54 54.3)	cmyk 0%, 70%, 93%, 24%
	#992d0b	rgb(153, 45, 11)	hsl(14 87% 32%)	hwb(14 4.3% 40%)	lch(36 63.1 45)	lab(36 44.6 44.6)	cmyk 0%, 71%, 93%, 40%
	#6e2108	rgb(110, 33, 8)	hsl(15 86% 23%)	hwb(15 3.1% 57%)	lch(25.5 47.8 44.9)	lab(25.5 33.8 33.8)	cmyk 0%, 70%, 93%, 57%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#ee4611

AA - 3.8



#c33a0e

AA - 5.34



#992d0b

AAA - 7.67



#6e2108

AAA - 11.14



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(63.3% 0.172 0.123), oklab(54.7% 0.146 0.106), oklab(45.9% 0.121 0.088), oklab(36.6% 0.091 0.068))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #ee4611, #c33a0e, #992d0b, #6e2108)

Colors



<!-- Primary Colors -->
<color name="fire_color_10">#ee4611</color>
<color name="fire_color_20">#c33a0e</color>
<color name="fire_color_30">#992d0b</color>
<color name="fire_color_40">#6e2108</color>

Gradient PRO

Pro feature only

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

PWA prompt