Shades of Gray: Color Names & Hex Codes
There are 8 CSS named colors in the gray range, from the lightest, Gainsboro, to the darkest, Dark Slate Gray. Each one below has its exact hex and RGB code, the text color that reads best on it, and a full page with palettes and matching colors.
Gray Color Chart
Ordered from lightest to darkest by relative luminance. Click a name for its full color page.
Light, Mid-tone and Dark Shades of Gray
Light shades of gray
Pale enough to work as backgrounds. Black text has the higher contrast on all 3 of them. Gainsboro, Light Gray and Silver.
Mid-tone shades of gray
Mid-tones for accents, buttons and illustrations. Check the table below before choosing a text color. Black text has the higher contrast on all 3 of them. Dark Gray, Gray and Slate Gray.
Dark shades of gray
Deep tones for headers, buttons and bold brand color. White text has the higher contrast on all 2 of them. Dim Gray and Dark Slate Gray.
Gray Hex Codes and Contrast
Contrast ratios follow WCAG 2.2: 4.5:1 is the minimum for body text, 3:1 for large text.
| Color | HEX | RGB | HSL | On black | On white | Best text |
|---|---|---|---|---|---|---|
#DCDCDC | rgb(220, 220, 220) | hsl(0, 0%, 86%) | 15.31:1 | 1.37:1 | Black | |
#D3D3D3 | rgb(211, 211, 211) | hsl(0, 0%, 83%) | 14.03:1 | 1.5:1 | Black | |
#C0C0C0 | rgb(192, 192, 192) | hsl(0, 0%, 75%) | 11.54:1 | 1.82:1 | Black | |
#A9A9A9 | rgb(169, 169, 169) | hsl(0, 0%, 66%) | 8.94:1 | 2.35:1 | Black | |
#808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) | 5.32:1 | 3.95:1 | Black | |
#708090 | rgb(112, 128, 144) | hsl(210, 13%, 50%) | 5.18:1 | 4.05:1 | Black | |
#696969 | rgb(105, 105, 105) | hsl(0, 0%, 41%) | 3.83:1 | 5.49:1 | White | |
#2F4F4F | rgb(47, 79, 79) | hsl(180, 25%, 25%) | 2.35:1 | 8.93:1 | White |
Shades of Gray FAQ
What are the shades of gray in CSS?
CSS Color 4 does not group its named colors into families, but 8 of them fall in the gray range. From lightest to darkest: Gainsboro (#DCDCDC), Light Gray (#D3D3D3), Silver (#C0C0C0), Dark Gray (#A9A9A9), Gray (#808080), Slate Gray (#708090), Dim Gray (#696969) and Dark Slate Gray (#2F4F4F).
What is the hex code for gray?
The CSS named color gray is #808080, which is RGB(128, 128, 128). The other shades on this page each have their own code.
Which shade of gray can I use for text on a white background?
Dim Gray and Dark Slate Gray are the only ones of these shades with at least 4.5:1 contrast on white, the WCAG AA minimum for body text. Dark Slate Gray reaches 8.93:1.
Is it gray or grey?
Both spellings work in CSS. Every gray named color also accepts the grey spelling, so dimgray and dimgrey, or slategray and slategrey, are the same colors.
Sources: W3C CSS Color Module Level 4 (named colors and values); WCAG 2.2 (relative luminance and contrast formula).