Vainilla

#bd59e8

#da85ff

#ffbc8f

#ffd68f

#ffeac7

Actions

Explore the palette in different formats, and actions.

Colors overview

Purple

Yellow

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#bd59e8	rgb(189, 89, 232)	hsl(280 76% 63%)	oklab(65% 0.15 -0.16)	oklch(65% 0.22 310)	color(display-p3 0.69 0.37 0.88)
	#da85ff	rgb(218, 133, 255)	hsl(280 100% 76%)	oklab(75% 0.13 -0.13)	oklch(75% 0.19 310)	color(display-p3 0.81 0.54 0.97)
	#ffbc8f	rgb(255, 188, 143)	hsl(24 100% 78%)	oklab(85% 0.06 0.08)	oklch(85% 0.1 55)	color(display-p3 0.96 0.75 0.59)
	#ffd68f	rgb(255, 214, 143)	hsl(38 100% 78%)	oklab(90% 0.02 0.1)	oklch(90% 0.1 81)	color(display-p3 0.97 0.85 0.6)
	#ffeac7	rgb(255, 234, 199)	hsl(37 100% 89%)	oklab(95% 0.01 0.05)	oklch(95% 0.05 81)	color(display-p3 0.99 0.92 0.8)

 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.

#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