Candy

#3e5efa

#94a9ff

#dbdbff

#ff8cb3

#e91e63

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Red

Pink

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#3e5efa	rgb(62, 94, 250)	hsl(230 95% 61%)	oklab(56% -0.01 -0.23)	oklch(56% 0.23 270)	color(display-p3 0.27 0.37 0.94)
	#94a9ff	rgb(148, 169, 255)	hsl(230 100% 79%)	oklab(75% 0.01 -0.13)	oklch(75% 0.13 270)	color(display-p3 0.6 0.66 0.98)
	#dbdbff	rgb(219, 219, 255)	hsl(240 100% 93%)	oklab(90% 0.01 -0.05)	oklch(90% 0.05 290)	color(display-p3 0.86 0.86 0.99)
	#ff8cb3	rgb(255, 140, 179)	hsl(340 100% 77%)	oklab(78% 0.14 0)	oklch(78% 0.14 360)	color(display-p3 0.94 0.57 0.7)
	#e91e63	rgb(233, 30, 99)	hsl(340 82% 52%)	oklab(61% 0.23 0.04)	oklch(61% 0.23 9.6)	color(display-p3 0.84 0.22 0.39)

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

#3e5efa

AA - 5.01



#94a9ff

AA - 2.23



#dbdbff

AA - 1.34



#ff8cb3

AA - 2.17



#e91e63

AA - 4.34



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(55.8% -0.006 -0.234), oklab(75.3% 0.006 -0.126), oklab(90.3% 0.013 -0.047), oklab(77.5% 0.145 -0.002), oklab(60.6% 0.227 0.038))

Fallback colors



background: linear-gradient(45deg, #3e5efa, #94a9ff, #dbdbff, #ff8cb3, #e91e63)

Colors



<!-- Primary Colors -->
<color name="candy_color_10">#3e5efa</color>
<color name="candy_color_20">#94a9ff</color>
<color name="candy_color_30">#dbdbff</color>
<color name="candy_color_40">#ff8cb3</color>
<color name="candy_color_50">#e91e63</color>

PWA prompt