Cornflower

#686cf2

#9496ff

#dbdbf4

#f0f1ff

#f2b408

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#686cf2	rgb(104, 108, 242)	hsl(240 84% 68%)	hwb(240 41% 5.1%)	lch(50.9 74.9 292)	lab(50.9 28.2 -69.4)	cmyk 57%, 55%, 0%, 5%
	#9496ff	rgb(148, 150, 255)	hsl(240 100% 79%)	hwb(240 58% 0%)	lch(65.4 56.5 290)	lab(65.4 18.9 -53.3)	cmyk 42%, 41%, 0%, 0%
	#dbdbf4	rgb(219, 219, 244)	hsl(240 53% 91%)	hwb(240 86% 4.3%)	lch(88 12.8 286)	lab(88 3.54 -12.3)	cmyk 10%, 10%, 0%, 4%
	#f0f1ff	rgb(240, 241, 255)	hsl(240 100% 97%)	hwb(240 94% 0%)	lch(95.4 7.06 283)	lab(95.4 1.56 -6.88)	cmyk 6%, 5%, 0%, 0%
	#f2b408	rgb(242, 180, 8)	hsl(44 94% 49%)	hwb(44 3.1% 5.1%)	lch(77.6 80 79.4)	lab(77.6 14.6 78.6)	cmyk 0%, 26%, 97%, 5%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#686cf2

AA - 4.18



#9496ff

AA - 2.6



#dbdbf4

AA - 1.35



#f0f1ff

AA - 1.12



#f2b408

AA - 1.85



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% 0.025 -0.195), oklab(71.6% 0.029 -0.148), oklab(89.9% 0.009 -0.033), oklab(96.1% 0.004 -0.018), oklab(80.6% 0.019 0.163))

Fallback colors



background: linear-gradient(45deg, #686cf2, #9496ff, #dbdbf4, #f0f1ff, #f2b408)

Colors



<!-- Primary Colors -->
<color name="cornflower_color_10">#686cf2</color>
<color name="cornflower_color_20">#9496ff</color>
<color name="cornflower_color_30">#dbdbf4</color>
<color name="cornflower_color_40">#f0f1ff</color>
<color name="cornflower_color_50">#f2b408</color>

PWA prompt