Figma color wheel
Want to find the perfect complementary or analogous colors to match light gray?
Skip to main content
Everything you need to know about light gray to inspire your next design.
Light gray is a barely there shade of gray with almost no saturation, giving it a clean and airy quality. While light gray doesn’t hold a specific position on the color wheel, it leans more closely to blue, creating a solid and minimalist vibe.

Shades
Tints
Tones
Hues
Complementary
Split
Monochromatic
Analogous
Triadic
Square
Industrial
Silver Pine
Chalkboard
Light gray is defined by the following color codes and values to ensure consistency across various digital platforms and devices.
Accessibility considerations play a crucial role in UX and UI design color choices. Figma offers plugins in the Community to make sure your designs meet Web Content Accessibility Guidelines.
Here are some ways to use light gray in your designs:
Keep in mind that color and its meaning can change from culture to culture—and at any given time. If you are designing for a global audience, research color considerations for your specific regions.
For variations within the same minimalist spectrum as light gray, consider:
To complement light gray, consider pairing it with:
Other colors worth considering include ivory to create a more natural color scheme, celadon for a floral aesthetic, and brown for a grounded vibe.
While light gray is modest, it may clash with:
Light gray symbolizes intelligence, wisdom, and refinement. It can generate feelings of wistfulness for the past or hope for a clean slate and a yet-to-be-written future.
In color psychology, light gray’s calming neutral undertones evoke feelings of impartiality and emotional detachment. Offices and legislative buildings around the world incorporate this color to create a formal and unbiased atmosphere.
In UI design, light gray is ideal for avoiding inciting strong emotions among users. It’s an optimal color for traditional font styles like Arial or Times New Roman, which allows users to focus more on the information your text conveys rather than its appearance.
Light gray was extremely prominent in medieval communities since wool naturally resembled this color, and woolen clothes were accessible to the public. The sheer number of medieval castles and statues tinted light gray also speaks to this color’s importance.
Contemporary structures, such as the Flatiron Building in Manhattan, New York, prominently feature the color light gray in everything from brickwork to statues to decorative designs.
Contrast 1.5
#D3D3D3
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Fail | Fail | |
Fail | Fail | |
Fail | Fail |
Contrast 14.03
#D3D3D3
How you design, align, and build matters. Do it together with Figma.
| Category | ||
|---|---|---|
Pass | Pass | |
Pass | Pass | |
Pass | Pass |
Protanopia
Deuteranopia
Tritanopia
Achromatopsia
The hexadecimal color #D3D3D3, known as light gray, has RGB values of R:211, G:211, B:211 and CMYK values of C:0, M:0, Y:0, K:0.17.
| VALUE | CSS | |
|---|---|---|
| HEX | D3D3D3 | #D3D3D3 |
| RGB DECIMAL | 211, 211, 211 | RGB(211,211,211) |
| RGB PERCENTAGE | 82.7, 82.7, 82.7 | RGB(82.7%,82.7%,82.7%) |
| CMYK | 0, 0, 0, 17 | |
| HSL | 0°, 0, 82.7 | HSL(0°,0%,82.7%) |
| HSV (OR HSB) | 0°, 0, 82.7 | |
| WEB SAFE | CCCCCC | #CCCCCC |
| CIE-LAB | 84.556, -0, -0.007 | |
| XYZ | 61.914, 65.141, 70.936 | |
| xyY | 0.313, 0.329, 65.141 | |
| CIE-LCH | 84.556, 0.007, 266.929 | |
| CIE-LUV | 84.556, -0.005, -0.011 | |
| HUNTER-LAB | 80.71, -4.311, 4.387 | |
| BINARY | 11010011, 11010011, 11010011 | |
| iOS - SwiftUI | Color(red: 0.8275, green: 0.8275, blue: 0.8275) | |
| iOS - UIKit | UIColor(red: 0.8275, green: 0.8275, blue: 0.8275, alpha: 1.0) | |
| Android - Compose | Color(0xFFD3D3D3) |
Want to find the perfect complementary or analogous colors to match light gray?
Unlock the peace and calm of off-white.
Explore the sleek, subtle essence of cool gray.