True grays and tinted grays
A true neutral has equal red, green and blue values, such as #808080. It carries no hue at all. Most grays used in real designs are slightly tinted instead: a touch of blue makes them crisp and technical, a touch of brown or yellow makes them soft and homely. The last group above collects these tinted versions.
A naming quirk in CSS
In CSS, darkgray is #A9A9A9 while plain gray is #808080, so "dark" gray is actually lighter. The names were merged from two older lists that used different scales. Every keyword can also be spelled with "grey".
Choosing a shade
| Shade | Use it for |
|---|---|
| Light (above about 85% lightness) | Backgrounds, dividers, disabled states |
| Mid | Borders, icons, secondary text on white (check contrast) |
| Dark and charcoal | Body text, dark-theme surfaces, footers |
Mid tones are where contrast problems hide. Text colored #999999 on white only reaches about 2.8:1, well below the 4.5:1 needed for body text. Look for "Aa" figures of 4.5 or more.
Seeing structure in grayscale
Designers often check a layout with all color removed, to see whether the lightness steps alone make the hierarchy clear. The grayscale image converter does this for screenshots. For warmer neutrals, see greige and neutral colors, and for deeper options, dark colors.