Love

Actions

Explore the gradient in different formats, and actions.

Colors overview

Red

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#54081e	rgb(84, 8, 30)	hsl(340 83% 18%)	hwb(340 3.1% 67%)	lch(16.6 35.7 14.9)	lab(16.6 34.5 9.21)	cmyk 0%, 90%, 64%, 67%
	#990945	rgb(153, 9, 69)	hsl(340 89% 32%)	hwb(340 3.5% 40%)	lch(33.2 56.3 7.98)	lab(33.2 55.8 7.82)	cmyk 0%, 94%, 55%, 40%
	#cc1e67	rgb(204, 30, 103)	hsl(330 74% 46%)	hwb(330 12% 20%)	lch(45.9 67.6 4.77)	lab(45.9 67.3 5.62)	cmyk 0%, 85%, 50%, 20%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#54081e

AAA - 14.68



#990945

AAA - 8.46



#cc1e67

AA - 5.31



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: 135deg; 
background: linear-gradient(var(--angle), oklab(29.2% 0.104 0.021), oklab(44.2% 0.172 0.017), oklab(55.6% 0.208 0.011))

Fallback colors



--angle: 135deg; 
background: linear-gradient(var(--angle), #54081e, #990945, #cc1e67)

Colors



<!-- Primary Colors -->
<color name="love_color_10">#54081e</color>
<color name="love_color_20">#990945</color>
<color name="love_color_30">#cc1e67</color>

Gradient PRO

Pro feature only

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

PWA prompt