#0e1c36

#afcbff

#d7f9ff

#f9fbf2

#ffede1

Book

#0e1c36

#afcbff

#d7f9ff

#f9fbf2

#ffede1



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Blue

Cyan

Orange

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#0e1c36	rgb(14, 28, 54)	hsl(220 59% 13%)	hwb(220 5.5% 79%)	lch(10.2 19.3 275)	lab(10.2 1.8 -19.2)	cmyk 74%, 48%, 0%, 79%
	#afcbff	rgb(175, 203, 255)	hsl(220 100% 84%)	hwb(220 69% 0%)	lch(81 28.9 268)	lab(81 -0.803 -28.9)	cmyk 31%, 20%, 0%, 0%
	#d7f9ff	rgb(215, 249, 255)	hsl(190 100% 92%)	hwb(190 84% 0%)	lch(95.6 12.5 213)	lab(95.6 -10.5 -6.78)	cmyk 16%, 2%, 0%, 0%
	#f9fbf2	rgb(249, 251, 242)	hsl(73 53% 97%)	hwb(73 95% 1.6%)	lch(98.3 4.48 114)	lab(98.3 -1.85 4.08)	cmyk 1%, 0%, 4%, 2%
	#ffede1	rgb(255, 237, 225)	hsl(24 100% 94%)	hwb(24 88% 0%)	lch(95 9.48 59.2)	lab(95 4.86 8.14)	cmyk 0%, 7%, 12%, 0%

 Click a color format to copy 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