Grey Color

About grey

CSS accepts both spellings: grey and gray are the same color, #808080, with every channel at 128. Every shade of gray has equal R, G and B values; only the level changes.

Mathematically #808080 is the middle of the 0–255 range, but it does not look like a perfect mid-gray, because screen values are gamma-encoded. There is also a well-known CSS quirk inherited from the old X11 color list: darkgray (#A9A9A9) is lighter than gray.

#808080 is the value of the CSS named color grey, defined in the CSS Color specification and identical in every browser.

Other colors called grey

• Dim gray (CSS) #696969Darker, readable as body text on white.Copy
• Dark gray (CSS) #A9A9A9Despite the name, lighter than gray.Copy

Grey shades and tints

Shades mix grey with black, tints mix it with white — useful for hover states, borders and backgrounds. Click a swatch to copy its HEX code.

Colors that go with grey

Grey is a neutral with no hue, so it has no complementary or triadic colors of its own. Neutrals go with almost any color — pick an accent in the color wheel or the palette generator.

Grey contrast and readability

On a grey background, black text reads best (5.31:1). Here is how grey works as a text color:

#808080 is readable on white only for large text. For body text, use a darker gray such as dimgray (#696969) or #595959; use lighter grays for borders, dividers and disabled states.

Using grey in CSS and HTML

:root {
  --color-grey: #808080;
}

.highlight {
  background-color: var(--color-grey);
}

.banner {
  background-color: grey;
  color: #000000;
}

.label {
  color: #808080;
  border: 2px solid rgb(128, 128, 128);
}

<p style="background-color: #808080; color: #000000;">
  Grey background
</p>