#c20ea1

#dd2d7f

#ee4c5e

#f46d41

Heat

Actions

Explore the gradient in different formats, and actions.

Colors overview

Pink

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#c20ea1	rgb(194, 14, 161)	hsl(310 87% 41%)	hwb(310 5.5% 24%)	lch(44.9 78.3 336)	lab(44.9 71.6 -31.5)	cmyk 0%, 93%, 17%, 24%
	#dd2d7f	rgb(221, 45, 127)	hsl(330 72% 52%)	hwb(330 18% 13%)	lch(51 69.9 359)	lab(51 69.9 -1.27)	cmyk 0%, 80%, 43%, 13%
	#ee4c5e	rgb(238, 76, 94)	hsl(350 83% 62%)	hwb(350 30% 6.7%)	lch(57 69.1 23.2)	lab(57 63.5 27.2)	cmyk 0%, 68%, 61%, 7%
	#f46d41	rgb(244, 109, 65)	hsl(15 89% 61%)	hwb(15 25% 4.3%)	lch(62.9 71.6 44.5)	lab(62.9 51.1 50.1)	cmyk 0%, 55%, 73%, 4%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#c20ea1

AA - 5.42



#dd2d7f

AA - 4.41



#ee4c5e

AA - 3.6



#f46d41

AA - 2.95



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(55.6% 0.221 -0.088), oklab(60.1% 0.217 -0.006), oklab(64.7% 0.187 0.062), oklab(69.2% 0.139 0.109))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #c20ea1, #dd2d7f, #ee4c5e, #f46d41)

Colors



<!-- Primary Colors -->
<color name="heat_color_10">#c20ea1</color>
<color name="heat_color_20">#dd2d7f</color>
<color name="heat_color_30">#ee4c5e</color>
<color name="heat_color_40">#f46d41</color>

Gradient PRO

Pro feature only

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

PWA prompt