#FFFF00

#FF8000

#FF0080

#FF00FF

Heatmap

Actions

Explore the gradient in different formats, and actions.

Colors overview

Red

Yellow

Orange

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffff00	rgb(255, 255, 0)	hsl(60 100% 50%)	hwb(60 0% 0%)	lch(97.6 94.7 99.6)	lab(97.6 -15.7 93.4)	cmyk 0%, 0%, 100%, 0%
	#ff8000	rgb(255, 128, 0)	hsl(30 100% 50%)	hwb(30 0% 0%)	lch(67.8 87.6 58.7)	lab(67.8 45.5 74.8)	cmyk 0%, 50%, 100%, 0%
	#ff0080	rgb(255, 0, 128)	hsl(330 100% 50%)	hwb(330 0% 0%)	lch(55.6 84 3.99)	lab(55.6 83.8 5.84)	cmyk 0%, 100%, 50%, 0%
	#ff00ff	rgb(255, 0, 255)	hsl(300 100% 50%)	hwb(300 0% 0%)	lch(60.2 111 327)	lab(60.2 93.5 -60.5)	cmyk 0%, 100%, 0%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#FFFF00

AA - 1.07



#FF8000

AA - 2.51



#FF0080

AA - 3.77



#FF00FF

AA - 3.13



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(96.8% -0.071 0.199), oklab(73.2% 0.112 0.148), oklab(64.5% 0.26 0.011), oklab(70.2% 0.275 -0.169))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #FFFF00, #FF8000, #FF0080, #FF00FF)

Colors



<!-- Primary Colors -->
<color name="heatmap_color_10">#FFFF00</color>
<color name="heatmap_color_20">#FF8000</color>
<color name="heatmap_color_30">#FF0080</color>
<color name="heatmap_color_40">#FF00FF</color>

Gradient PRO

Pro feature only

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

PWA prompt