Vainilla

#bd59e8

#da85ff

#ffbc8f

#ffd68f

#ffeac7

Actions

Explore the palette in different formats, and actions.

Colors overview

Purple

Yellow

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#bd59e8	rgb(189, 89, 232)	hsl(280 76% 63%)	hwb(280 35% 9%)	lch(55.5 80 316)	lab(55.5 57.2 -55.9)	cmyk 19%, 62%, 0%, 9%
	#da85ff	rgb(218, 133, 255)	hsl(280 100% 76%)	hwb(280 52% 0%)	lch(68.4 68 315)	lab(68.4 48.2 -48)	cmyk 15%, 48%, 0%, 0%
	#ffbc8f	rgb(255, 188, 143)	hsl(24 100% 78%)	hwb(24 56% 0%)	lch(81.8 38.9 57.3)	lab(81.8 21 32.8)	cmyk 0%, 26%, 44%, 0%
	#ffd68f	rgb(255, 214, 143)	hsl(38 100% 78%)	hwb(38 56% 0%)	lch(88 41.5 78.6)	lab(88 8.21 40.6)	cmyk 0%, 16%, 44%, 0%
	#ffeac7	rgb(255, 234, 199)	hsl(37 100% 89%)	hwb(37 78% 0%)	lch(93.8 20.1 80.1)	lab(93.8 3.44 19.8)	cmyk 0%, 8%, 22%, 0%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#bd59e8

AA - 3.64



#da85ff

AA - 2.39



#ffbc8f

AA - 1.63



#ffd68f

AA - 1.37



#ffeac7

AA - 1.17



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(64.6% 0.152 -0.156), oklab(75.2% 0.132 -0.133), oklab(84.7% 0.056 0.08), oklab(89.6% 0.016 0.099), oklab(94.5% 0.008 0.05))

Fallback colors



background: linear-gradient(45deg, #bd59e8, #da85ff, #ffbc8f, #ffd68f, #ffeac7)

Colors



<!-- Primary Colors -->
<color name="vainilla_color_10">#bd59e8</color>
<color name="vainilla_color_20">#da85ff</color>
<color name="vainilla_color_30">#ffbc8f</color>
<color name="vainilla_color_40">#ffd68f</color>
<color name="vainilla_color_50">#ffeac7</color>

PWA prompt