Gray Shades
Every named color in the gray family, with computed conversions and contrast data — membership derived by computed hue, not a hand-maintained list. 28 colors shown below.
Quick facts (computed from this family's 28 members)
- Average lightness: 55%
- Average saturation: 5%
- 9 of 28 pass WCAG AA as normal text on white
- 20 of 28 pass WCAG AA as normal text on black
- Lightest named member: Gainsboro
- Darkest named member: charcoal
- Most saturated member: battleship grey
The color science
Gray, by definition, has zero saturation — it's the hue-less line running from black to white in HSL space, which is why 'hue' doesn't strictly apply to true gray at all; grays in this family are grouped by very low saturation (under roughly 12%) rather than by a hue-degree range the way every other family on this site is. Any hue at 0% saturation and any lightness between black and white is, mathematically, gray, which is why the computed membership test for this hub works differently from every other hue-family page. In print, achieving a genuinely neutral gray is harder than it sounds: mixing cyan, magenta, and yellow ink in supposedly equal proportions rarely produces a perfectly neutral gray in practice, because real ink pigments absorb and reflect light slightly differently from the theoretical ideal — professional print production typically adds a separate, carefully calibrated 'cool gray' or 'warm gray' spot-ink specifically to sidestep this problem rather than trusting a CMY mix to land neutral. Human vision is also genuinely more sensitive to small brightness differences among grays than to equivalent numeric differences in saturated colors, part of why banding artifacts (visible steps instead of a smooth gradient) show up first and most obviously in gray-to-gray gradients rather than in colorful ones at the same bit depth — a real perceptual sensitivity, not just a rendering quirk. Astronomers use a related idea, the 'gray card' reference and neutral density filters, to standardize brightness measurements across observations taken under different conditions, a technical use of true neutral gray that long predates any consumer photography convention.
Common uses in design
Gray is the structural backbone of nearly every modern UI design system — text, borders, backgrounds, and disabled states are almost universally built from a gray scale, precisely because gray doesn't compete with a brand's actual accent colors and provides the neutral canvas everything else sits on top of visually. Photography and film have their own long relationship with gray specifically through the '18% gray card,' a standardized mid-tone reference photographers have used since the mid-20th century to calibrate exposure meters — a genuinely practical, technical use of a specific gray value that predates any digital design-system convention by decades. Gray also carries a distinct symbolic role in language and branding as the color of compromise and neutrality — 'gray areas' as a metaphor for ambiguity is common enough across English-speaking contexts that it's become a default shorthand for 'undecided' well beyond any visual design context, feeding back into why gray reads as the safe, non-committal choice for interface chrome that shouldn't compete for attention. Corporate and institutional branding also leans on gray heavily as a 'serious, understated' signal — professional-services and legal branding in particular favor gray paired with a single accent color specifically to avoid any hint of the frivolity brighter, more saturated palettes can sometimes suggest.
Accessibility notes
Gray-on-gray text is one of the most common real-world WCAG failures in production software — mid-gray text (#999999-ish) on a white background sits right around 2.8:1, well under the 4.5:1 AA floor, which is why accessible design systems typically restrict body text to darker grays (#595959 or below on white) and reserve lighter grays for disabled or decorative-only elements that don't carry required-reading information. Because gray carries no hue information at all, it's immune to any color-vision-deficiency-related confusion by definition — the one accessibility caveat unique to gray is that a UI relying purely on subtly different lightness steps of gray to separate distinct elements (a card border barely distinguishable from its background, say) can fail for low-vision users the same way low-contrast color pairs do, even without any hue involved. Because a gray scale often needs the widest usable range of any single family in a design system — from a near-white background through a near-black heading — verifying contrast at every adjacent pair in the ramp (not just the lightest and darkest steps) is the only reliable way to confirm the whole scale is safe to combine in every direction a component might actually need. A common, genuinely useful technique is to publish the exact contrast ratio each gray step achieves against both a pure-white and pure-black surface directly in the design-system documentation, so engineers can pick the correct step for a given use case without re-testing it themselves each time.
Named examples
Gainsboro is the most distinctively named gray in the CSS set, traditionally attributed to the pale gray fabric associated with 18th-century English painter Thomas Gainsborough's portrait subjects, though the exact etymology is debated among color historians; DimGray and LightGray sit at opposite ends of the same neutral scale. The CSS Color Module also formally supports both American ('Gray') and British ('Grey') spellings as exact synonyms for the same hex values across this entire family (Gray/Grey, DarkGray/DarkGrey, DimGray/DimGrey, LightGray/LightGrey, SlateGray/SlateGrey, and more) — a deliberate spec accommodation rather than an oversight, since both spellings see genuine everyday use. Silver, though technically its own distinct named metallic reference rather than a plain gray, sits close enough in hue and saturation that it's frequently grouped with this family in casual conversation despite carrying a metallic-luster connotation that a flat gray swatch on screen can't fully replicate without an actual reflective material or gradient treatment. Slate, another commonly referenced gray-family name rooted in the fine-grained metamorphic rock long used for roofing and writing tablets, typically carries a faint cool-blue cast that distinguishes it from a fully neutral gray at the same lightness.
Building a gray design-token scale
Gray is the one hue family where nearly every mature design system ships a genuinely long numbered ramp (Tailwind's gray/slate/zinc/neutral/stone scales each run 11 steps; GitHub's Primer design system ships a similarly long neutral scale) because so much of an interface — body text, borders, disabled states, dividers, secondary backgrounds — needs a gray, and a single gray value is never enough range to cover all of those roles at readable contrast. Many systems now ship several competing gray scales with subtly different color casts (cool blue-gray vs. warm brown-gray) rather than one, since a pure, hue-less gray can look slightly sickly next to a saturated brand color, and a gray with a faint cast toward the brand hue often reads as more intentional and considered. Building a gray scale from scratch is also one of the few places where checking OKLCH lightness rather than raw HSL lightness genuinely matters in practice, since a numerically even HSL gray ramp can still look unevenly spaced to the eye — a mismatch that shows up immediately in a long, carefully inspected neutral scale in a way it's easier to overlook in a shorter, more colorful ramp. Because a gray scale is reused across so many unrelated UI roles at once, changing it later in a mature product is one of the riskier design-system migrations to make — unlike a single accent color, a gray-ramp change ripples into borders, disabled states, secondary text, and dividers simultaneously across the entire interface. For that reason, many teams treat their gray scale as one of the first design tokens to lock down and document thoroughly, well before finalizing more visible brand-accent colors that are comparatively cheap to revisit later.