Light Gray #D3D3D3
Light gray is a pale neutral gray with hex code #D3D3D3, matching the CSS 'lightgray' keyword. It has no hue, so it is neither warm nor cool, and it sits much closer to white than to black. It looks like fog, concrete dust or newsprint, and in design it reads as soft and unobtrusive.
#D3D3D3 is CSS 'lightgray' (also spelled 'lightgrey'). CSS also has 'gainsboro' (#DCDCDC), which is slightly lighter.
| HEX | #D3D3D3 | |
|---|---|---|
| RGB | rgb(211, 211, 211) | |
| HSL | hsl(0, 0%, 83%) | |
| HSV | hsv(0, 0%, 83%) | |
| CMYK | cmyk(0%, 0%, 0%, 17%) |
Text on Light Gray
Black text reads better on Light Gray. Ratios use the WCAG 2 formula: 4.5:1 passes AA for body text, 3:1 passes for large text.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
Colors that go with Light Gray
Light Gray tints and shades
Tints mix Light Gray with white, shades mix it with black, in 15% steps. Copy any code, or open the tint and shade generator for a full scale.
Tints
Shades
Light Gray color meaning
Light gray is the most neutral of neutrals. It suggests calm, balance and restraint, and people rarely have strong feelings about it either way, which makes it reliable for backgrounds and supporting roles. Many people use it simply because it goes with everything.
It can also feel cool or a little detached, like an overcast sky or an empty office. Paired with warmer colors, that coolness turns into a clean, modern look. Light gray rooms with warm wood or textiles feel restful; with only white and steel, they can feel sterile.
Culturally it has few fixed meanings. Most of its associations come from where it appears: concrete architecture, minimalist interiors, tech hardware and wintry weather. Because it carries so little baggage, it travels well across markets and audiences.
How to use Light Gray in design
Light gray is a workhorse in interface design for borders, dividers, input fields and card backgrounds. Dark text reads well on it. As a text color on white, though, it is too faint for body copy and should be kept for decorative elements. White text on light gray is not readable.
In branding it rarely leads but makes a calm base for saturated accent colors. In interiors, light gray walls are popular because they go with almost any furniture. In fashion it is the color of classic marl sweatshirts and lightweight suits.
Palettes with Light Gray tones
Curated palettes with a color close to #D3D3D3.
Colors similar to Light Gray
Work with Light Gray
Light Gray FAQ
Can I use light gray for text?
Only in limited ways. On a white background, light gray text is too faint for body copy or anything people need to read. It works for decorative labels or large, nonessential type. On a dark background, light gray makes a softer alternative to white text.
What colors go with light gray?
Nearly anything. Navy and charcoal give it contrast. Mustard, coral and blush pink bring warmth, which keeps a gray room or layout from feeling cold. Teal, cobalt and emerald make bold accents. Light gray also pairs with white for a clean, minimal palette.