501

#1B4F72

#edecea

#dadada

#090909

Actions

Explore the palette in different formats, and actions.

Colors overview

Cyan

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#1b4f72	rgb(27, 79, 114)	hsl(200 62% 28%)	oklab(41% -0.04 -0.07)	oklch(41% 0.08 240)	color(display-p3 0.16 0.31 0.44)
	#edecea	rgb(237, 236, 234)	hsl(40 7.7% 92%)	oklab(94% 0 0)	oklch(94% 0 85)	color(display-p3 0.93 0.93 0.92)
	#dadada	rgb(218, 218, 218)	hsl(none 0% 85%)	oklab(89% 0 0)	oklch(89% 0 none)	color(display-p3 0.85 0.85 0.85)
	#090909	rgb(9, 9, 9)	hsl(none 0% 3.5%)	oklab(14% 0 0)	oklch(14% 0 none)	color(display-p3 0.04 0.04 0.04)

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

#1B4F72

AAA - 8.72



#edecea

AA - 1.18



#dadada

AA - 1.39



#090909

AAA - 19.91



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(41.1% -0.037 -0.071), oklab(94.3% 0 0.003), oklab(88.8% 0 0), oklab(14% 0 0))

Fallback colors



background: linear-gradient(45deg, #1B4F72, #edecea, #dadada, #090909)

Colors



<!-- Primary Colors -->
<color name="501_color_10">#1B4F72</color>
<color name="501_color_20">#edecea</color>
<color name="501_color_30">#dadada</color>
<color name="501_color_40">#090909</color>

PWA prompt