Shades of Gray: Names, HEX & RGB Codes
Grays are the backbone of most interfaces: backgrounds, borders, secondary text. These are the CSS named grays (plus black and white) with their codes and contrast against text.
12 named gray colors in CSS
Every name below works directly in CSS (for example color: lightslategray;). Values are from the CSS Color Module Level 4 list; the last column shows whether white or black text has more contrast on that color, and the exact WCAG ratio.
| Name | HEX | RGB | HSL | Best text color | |
|---|---|---|---|---|---|
Whitewhite | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) | black text, 21.00:1 | |
White Smokewhitesmoke | #F5F5F5 | rgb(245, 245, 245) | hsl(0, 0%, 96%) | black text, 19.26:1 | |
Gainsborogainsboro | #DCDCDC | rgb(220, 220, 220) | hsl(0, 0%, 86%) | black text, 15.31:1 | |
Light Graylightgray | #D3D3D3 | rgb(211, 211, 211) | hsl(0, 0%, 83%) | black text, 14.02:1 | |
Silversilver | #C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | black text, 11.54:1 | |
Dark Graydarkgray | #A9A9A9 | rgb(169, 169, 169) | hsl(0, 0%, 66%) | black text, 8.93:1 | |
Light Slate Graylightslategray | #778899 | rgb(119, 136, 153) | hsl(210, 14%, 53%) | black text, 5.76:1 | |
Graygray | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | black text, 5.31:1 | |
Slate Grayslategray | #708090 | rgb(112, 128, 144) | hsl(210, 13%, 50%) | black text, 5.17:1 | |
Dim Graydimgray | #696969 | rgb(105, 105, 105) | hsl(0, 0%, 41%) | white text, 5.48:1 | |
Dark Slate Graydarkslategray | #2F4F4F | rgb(47, 79, 79) | hsl(180, 25%, 25%) | white text, 8.92:1 | |
Blackblack | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) | white text, 21.00:1 |
Gray tint & shade scale
A ten-step scale built from gray (#808080). Need a scale for your own color? Use the tints, shades & tones generator.
Tints (mixed with white) on the left, shades (mixed with black) on the right. Click a swatch to copy it.
Using gray in design
A quirk worth knowing: in CSS, darkgray (#A9A9A9) is actually lighter than gray (#808080), a leftover from the X11 color list. Every gray name also has a "grey" spelling (grey, darkgrey, slategrey and so on) with the same value. For body text on white, #767676 is the lightest neutral gray that passes WCAG AA (4.54:1); gray (#808080) only reaches 3.94:1.
A palette to start from
More ideas: dark mode palettes, contrast & readability, or check any pair in the contrast checker.