#ed20ed

#f565f1

#fb90f6

#feb7f9

Love



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



HDR gradient

Switch to HDR to enhance the gradient



Quick view

Inspect colors in multiple color spaces

Colors overview

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ed20ed	rgb(237, 32, 237)	hsl(300 85% 53%)	hwb(300 13% 7.1%)	lch(57.1 102 327)	lab(57.1 85.6 -55.6)	cmyk 0%, 86%, 0%, 7%
	#f565f1	rgb(245, 101, 241)	hsl(300 88% 68%)	hwb(300 40% 3.9%)	lch(65.7 81.4 327)	lab(65.7 68.3 -44.1)	cmyk 0%, 59%, 2%, 4%
	#fb90f6	rgb(251, 144, 246)	hsl(300 93% 77%)	hwb(300 56% 1.6%)	lch(74.2 61.7 327)	lab(74.2 51.8 -33.7)	cmyk 0%, 43%, 2%, 2%
	#feb7f9	rgb(254, 183, 249)	hsl(300 97% 86%)	hwb(300 72% 0.39%)	lch(82.8 40.7 327)	lab(82.8 34.1 -22.2)	cmyk 0%, 28%, 2%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#ed20ed

AA - 3.48



#f565f1

AA - 2.62



#fb90f6

AA - 2.01



#feb7f9

AA - 1.57



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(67.1% 0.251 -0.155), oklab(73.6% 0.202 -0.122), oklab(80% 0.153 -0.093), oklab(86.6% 0.101 -0.061))

Fallback colors



--angle: 45deg; 
background: linear-gradient(var(--angle), #ed20ed, #f565f1, #fb90f6, #feb7f9)

Colors



<!-- Primary Colors -->
<color name="love_color_10">#ed20ed</color>
<color name="love_color_20">#f565f1</color>
<color name="love_color_30">#fb90f6</color>
<color name="love_color_40">#feb7f9</color>

Gradient PRO

Pro feature only

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

PWA prompt