Midnight

#212121

#575757

#9e9e9e

#d1f4ff

#fffeb0

Actions

Explore the palette in different formats, and actions.

Colors overview

Grey

Blue

Yellow

Color	HEX	RGB	HSL	OKLAB HDR	OKLCH HDR	P3 HDR
	#212121	rgb(33, 33, 33)	hsl(none 0% 13%)	oklab(25% 0 0)	oklch(25% 0 none)	color(display-p3 0.13 0.13 0.13)
	#575757	rgb(87, 87, 87)	hsl(none 0% 34%)	oklab(46% 0 0)	oklch(46% 0 none)	color(display-p3 0.34 0.34 0.34)
	#9e9e9e	rgb(158, 158, 158)	hsl(none 0% 62%)	oklab(70% 0 0)	oklch(70% 0 none)	color(display-p3 0.62 0.62 0.62)
	#d1f4ff	rgb(209, 244, 255)	hsl(190 100% 91%)	oklab(95% -0.03 -0.02)	oklch(95% 0.04 220)	color(display-p3 0.85 0.95 0.99)
	#fffeb0	rgb(255, 254, 176)	hsl(59 100% 85%)	oklab(98% -0.03 0.09)	oklch(98% 0.1 110)	color(display-p3 1 1 0.72)

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

#212121

AAA - 16.1



#575757

AAA - 7.22



#9e9e9e

AA - 2.67



#d1f4ff

AA - 1.16



#fffeb0

AA - 1.04



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(24.8% 0 0), oklab(45.7% 0 0), oklab(69.9% 0 0), oklab(94.6% -0.031 -0.025), oklab(98% -0.029 0.093))

Fallback colors



background: linear-gradient(45deg, #212121, #575757, #9e9e9e, #d1f4ff, #fffeb0)

Colors



<!-- Primary Colors -->
<color name="midnight_color_10">#212121</color>
<color name="midnight_color_20">#575757</color>
<color name="midnight_color_30">#9e9e9e</color>
<color name="midnight_color_40">#d1f4ff</color>
<color name="midnight_color_50">#fffeb0</color>

PWA prompt