Self

#222F3D

#1984e1

#ff8800

#b4e0fe

#ffffff

Actions

Explore the palette in different formats, and actions.

Colors overview

Blue

Orange

Black

White

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%
	#1984e1	rgb(25, 132, 225)	hsl(210 80% 49%)	hwb(210 9.8% 12%)	lch(53.3 56.3 268)	lab(53.3 -2.33 -56.3)	cmyk 89%, 41%, 0%, 12%
	#ff8800	rgb(255, 136, 0)	hsl(32 100% 50%)	hwb(32 0% 0%)	lch(69.4 86.4 61.1)	lab(69.4 41.7 75.7)	cmyk 0%, 47%, 100%, 0%
	#b4e0fe	rgb(180, 224, 254)	hsl(200 97% 85%)	hwb(200 71% 0.39%)	lch(86.8 21.9 244)	lab(86.8 -9.72 -19.6)	cmyk 29%, 12%, 0%, 0%
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	hwb(none 100% 0%)	lch(100 0 none)	lab(100 0 0)	cmyk 0%, 0%, 0%, 0%

 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



#1984e1

AA - 3.86



#ff8800

AA - 2.39



#b4e0fe

AA - 1.39



#ffffff

AA - 1



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(60.6% -0.054 -0.158), oklab(74.4% 0.1 0.151), oklab(88.6% -0.033 -0.053), oklab(100% 0 0))

Fallback colors



background: linear-gradient(45deg, #222F3D, #1984e1, #ff8800, #b4e0fe, #ffffff)

Colors



<!-- Primary Colors -->
<color name="self_color_10">#222F3D</color>
<color name="self_color_20">#1984e1</color>
<color name="self_color_30">#ff8800</color>
<color name="self_color_40">#b4e0fe</color>
<color name="self_color_50">#ffffff</color>

PWA prompt