Light Gray

#D3D3D3

What color is Light Gray?

Light gray is a pale, neutral tone sitting just a step or two above white, hex #D3D3D3, with a soft, even cast that reads neither warm nor cool. It shares the quiet, matte quality of unbleached linen.

What is the meaning of the color Light Gray?

The English word gray has been recorded as a color term since at least 825 AD, making it one of the oldest color names in the language. Through the 19th century, light gray became a standard in tailoring and formal dress across Britain and Europe, valued for its restraint. The Bauhaus school, founded in Weimar in 1919, elevated neutral grays as a serious design principle, separating them from associations with dullness. Apple adopted light gray as a defining surface color in its aluminum product line from the mid-2000s onward, anchoring the tone to precision and minimalism.

RGB
211, 211, 211
HSL
0°, 0%, 83%
CMYK
0, 0, 0, 17
HSV
0°, 0%, 83%
Light gray color

What colors go with Light Gray?

Colors that pair well with Light gray include:
White: clean, open contrast
Navy blue: sharp, grounding depth
Blush pink: soft, gentle warmth
Charcoal: tonal, layered balance
Mustard yellow: warm, unexpected lift

Similar Colors

Conversions & Codes

Format Value CSS
HEX #D3D3D3 color: #D3D3D3;
RGB 211, 211, 211 color: rgb(211, 211, 211);
RGB Percentage 83%, 83%, 83% color: rgb(83%, 83%, 83%);
CMYK 0%, 0%, 0%, 17% Not supported in CSS
HSL 0°, 0%, 83% color: hsl(0, 0%, 83%);
HSV 0°, 0%, 83% Not supported in CSS
CIE-LAB 66, 0, 0 color: lab(66% 0 0);
Decimal 13882323 Not supported in CSS

Color Variations

Shades

#D4D4D4
#BEBEBE
#A9A9A9
#949494
#7F7F7F
#6A6A6A
#555555
#3F3F3F

Tints

#F2F2F2
#EEEEEE
#E9E9E9
#E5E5E5
#E1E1E1
#DCDCDC
#D8D8D8
#D4D4D4

Tones

#D4D4D4
#D4D4D4
#D4D4D4
#D4D4D4
#D4D4D4
#D4D4D4
#D4D4D4
#D4D4D4

Hues

#D4D4D4
#D4D4D4
#D4D4D4
#D4D4D4
#D4D4D4
#D4D4D4
#D4D4D4
#D4D4D4

Color Harmonies

Analogous

#D4D4D4
Click to copy
#D3D3D3
Click to copy
#D4D4D4
Click to copy

Complementary

#D3D3D3
Click to copy
#D4D4D4
Click to copy

Split Complementary

#D3D3D3
Click to copy
#D4D4D4
Click to copy
#D4D4D4
Click to copy

Triadic

#D3D3D3
Click to copy
#D4D4D4
Click to copy
#D4D4D4
Click to copy

Tetradic

#D3D3D3
Click to copy
#D4D4D4
Click to copy
#D4D4D4
Click to copy
#D4D4D4
Click to copy

Square

#D3D3D3
Click to copy
#D4D4D4
Click to copy
#D4D4D4
Click to copy
#D4D4D4
Click to copy

CSS & Dev Snippets

CSS
.light-gray {
  color: #D3D3D3;
}
SCSS
$light-gray: #D3D3D3;
RGB
rgb(211, 211, 211)

Accessibility & Contrast

White background

1.50:1
1.50
contrast ratio on a white background
Element
AA
AAA
Small text
Large text
UI element

Black background

14.03:1
14.03
contrast ratio on a black background
Element
AA
AAA
Small text
Large text
UI element

Popular Tags