#212121

#575757

#9e9e9e

#d1f4ff

#fffeb0

Midnight

#212121

#575757

#9e9e9e

#d1f4ff

#fffeb0



Web code

Get CSS, SCSS, & Tailwind code for development



App tokens

Get Android, Flutter, Swift, & MAUI tokens



Quick view

Inspect colors in multiple color spaces

Colors overview

Grey

Blue

Yellow

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#212121	rgb(33, 33, 33)	hsl(none 0% 13%)	hwb(none 13% 87%)	lch(12.7 0 none)	lab(12.7 0 0)	cmyk 0%, 0%, 0%, 87%
	#575757	rgb(87, 87, 87)	hsl(none 0% 34%)	hwb(none 34% 66%)	lch(37 0 none)	lab(37 0 0)	cmyk 0%, 0%, 0%, 66%
	#9e9e9e	rgb(158, 158, 158)	hsl(none 0% 62%)	hwb(none 62% 38%)	lch(65.1 0 none)	lab(65.1 0 0)	cmyk 0%, 0%, 0%, 38%
	#d1f4ff	rgb(209, 244, 255)	hsl(190 100% 91%)	hwb(190 82% 0%)	lch(93.9 13.7 223)	lab(93.9 -10 -9.31)	cmyk 18%, 4%, 0%, 0%
	#fffeb0	rgb(255, 254, 176)	hsl(59 100% 85%)	hwb(59 69% 0%)	lch(98.4 38.4 102)	lab(98.4 -8.16 37.5)	cmyk 0%, 0%, 31%, 0%

 Click a color format to copy 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