Night

#000022

#312c4a

#463f59

#685e74

#897c8f

Actions

Explore the palette in different formats, and actions.

Colors overview

Black

Grey

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#000022	rgb(0, 0, 34)	hsl(240 100% 6.7%)	oklab(11% -0.01 -0.08)	oklch(11% 0.08 260)	color(display-p3 0 0 0.13)
	#312c4a	rgb(49, 44, 74)	hsl(250 25% 23%)	oklab(31% 0.02 -0.05)	oklch(31% 0.05 290)	color(display-p3 0.19 0.17 0.28)
	#463f59	rgb(70, 63, 89)	hsl(260 17% 30%)	oklab(39% 0.02 -0.04)	oklch(39% 0.04 300)	color(display-p3 0.27 0.25 0.34)
	#685e74	rgb(104, 94, 116)	hsl(270 10% 41%)	oklab(50% 0.02 -0.03)	oklch(50% 0.04 310)	color(display-p3 0.4 0.37 0.45)
	#897c8f	rgb(137, 124, 143)	hsl(280 7.8% 52%)	oklab(60% 0.02 -0.02)	oklch(60% 0.03 320)	color(display-p3 0.53 0.49 0.56)

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

#000022

AAA - 20.52



#312c4a

AAA - 13.2



#463f59

AAA - 9.92



#685e74

AA - 6.1



#897c8f

AA - 3.93



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(11.4% -0.008 -0.078), oklab(31.3% 0.019 -0.05), oklab(38.6% 0.02 -0.04), oklab(49.9% 0.021 -0.03), oklab(60.4% 0.023 -0.023))

Fallback colors



background: linear-gradient(45deg, #000022, #312c4a, #463f59, #685e74, #897c8f)

Colors



<!-- Primary Colors -->
<color name="night_color_10">#000022</color>
<color name="night_color_20">#312c4a</color>
<color name="night_color_30">#463f59</color>
<color name="night_color_40">#685e74</color>
<color name="night_color_50">#897c8f</color>

PWA prompt