Cupcake Color Palette

#ffbfdd

#ffb3d0

#ff8ac4

#FF69B4

#f752aa

#ffbfdd

#ffb3d0

#ff8ac4

#FF69B4

#f752aa

Colors overview

Pink

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#ffbfdd	rgb(255, 191, 221)	hsl(330 100% 87%)	hwb(330 75% 0%)	lch(84 27.5 348)	lab(84 27 -5.58)	cmyk 0%, 25%, 13%, 0%
	#ffb3d0	rgb(255, 179, 208)	hsl(340 100% 85%)	hwb(340 70% 0%)	lch(81 31.6 355)	lab(81 31.4 -2.99)	cmyk 0%, 30%, 18%, 0%
	#ff8ac4	rgb(255, 138, 196)	hsl(330 100% 77%)	hwb(330 54% 0%)	lch(72.1 51 349)	lab(72.1 50.1 -9.39)	cmyk 0%, 46%, 23%, 0%
	#ff69b4	rgb(255, 105, 180)	hsl(330 100% 71%)	hwb(330 41% 0%)	lch(65.9 64 351)	lab(65.9 63.3 -9.64)	cmyk 0%, 59%, 29%, 0%
	#f752aa	rgb(247, 82, 170)	hsl(330 91% 65%)	hwb(330 32% 3.1%)	lch(60.9 69.8 351)	lab(60.9 68.9 -11.4)	cmyk 0%, 67%, 31%, 3%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#ffbfdd

AA - 1.52



#ffb3d0

AA - 1.66



#ff8ac4

AA - 2.16



#FF69B4

AA - 2.64



#f752aa

AA - 3.11



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 space

HDR oklab colors New



background: linear-gradient(45deg, oklab(87.1% 0.081 -0.015), oklab(84.6% 0.095 -0.009), oklab(77.7% 0.153 -0.026), oklab(72.8% 0.195 -0.027), oklab(68.8% 0.214 -0.032))

Fallback colors New



background: linear-gradient(45deg, #ffbfdd, #ffb3d0, #ff8ac4, #FF69B4, #f752aa)

Colors



<resources>
    <color name="cupcake_100">#ffbfdd</color>
    <color name="cupcake_200">#ffb3d0</color>
    <color name="cupcake_300">#ff8ac4</color>
    <color name="cupcake_400">#FF69B4</color>
    <color name="cupcake_500">#f752aa</color>
</resources>

PWA prompt