Clean Color Palette

#222F3D

#0099ff

#9ed8ff

#DDE6E8

#f7f7f7

#222F3D

#0099ff

#9ed8ff

#DDE6E8

#f7f7f7

Colors overview

Blue

Cyan

Black

Grey

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#222f3d	rgb(34, 47, 61)	hsl(210 28% 19%)	hwb(210 13% 76%)	lch(18.7 11 258)	lab(18.7 -2.37 -10.8)	cmyk 44%, 23%, 0%, 76%
	#0099ff	rgb(0, 153, 255)	hsl(200 100% 50%)	hwb(200 0% 0%)	lch(60.7 61.3 265)	lab(60.7 -5.18 -61.1)	cmyk 100%, 40%, 0%, 0%
	#9ed8ff	rgb(158, 216, 255)	hsl(200 100% 81%)	hwb(200 62% 0%)	lch(83.4 28.1 245)	lab(83.4 -12.1 -25.4)	cmyk 38%, 15%, 0%, 0%
	#dde6e8	rgb(221, 230, 232)	hsl(190 19% 89%)	hwb(190 87% 9%)	lch(90.6 3.52 216)	lab(90.6 -2.84 -2.08)	cmyk 5%, 1%, 0%, 9%
	#f7f7f7	rgb(247, 247, 247)	hsl(none 0% 97%)	hwb(none 97% 3.1%)	lch(97.2 0 none)	lab(97.2 0 0)	cmyk 0%, 0%, 0%, 3%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#222F3D

AAA - 13.61



#0099ff

AA - 2.99



#9ed8ff

AA - 1.53



#DDE6E8

AA - 1.26



#f7f7f7

AA - 1.07



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(30% -0.01 -0.029), oklab(66.9% -0.066 -0.171), oklab(85.6% -0.042 -0.069), oklab(91.9% -0.008 -0.005), oklab(97.6% 0 0))

Fallback colors



background: linear-gradient(45deg, #222F3D, #0099ff, #9ed8ff, #DDE6E8, #f7f7f7)

Colors



<!-- Primary Colors -->
<color name="clean_color_10">#222F3D</color>
<color name="clean_color_20">#0099ff</color>
<color name="clean_color_30">#9ed8ff</color>
<color name="clean_color_40">#DDE6E8</color>
<color name="clean_color_50">#f7f7f7</color>

PWA prompt