19 Shades of Gray with Hex Codes

Named Gray Colors and Their Hex Codes

Ordered darkest to lightest. Names marked CSS are color keywords you can write directly in a stylesheet; the rest are common design and print names. Select any swatch for its full breakdown.

Gray Color Chart: Hex, RGB, HSL & CMYK

Every gray above in all four common formats. CMYK is a mathematical approximation for planning; confirm production print colors with your printer and ICC profile.

Gray Scale from Light to Dark

A 12-step lightness scale built from the core gray hue, holding hue and saturation constant. This is the shape of a design-system color ramp. Select any swatch for the full breakdown of that color.

Need a perceptually even ramp with semantic roles and contrast evidence? Generate gray design tokens.

What Gray Communicates

Most of a well-built interface is gray. The decision that matters is not which gray but whether it is truly neutral: adding a few degrees of blue or warmth to your gray ramp changes the whole feel of a product. Pure #808080 sits at a contrast ratio just under 4:1 against white, which means the middle of your gray scale is exactly where text accessibility breaks.

Where gray works well

• Body text, borders, dividers, and disabled states
• Neutral backgrounds and surface layers in light and dark themes
• Cool slate ramps for modern software interfaces
• Photography and print layouts where color would compete with the image

Colors that pair with gray

Copy the Gray Palette as CSS

Every shade on this page as CSS custom properties, ready to paste into a stylesheet.

:root {
  --gray-black: #000000;
  --gray-gunmetal: #2A3439;
  --gray-graphite: #41424C;
  --gray-charcoal: #36454F;
  --gray-darkslategray: #2F4F4F;
  --gray-dimgray: #696969;
  --gray-nickel: #727472;
  --gray-slategray: #708090;
  --gray-smoke: #738276;
  --gray-gray: #808080;
  --gray-lightslategray: #778899;
  --gray-pewter: #899499;
  --gray-darkgray: #A9A9A9;
  --gray-ash-gray: #B2BEB5;
  --gray-silver: #C0C0C0;
  --gray-lightgray: #D3D3D3;
  --gray-gainsboro: #DCDCDC;
  --gray-platinum: #E5E4E2;
  --gray-whitesmoke: #F5F5F5;
}

Gray Color Questions