CSS Named Color
Copy-ready color values
HEX
#A9A9A9RGB
rgb(169, 169, 169)HSL
hsl(0, 0%, 66%)HSV
hsv(0, 0%, 66%)CMYK approx.
cmyk(0, 0, 0, 34)Color value table
| Format | Value | Copy |
|---|---|---|
| HEX | #A9A9A9 | |
| RGB | rgb(169, 169, 169) | |
| HSL | hsl(0, 0%, 66%) | |
| HSV | hsv(0, 0%, 66%) | |
| CMYK approx. | cmyk(0, 0, 0, 34) | |
| CSS keyword | darkgray |
Contrast and classification
LightLightness2.35:1Contrast with white8.94:1Contrast with blackGrayscaleColor family
Shade and tint preview
White 10%#B2B2B2
White 30%#C3C3C3
White 70%#E5E5E5
White 90%#F6F6F6
Black 10%#989898
Black 30%#767676
Black 70%#333333
Black 90%#111111
Harmony palettes
Complementary
#565656#7F7F7FAnalogous
#A9A9A9#A9A9A9Triadic
#A9A9A9#A9A9A9Split complementary
#747474#474747Using Darkgray
Darkgray 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-darkgray: #a9a9a9;
}
.button-primary {
background: var(--color-darkgray);
color: #000000;
}
$darkgray: #a9a9a9;
// Tailwind arbitrary value
class="bg-[#a9a9a9] text-white"