#ff4000

#ff5700

#ff6e00

#ff8500

Fire

Actions

Explore the gradient in different formats, and actions.

Colors overview

Orange

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ff4000	rgb(255, 64, 0)	hsl(15 100% 50%)	hwb(15 0% 0%)	lch(58 100 45)	lab(58 70.7 70.7)	cmyk 0%, 75%, 100%, 0%
	#ff5700	rgb(255, 87, 0)	hsl(20 100% 50%)	hwb(20 0% 0%)	lch(60.9 95.5 48.7)	lab(60.9 63 71.7)	cmyk 0%, 66%, 100%, 0%
	#ff6e00	rgb(255, 110, 0)	hsl(26 100% 50%)	hwb(26 0% 0%)	lch(64.5 90.8 53.8)	lab(64.5 53.6 73.2)	cmyk 0%, 57%, 100%, 0%
	#ff8500	rgb(255, 133, 0)	hsl(31 100% 50%)	hwb(31 0% 0%)	lch(68.8 86.8 60.2)	lab(68.8 43.1 75.3)	cmyk 0%, 48%, 100%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#ff4000

AA - 3.5



#ff5700

AA - 3.17



#ff6e00

AA - 2.8



#ff8500

AA - 2.43



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(65.6% 0.192 0.132), oklab(67.8% 0.167 0.137), oklab(70.6% 0.137 0.143), oklab(74% 0.105 0.15))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #ff4000, #ff5700, #ff6e00, #ff8500)

Colors



<!-- Primary Colors -->
<color name="fire_color_10">#ff4000</color>
<color name="fire_color_20">#ff5700</color>
<color name="fire_color_30">#ff6e00</color>
<color name="fire_color_40">#ff8500</color>

Gradient PRO

Pro feature only

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

PWA prompt