Donut

#011c27

#03254e

#545677

#eb9fef

#fecee9

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Pink

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#011c27	rgb(1, 28, 39)	hsl(200 95% 7.8%)	oklab(21% -0.03 -0.03)	oklch(21% 0.04 230)	color(display-p3 0.03 0.11 0.15)
	#03254e	rgb(3, 37, 78)	hsl(210 93% 16%)	oklab(27% -0.02 -0.08)	oklch(27% 0.08 260)	color(display-p3 0.05 0.14 0.29)
	#545677	rgb(84, 86, 119)	hsl(240 17% 40%)	oklab(46% 0.01 -0.05)	oklch(46% 0.05 280)	color(display-p3 0.33 0.34 0.46)
	#eb9fef	rgb(235, 159, 239)	hsl(300 71% 78%)	oklab(80% 0.11 -0.08)	oklch(80% 0.14 330)	color(display-p3 0.88 0.64 0.92)
	#fecee9	rgb(254, 206, 233)	hsl(330 96% 90%)	oklab(90% 0.06 -0.02)	oklch(90% 0.06 340)	color(display-p3 0.97 0.82 0.91)

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

#011c27

AAA - 17.54



#03254e

AAA - 15.23



#545677

AAA - 7.06



#eb9fef

AA - 1.95



#fecee9

AA - 1.37



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(21.2% -0.027 -0.03), oklab(26.8% -0.021 -0.082), oklab(46.5% 0.011 -0.052), oklab(80.3% 0.112 -0.078), oklab(90.1% 0.061 -0.018))

Fallback colors



background: linear-gradient(45deg, #011c27, #03254e, #545677, #eb9fef, #fecee9)

Colors



<!-- Primary Colors -->
<color name="donut_color_10">#011c27</color>
<color name="donut_color_20">#03254e</color>
<color name="donut_color_30">#545677</color>
<color name="donut_color_40">#eb9fef</color>
<color name="donut_color_50">#fecee9</color>

PWA prompt