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	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)
	#1984e1	rgb(25, 132, 225)	hsl(210 80% 49%)	oklab(61% -0.05 -0.16)	oklch(61% 0.17 250)	color(display-p3 0.25 0.51 0.86)
	#ff8800	rgb(255, 136, 0)	hsl(32 100% 50%)	oklab(74% 0.1 0.15)	oklch(74% 0.18 56)	color(display-p3 0.94 0.56 0.21)
	#b4e0fe	rgb(180, 224, 254)	hsl(200 97% 85%)	oklab(89% -0.03 -0.05)	oklch(89% 0.06 240)	color(display-p3 0.74 0.87 0.98)
	#ffffff	rgb(255, 255, 255)	hsl(none 0% 100%)	oklab(100% 0 0)	oklch(100% 0 none)	color(display-p3 1 1 1)

 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



#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