Gray color: #808080
The CSS keyword gray (also written grey) is #808080, rgb(128, 128, 128) or hsl(0, 0%, 50%). Its codes to copy, 50–950 tint scale, harmonies and contrast on white and black.
Part of design tools.
About Gray
Gray is a neutral gray at 60% perceived lightness, with no hue at all. Having no hue, it reads the same in every color space: only its lightness changes between notations.
The keyword gray is one of the sixteen original HTML 4 colors, the whole palette of CSS 1, so it is understood by every browser and every email client ever shipped. It can also be written grey: same value, and both spellings work in any stylesheet.
CSS gray (#808080) is darker than darkgray (#a9a9a9). HTML 4 and the X11 list disagreed on gray, and CSS kept the HTML value for gray while taking darkgray from X11 unchanged — a mismatch no browser can fix now without breaking existing pages.
Gray tint scale, 50 to 950
Eleven neutral steps at fixed perceived lightness, in OKLCH: every pure grey shares this scale, and what sets each one apart is where it sits on it. The keyword itself falls closest to step 500 (#868686), the one outlined.
Harmonies built on Gray
Gray has no hue, so there is nothing to rotate: a complementary or triadic scheme would give back the same grey. What remains is the monochromatic scheme — the same neutral at four lightness steps.
Monochromatic
Gray on white and on black
Black text reads better on gray (5.31:1). As a text color it belongs on a dark background: on white it only reaches 3.94:1, under the 4.5:1 that body text needs, while on black it reaches 5.31:1. AA asks 4.5:1 for body text and 3:1 for large text; AAA asks 7:1.
Named colors close to Gray
Open gray in the full tools
- Open in Color Converter — convert it to any other notation.
- Open in Palette Generator — export its scale as --gray-50 … --gray-950 tokens.
- Open in Color Harmonies — turn the wheel and compare OKLCH with HSL.
- Open in Contrast Checker — test it against any background, with the closest passing shade.
- Open in Color System Generator — derive a light and dark token set from it.
Or browse every named color from the color converter.