#000000

#383838

#666666

#949494

#C2C2C2

Bat

#000000

#383838

#666666

#949494

#C2C2C2



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

Black

Grey

Color	HEX	RGB	HSL	HWB	LCH	LAB	CMYK
	#000000	rgb(0, 0, 0)	hsl(none 0% 0%)	hwb(none 0% 100%)	lch(0 0 none)	lab(0 0 0)	cmyk 0%, 0%, 0%, 100%
	#383838	rgb(56, 56, 56)	hsl(none 0% 22%)	hwb(none 22% 78%)	lch(23.5 0 none)	lab(23.5 0 0)	cmyk 0%, 0%, 0%, 78%
	#666666	rgb(102, 102, 102)	hsl(none 0% 40%)	hwb(none 40% 60%)	lch(43.2 0 none)	lab(43.2 0 0)	cmyk 0%, 0%, 0%, 60%
	#949494	rgb(148, 148, 148)	hsl(none 0% 58%)	hwb(none 58% 42%)	lch(61.3 0 none)	lab(61.3 0 0)	cmyk 0%, 0%, 0%, 42%
	#c2c2c2	rgb(194, 194, 194)	hsl(none 0% 76%)	hwb(none 76% 24%)	lch(78.4 0 none)	lab(78.4 0 0)	cmyk 0%, 0%, 0%, 24%

 Click a color format to copy to your clipboard.

Contrast ratios checker

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

#000000

AAA - 21



#383838

AAA - 11.72



#666666

AA - 5.74



#949494

AA - 3.03



#C2C2C2

AA - 1.78



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(0% 0 0), oklab(34.1% 0 0), oklab(51% 0 0), oklab(66.7% 0 0), oklab(81.4% 0 0))

Fallback colors



background: linear-gradient(45deg, #000000, #383838, #666666, #949494, #C2C2C2)

Colors



<!-- Primary Colors -->
<color name="bat_color_10">#000000</color>
<color name="bat_color_20">#383838</color>
<color name="bat_color_30">#666666</color>
<color name="bat_color_40">#949494</color>
<color name="bat_color_50">#C2C2C2</color>

PWA prompt