Light Grey Color

About light grey

#D3D3D3 is the CSS named color lightgrey, which can also be spelled lightgray. All three channels are 211, so it is a perfectly neutral gray.

It sits between gainsboro (#DCDCDC), which is a little lighter, and silver (#C0C0C0), which is darker.

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

Other colors called light grey

• Gainsboro (CSS) #DCDCDCSlightly lighter.Copy
• Silver (CSS) #C0C0C0Slightly darker.Copy

Light Grey shades and tints

Shades mix light 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 light grey

Light 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.

Light Grey contrast and readability

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

Light grey is ideal for borders, dividers, skeleton loaders and subtle backgrounds. It is far too light for text on white — use it for text only on dark backgrounds.

Using light grey in CSS and HTML

:root {
  --color-light-grey: #D3D3D3;
}

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

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

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

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