Gainsboro color (#DCDCDC)
Gainsboro is one of the 148 CSS named colors. Use the keyword gainsboro
anywhere CSS accepts a color, or its hex code #DCDCDC, which is rgb(220, 220, 220) in RGB.
It is a light neutral and a perceived lightness of 89% in OKLCH. On a gainsboro background, black text gives the higher contrast at 15.31:1, which passes WCAG AA for normal text.
Gainsboro color codes
| CSS name | gainsboro |
|
|---|---|---|
| HEX | #DCDCDC |
|
| HEX (8-digit) | #DCDCDCFF |
|
| RGB | rgb(220, 220, 220) |
|
| HSL | hsl(0, 0%, 86%) |
|
| HSV / HSB | hsv(0, 0%, 86%) |
|
| OKLCH | oklch(89.4% 0 89.9) |
|
| CMYK | cmyk(0%, 0%, 0%, 13.7%) |
Contrast with white and black
WCAG 2 contrast ratios and APCA lightness contrast (Lc) for gainsboro used as text and as a background.
Tints and shades of gainsboro
Tints mix gainsboro with white; shades mix it with black, in 10% steps. Click a swatch to copy it, or build custom scales in the tint & shade generator.
Tints
Shades
Colors that go with gainsboro
Harmonies calculated on the HSL color wheel. Explore more in the color scheme generator.
Complementary
Analogous
Triadic
Split-Complementary
Gainsboro with color blindness
Approximately how gainsboro appears with each type of color vision deficiency. Test full designs with the color blindness simulator.
Using gainsboro in CSS
.element {
color: gainsboro;
background-color: #dcdcdc;
border-color: rgb(220 220 220 / 50%);
outline-color: oklch(89.4% 0 89.9);
}Similar named colors
See all shades of gray or browse every CSS color name.