Cupid

#9e93ed

#cbc4ff

#f48fff

#c7069a

#4d0636

Actions

Explore the palette in different formats, and actions.

Colors overview

Pink

Purple

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#9e93ed	rgb(158, 147, 237)	hsl(250 71% 75%)	oklab(71% 0.04 -0.12)	oklch(71% 0.13 290)	color(display-p3 0.61 0.58 0.91)
	#cbc4ff	rgb(203, 196, 255)	hsl(250 100% 88%)	oklab(85% 0.03 -0.08)	oklch(85% 0.08 290)	color(display-p3 0.79 0.77 0.98)
	#f48fff	rgb(244, 143, 255)	hsl(290 100% 78%)	oklab(79% 0.15 -0.11)	oklch(79% 0.18 320)	color(display-p3 0.9 0.58 0.98)
	#c7069a	rgb(199, 6, 154)	hsl(310 94% 40%)	oklab(56% 0.23 -0.07)	oklch(56% 0.24 340)	color(display-p3 0.72 0.15 0.59)
	#4d0636	rgb(77, 6, 54)	hsl(320 86% 16%)	oklab(29% 0.11 -0.03)	oklch(29% 0.11 350)	color(display-p3 0.27 0.05 0.21)

 Click on a color value to copy it to your clipboard.

Contrast ratios checker

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

#9e93ed

AA - 2.67



#cbc4ff

AA - 1.63



#f48fff

AA - 2.05



#c7069a

AA - 5.35



#4d0636

AAA - 15.05



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.

HDR color space

HDR oklab colors



background: linear-gradient(45deg, oklab(70.9% 0.041 -0.123), oklab(84.6% 0.028 -0.077), oklab(79.5% 0.148 -0.11), oklab(55.9% 0.227 -0.074), oklab(28.5% 0.109 -0.028))

Fallback colors



background: linear-gradient(45deg, #9e93ed, #cbc4ff, #f48fff, #c7069a, #4d0636)

Colors



<!-- Primary Colors -->
<color name="cupid_color_10">#9e93ed</color>
<color name="cupid_color_20">#cbc4ff</color>
<color name="cupid_color_30">#f48fff</color>
<color name="cupid_color_40">#c7069a</color>
<color name="cupid_color_50">#4d0636</color>

PWA prompt