#530200

#730000

#930000

#B30000

Passion

Actions

Explore the gradient in different formats, and actions.

Colors overview

Red

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#530200	rgb(83, 2, 0)	hsl(1.4 100% 16%)	hwb(1.4 0% 67%)	lch(15.3 42.5 34.4)	lab(15.3 35.1 24)	cmyk 0%, 98%, 100%, 67%
	#730000	rgb(115, 0, 0)	hsl(0 100% 23%)	hwb(0 0% 55%)	lch(23 57.1 38.1)	lab(23 44.9 35.2)	cmyk 0%, 100%, 100%, 55%
	#930000	rgb(147, 0, 0)	hsl(0 100% 29%)	hwb(0 0% 42%)	lch(30.6 70.1 40.1)	lab(30.6 53.6 45.1)	cmyk 0%, 100%, 100%, 42%
	#b30000	rgb(179, 0, 0)	hsl(0 100% 35%)	hwb(0 0% 30%)	lch(37.9 81.9 40.8)	lab(37.9 62 53.5)	cmyk 0%, 100%, 100%, 30%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#530200

AAA - 15.25



#730000

AAA - 12.14



#930000

AAA - 9.37



#B30000

AAA - 7.19



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(27.9% 0.097 0.056), oklab(34.9% 0.125 0.07), oklab(41.6% 0.149 0.083), oklab(48.1% 0.172 0.096))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #530200, #730000, #930000, #B30000)

Colors



<!-- Primary Colors -->
<color name="passion_color_10">#530200</color>
<color name="passion_color_20">#730000</color>
<color name="passion_color_30">#930000</color>
<color name="passion_color_40">#B30000</color>

Gradient PRO

Pro feature only

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

PWA prompt