UI Shades

A study in gray

Gainsboro

#DCDCDC

Family
Gray
L
0.894
C
0.000
H
-

Notes

Gainsboro is the very light gray named after a town in Lincolnshire, England, by way of the eighteenth-century painter Thomas Gainsborough. The CSS hex is a quiet, balanced gray with no obvious cool or warm cast, which makes it a useful neutral for borders, dividers, and disabled-state surfaces in interface design. Against white it provides just enough separation to read as a distinct layer without competing for attention. Body text on Gainsboro surfaces should use a deep charcoal or near-black to maintain legible contrast at all sizes.

#dcdcdc
Gainsboro
Gainsboro
#dcdcdc
oklch(0.894 0 0)
rgb(220 220 220)
hsl(0 0% 86.3%)
Share
#fafafa
#f4f4f4
#e5e5e5
#dcdcdc
#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 Gainsboro

Cross-reference
Q&A

Frequently asked questions

What is Gainsboro?

Gainsboro is the very light gray named after a town in Lincolnshire, England, by way of the eighteenth-century painter Thomas Gainsborough. The CSS hex is a quiet, balanced gray with no obvious cool or warm cast, which makes it a useful neutral for borders, dividers, and disabled-state surfaces in interface design. Its hex code is #DCDCDC.

What are the tints and shades of Gainsboro?

uishades builds an 11-step OKLCH ramp for Gainsboro (#DCDCDC) - 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 Gainsboro?

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

What are the OKLCH and RGB values of Gainsboro?

Gainsboro is #DCDCDC - OKLCH 0.894 0.000 0°, rgb(220 220 220), in the gray family.