CSS Named Color
Copy-ready color values
HEX
#696969RGB
rgb(105, 105, 105)HSL
hsl(0, 0%, 41%)HSV
hsv(0, 0%, 41%)CMYK approx.
cmyk(0, 0, 0, 59)Color value table
| Format | Value | Copy |
|---|---|---|
| HEX | #696969 | |
| RGB | rgb(105, 105, 105) | |
| HSL | hsl(0, 0%, 41%) | |
| HSV | hsv(0, 0%, 41%) | |
| CMYK approx. | cmyk(0, 0, 0, 59) | |
| CSS keyword | dimgray |
Contrast and classification
DarkLightness5.49:1Contrast with white3.83:1Contrast with blackGrayscaleColor family
Shade and tint preview
White 10%#787878
White 30%#969696
White 70%#D2D2D2
White 90%#F0F0F0
Black 10%#5F5F5F
Black 30%#4A4A4A
Black 70%#202020
Black 90%#0B0B0B
Harmony palettes
Complementary
#969696#AFAFAFAnalogous
#696969#696969Triadic
#696969#696969Split complementary
#A9A9A9#7B7B7BUsing Dimgray
Dimgray works best when it is chosen with contrast, surrounding colors, and interface state in mind. Use the HEX value for static CSS, RGB when you need channel-level control, and HSL when adjusting lightness or saturation for hover states. The CMYK value is an approximate screen-to-print conversion, so print workflows should still rely on calibrated design software or a printer profile.
CSS, SCSS, and Tailwind examples
:root {
--color-dimgray: #696969;
}
.button-primary {
background: var(--color-dimgray);
color: #ffffff;
}
$dimgray: #696969;
// Tailwind arbitrary value
class="bg-[#696969] text-white"