#a0a6b2

#cbced5

#e7e8ec

#b2a0a6

#a6b2a0

Noir

#a0a6b2

#cbced5

#e7e8ec

#b2a0a6

#a6b2a0



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

Green

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#a0a6b2	rgb(160, 166, 178)	hsl(220 10% 66%)	hwb(220 63% 30%)	lch(67.9 7 267)	lab(67.9 -0.395 -6.99)	cmyk 10%, 7%, 0%, 30%
	#cbced5	rgb(203, 206, 213)	hsl(220 11% 82%)	hwb(220 80% 16%)	lch(82.7 3.86 269)	lab(82.7 -0.085 -3.86)	cmyk 5%, 3%, 0%, 16%
	#e7e8ec	rgb(231, 232, 236)	hsl(230 12% 92%)	hwb(230 91% 7.5%)	lch(92 2.08 275)	lab(92 0.191 -2.07)	cmyk 2%, 2%, 0%, 7%
	#b2a0a6	rgb(178, 160, 166)	hsl(340 10% 66%)	hwb(340 63% 30%)	lch(67.6 7.61 355)	lab(67.6 7.58 -0.603)	cmyk 0%, 10%, 7%, 30%
	#a6b2a0	rgb(166, 178, 160)	hsl(100 10% 66%)	hwb(100 63% 30%)	lch(71.2 10.3 132)	lab(71.2 -6.87 7.73)	cmyk 7%, 0%, 10%, 30%

 Click a color format to copy to your clipboard.

Contrast ratios checker

Click one color card to view the complete contrast checker tests.

#a0a6b2

AA - 2.44



#cbced5

AA - 1.57



#e7e8ec

AA - 1.22



#b2a0a6

AA - 2.47



#a6b2a0

AA - 2.21



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(72.4% -0.002 -0.019), oklab(85.1% 0 -0.01), oklab(93.1% 0 -0.005), oklab(72.3% 0.023 -0.002), oklab(74.9% -0.02 0.02))

Fallback colors



background: linear-gradient(45deg, #a0a6b2, #cbced5, #e7e8ec, #b2a0a6, #a6b2a0)

Colors



<!-- Primary Colors -->
<color name="noir_color_10">#a0a6b2</color>
<color name="noir_color_20">#cbced5</color>
<color name="noir_color_30">#e7e8ec</color>
<color name="noir_color_40">#b2a0a6</color>
<color name="noir_color_50">#a6b2a0</color>

PWA prompt