CSS Color: LightGray
Named CSS color LightGray — #D3D3D3 in HEX, rgb(211, 211, 211) in RGB, hsl(0, 0%, 83%) in HSL.
Color Values
| Format | Value | CSS Usage |
|---|---|---|
| Named | LightGray | color: LightGray; |
| HEX | #D3D3D3 | color: #D3D3D3; |
| RGB | rgb(211, 211, 211) | color: rgb(211, 211, 211); |
| HSL | hsl(0, 0%, 83%) | color: hsl(0, 0%, 83%); |
About LightGray
LightGray is a gentle, light neutral gray at hex `#D3D3D3`. With all RGB channels at 211 and 83% lightness, it provides just enough contrast against white to define boundaries while remaining very subtle.
In web design, LightGray is one of the most frequently used colors for borders, table lines, card backgrounds on white pages, and input field backgrounds. It creates gentle visual structure without the harshness of darker grays.
For accessibility, LightGray against white achieves only about 1.5:1 contrast — insufficient for text but appropriate for decorative borders. Against dark backgrounds, it provides excellent readability as a light, neutral text alternative to white.
LightGray is lighter than Silver and DarkGray. It pairs with everything and is especially useful in clean, minimalist designs. In Tailwind CSS, `gray-300` or `zinc-200` provide similar values.
FAQ
What is the hex code for LightGray?
The CSS named color LightGray has the hex code #D3D3D3. You can use it in CSS as color: #D3D3D3; or simply color: LightGray;.
What is LightGray in RGB?
In RGB notation, LightGray is rgb(211, 211, 211). Use it in CSS as color: rgb(211, 211, 211);.
What is LightGray in HSL?
In HSL notation, LightGray is hsl(0, 0%, 83%). Use it in CSS as color: hsl(0, 0%, 83%);.
What color category is LightGray?
LightGray belongs to the Gray color family in the CSS named colors specification.
Can I use the name "LightGray" directly in CSS?
Yes. All modern browsers support CSS named colors. You can write color: LightGray; or background-color: LightGray; directly in your stylesheet. Named colors are case-insensitive.
Try in Color Converter
Convert LightGray to other formats, check contrast ratios, explore palettes, and find the closest Tailwind CSS class.
Open Color Converter →