Color family
Gray Colors: Names, HEX Codes & Shades
Grays have little or no saturation, so their hue hardly matters: the red, green and blue values are equal or very close. This family runs from light silver to dark charcoal. CSS accepts both gray and grey. This site uses gray, and the grey URL leads here.
Gray is the main way to build text and surface colors. The CSS color gray (#808080) has 3.94:1 contrast with white, just under the 4.5:1 AA level for normal text. #767676 is the lightest neutral gray that passes on white (4.54:1). Anything darker is safe on white, and anything lighter is not.
Gray colors at a glance
| Extreme | Color | HEX | HSL |
|---|---|---|---|
| Lightest | Gainsboro | #DCDCDC | hsl(0, 0%, 86%) |
| Darkest | Charcoal | #343837 | hsl(165, 4%, 21%) |
| Most saturated | Light Blue Gray | #B7C9E2 | hsl(215, 43%, 80%) |
| Least saturated | Dark Gray | #A9A9A9 | hsl(0, 0%, 66%) |
Popular gray colors
Using gray colors
- Body text, captions, borders, dividers and disabled states.
- Backgrounds for cards, tables and code blocks, using very light grays.
- Neutral palettes that let one accent color stand out.
- Dark mode surfaces, where dark grays are common instead of pure black.
Pick a small scale of grays, for example five to seven steps, and reuse it instead of choosing a new gray for every element.
A slightly warm or cool gray (with a little saturation) can make a palette feel cohesive. Check contrast again after changing it.