Hot

Actions

Explore the gradient in different formats, and actions.

Orange

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK	Color schemes
	#ad217e	rgb(173, 33, 126)	hsl(320 68% 40%)	hwb(320 13% 32%)	lch(40.7 62.7 344)	lab(40.7 60.3 -17.2)	cmyk 0%, 81%, 27%, 32%
	#e05b19	rgb(224, 91, 25)	hsl(20 80% 49%)	hwb(20 9.8% 12%)	lch(56.2 78.8 49.8)	lab(56.2 50.9 60.2)	cmyk 0%, 59%, 89%, 12%

 Click a color format to copy to your clipboard.

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

#ad217e

AA - 6.37



#e05b19

AA - 3.69



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

Colors preview as gradient with protanopia

Colors preview as palette with protanopia

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(51.2% 0.188 -0.048), oklab(63.5% 0.134 0.121))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #ad217e, #e05b19)

Colors



<!-- Primary Colors -->
<color name="hot_color_10">#ad217e</color>
<color name="hot_color_20">#e05b19</color>

Gradient PRO

Pro feature only

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

PWA prompt