About Light Gray
Light Gray (lightgray) is a very light, muted gray with the hex code #d3d3d3, or rgb(211, 211, 211). In HSL it sits at a hue of 0°, 0% saturation and 83% lightness. CSS also accepts the spelling lightgrey for exactly the same color. It is one of the 148 named colors every browser understands, so you can write color: lightgray; instead of the hex value.
Using Light Gray for text and backgrounds
| Pairing | Contrast ratio | WCAG |
|---|---|---|
| Light Gray text on white | 1.50 : 1 | fails |
| Light Gray text on black | 14.03 : 1 | AAA |
On a light gray background, use black text (14.03 : 1). WCAG asks for at least 4.5 : 1 for body text and 3 : 1 for large text. Check other pairs with the Contrast Checker.
CSS
.element {
color: lightgray; /* or #d3d3d3 */
background-color: #d3d3d3;
border: 1px solid rgb(211 211 211 / 50%);
}Similar named colors
Gainsboro (#dcdcdc), Thistle (#d8bfd8), Silver (#c0c0c0), Light Steel Blue (#b0c4de), Powder Blue (#b0e0e6), Light Blue (#add8e6).
Color Name FinderPaste a HEX code to get its closest human-readable name and clean token names for your CSS, SCSS, JavaScript or Tailwind config.
Open the tool Frequently asked questions
What is the hex code for light gray?
#d3d3d3 — that is rgb(211, 211, 211) and hsl(0, 0%, 83%). In CSS you can also just write lightgray.
Is light gray text readable on white?
Its contrast ratio on white is 1.50 : 1, which fails WCAG — use it for decoration or on a dark background instead.
What colors go well with light gray?
Light Gray is a neutral, so it pairs with almost any color; use it for backgrounds, borders and text around a stronger accent.