Clean

#222F3D

#0099ff

#9ed8ff

#DDE6E8

#f7f7f7

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Cyan

Black

Grey

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#222f3d	rgb(34, 47, 61)	hsl(210 28% 19%)	oklab(30% -0.01 -0.03)	oklch(30% 0.03 250)	color(display-p3 0.14 0.18 0.23)
	#0099ff	rgb(0, 153, 255)	hsl(200 100% 50%)	oklab(67% -0.07 -0.17)	oklch(67% 0.18 250)	color(display-p3 0.26 0.59 0.97)
	#9ed8ff	rgb(158, 216, 255)	hsl(200 100% 81%)	oklab(86% -0.04 -0.07)	oklch(86% 0.08 240)	color(display-p3 0.67 0.84 0.98)
	#dde6e8	rgb(221, 230, 232)	hsl(190 19% 89%)	oklab(92% -0.01 -0.01)	oklch(92% 0.01 210)	color(display-p3 0.87 0.9 0.91)
	#f7f7f7	rgb(247, 247, 247)	hsl(none 0% 97%)	oklab(98% 0 0)	oklch(98% 0 none)	color(display-p3 0.97 0.97 0.97)

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

#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