Light Gray Background
#D3D3D3 · rgb(211, 211, 211)
About the light gray background
Light gray (#D3D3D3) is an even, 83% gray with no color cast at all — rgb(211, 211, 211). Because it carries no hue, it makes a famously honest backdrop: colors placed on it look like themselves, which is exactly what you want in design mockups and photo staging.
It's also the classic 'app canvas' color. Light gray separates white cards and panels from the page behind them, giving interfaces depth without introducing any visual noise.
What to use a light gray background for
- UI canvas behind white cards and modals
- Neutral studio-style backdrop for product mockups
- Disabled-state fills and subtle dividers
- Photography sweep for neutral, shadow-friendly shots
How to use light gray in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page light gray background */
body {
margin: 0;
background-color: #D3D3D3;
}
/* A single section or element */
.hero {
background-color: rgb(211, 211, 211);
} Light Gray shades and tints
Click any swatch to copy it. Tints mix light gray with white; shades mix it with black.
Light Gray background FAQ
What's the difference between light gray and silver?
They're close: light gray is #D3D3D3 (rgb 211,211,211) and silver is #C0C0C0 (rgb 192,192,192). Silver is about a step darker and slightly more metallic-looking.
Can I use dark text on a light gray background?
Absolutely — #D3D3D3 against black measures about 14:1, double the WCAG AAA requirement of 7:1, so any dark text is comfortably readable.
What is the hex code for light gray?
Light Gray is #D3D3D3 in hexadecimal, rgb(211, 211, 211) in RGB and hsl(0, 0%, 83%) in HSL. Paste #D3D3D3 into any CSS background-color property to use it.
How do I set a light gray background in CSS?
Add background-color: #D3D3D3; to any element, or apply it to the whole page: body { background-color: #D3D3D3; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(211, 211, 211) — with identical results.