Sugared

#e51081

#ff5c95

#ffd375

#ffecc2

#fff9eb

Actions

Explore the palette in different formats, and actions.

Colors overview

Pink

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#e51081	rgb(229, 16, 129)	hsl(330 87% 48%)	hwb(330 6.3% 10%)	lch(50.8 76.9 358)	lab(50.8 76.9 -2.45)	cmyk 0%, 93%, 44%, 10%
	#ff5c95	rgb(255, 92, 149)	hsl(340 100% 68%)	hwb(340 36% 0%)	lch(63.1 66.1 3.57)	lab(63.1 66 4.11)	cmyk 0%, 64%, 42%, 0%
	#ffd375	rgb(255, 211, 117)	hsl(41 100% 73%)	hwb(41 46% 0%)	lch(87 52.6 81.3)	lab(87 8 52)	cmyk 0%, 17%, 54%, 0%
	#ffecc2	rgb(255, 236, 194)	hsl(41 100% 88%)	hwb(41 76% 0%)	lch(94.2 23 85.1)	lab(94.2 1.98 22.9)	cmyk 0%, 7%, 24%, 0%
	#fff9eb	rgb(255, 249, 235)	hsl(42 100% 96%)	hwb(42 92% 0%)	lch(98.1 7.5 87.5)	lab(98.1 0.323 7.49)	cmyk 0%, 2%, 8%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#e51081

AA - 4.44



#ff5c95

AA - 2.9



#ffd375

AA - 1.41



#ffecc2

AA - 1.16



#fff9eb

AA - 1.04



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(60.3% 0.24 -0.009), oklab(70.4% 0.202 0.008), oklab(88.6% 0.011 0.122), oklab(94.8% 0.004 0.058), oklab(98.3% 0.001 0.019))

Fallback colors



background: linear-gradient(45deg, #e51081, #ff5c95, #ffd375, #ffecc2, #fff9eb)

Colors



<!-- Primary Colors -->
<color name="sugared_color_10">#e51081</color>
<color name="sugared_color_20">#ff5c95</color>
<color name="sugared_color_30">#ffd375</color>
<color name="sugared_color_40">#ffecc2</color>
<color name="sugared_color_50">#fff9eb</color>

PWA prompt