Shades of Gray

Grays have zero or near-zero saturation, so hue barely matters and lightness is everything. The family runs from black at 0% lightness to white at 100%, with every neutral in between. In RGB, a true gray has three equal channels: #808080 is rgb(128, 128, 128). Slightly tinted grays count too: a small amount of blue or brown gives a gray a cool or warm temperature without making it read as a color.

CSS includes black (#000000), gray (#808080) and silver (#C0C0C0), and accepts both the gray and grey spellings. One quirk: darkgray (#A9A9A9) is lighter than gray, because gray comes from the original 16 HTML colors while darkgray was inherited from the X11 color list. Slategray (#708090) is a cool gray tinted toward blue at 210°, a common choice for secondary text and interface chrome.

10 gray CSS color names

Sorted from lightest to darkest by OKLCH lightness. Open any color for its codes, shades, harmonies and contrast.

Using gray in design

Grays do most of the work in an interface: body text, borders, dividers, disabled states, backgrounds and shadows. Design systems usually define a full gray scale and pick one temperature for it, cool grays next to blue brands and warm grays next to earthy ones. Pure black text on pure white can feel harsh on large screens, so many sites use a very dark gray for body copy.

Accessibility tip: #767676 is the lightest neutral gray that passes AA for normal text on white, at 4.54:1. CSS gray (#808080) fails at 3.94:1, so don't use it for body text or placeholders.

Other color families

Related tools