UI Shades

A study in gray

Light Gray

#D3D3D3

also known as lightgrey

Family
Gray
L
0.867
C
0.000
H
-

Notes

Light Gray in CSS is a pale neutral useful for dividers, disabled-state surfaces, and quiet backgrounds. The hex has no obvious warm or cool cast, which keeps it versatile across mixed-temperature palettes. It pairs with any darker neutral or saturated accent. Against white it provides enough separation for borders and quiet surfaces; against mid-gray text it carries decent but not strong contrast, so verify accessibility for secondary text use. Body text on a Light Gray surface should use deep charcoal or near-black to maintain legible AA contrast at body sizes.

#d3d3d3
Light Gray
Light Gray
#d3d3d3
oklch(0.867 0 0)
rgb(211 211 211)
hsl(0 0% 82.7%)
Share
#fafafa
#f4f4f4
#e5e5e5
#d3d3d3
#b4b4b4
#8b8b8b
#737373
#5e5e5e
#444444
#2d2d2d
#171717

See your palette on a real UI - coming soon

Preview these shades across buttons, cards, and components in a live interface.

Plate 02

Palette built around Light Gray

Cross-reference
Q&A

Frequently asked questions

What is Light Gray?

Light Gray in CSS is a pale neutral useful for dividers, disabled-state surfaces, and quiet backgrounds. The hex has no obvious warm or cool cast, which keeps it versatile across mixed-temperature palettes. Its hex code is #D3D3D3.

What are the tints and shades of Light Gray?

uishades builds an 11-step OKLCH ramp for Light Gray (#D3D3D3) - its lightest tints through its darkest shades - plus an 11-stop Tailwind scale (50–950), both keyed to the same 50–950 stops. Lightness steps stay evenly spaced and the hue stays stable, so the mid-tones don't go muddy.

What colors pair well with Light Gray?

Its complementary color is #D3D3D3. Triadic partners are #D3D3D3 and #D3D3D3; analogous neighbours are #D3D3D3 and #D3D3D3.

What are the OKLCH and RGB values of Light Gray?

Light Gray is #D3D3D3 - OKLCH 0.867 0.000 0°, rgb(211 211 211), in the gray family. Also known as lightgrey.