Book

#0e1c36

#afcbff

#d7f9ff

#f9fbf2

#ffede1

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Cyan

Orange

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#0e1c36	rgb(14, 28, 54)	hsl(220 59% 13%)	oklab(23% -0.01 -0.05)	oklch(23% 0.05 260)	color(display-p3 0.07 0.11 0.2)
	#afcbff	rgb(175, 203, 255)	hsl(220 100% 84%)	oklab(84% -0.01 -0.08)	oklch(84% 0.08 260)	color(display-p3 0.71 0.79 0.98)
	#d7f9ff	rgb(215, 249, 255)	hsl(190 100% 92%)	oklab(96% -0.03 -0.02)	oklch(96% 0.04 210)	color(display-p3 0.87 0.97 1)
	#f9fbf2	rgb(249, 251, 242)	hsl(73 53% 97%)	oklab(98% -0.01 0.01)	oklch(98% 0.01 120)	color(display-p3 0.98 0.98 0.95)
	#ffede1	rgb(255, 237, 225)	hsl(24 100% 94%)	oklab(96% 0.01 0.02)	oklch(96% 0.03 56)	color(display-p3 0.99 0.93 0.89)

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

#0e1c36

AAA - 16.96



#afcbff

AA - 1.63



#d7f9ff

AA - 1.11



#f9fbf2

AA - 1.04



#ffede1

AA - 1.13



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(23% -0.008 -0.054), oklab(84% -0.01 -0.079), oklab(96% -0.031 -0.018), oklab(98.4% -0.005 0.011), oklab(95.7% 0.014 0.021))

Fallback colors



background: linear-gradient(45deg, #0e1c36, #afcbff, #d7f9ff, #f9fbf2, #ffede1)

Colors



<!-- Primary Colors -->
<color name="book_color_10">#0e1c36</color>
<color name="book_color_20">#afcbff</color>
<color name="book_color_30">#d7f9ff</color>
<color name="book_color_40">#f9fbf2</color>
<color name="book_color_50">#ffede1</color>

PWA prompt