#A9A9A9Darkgray is a mid-toned neutral — a gray that works as a supporting color rather than a statement. Also written as darkgrey in CSS — both spellings resolve to #A9A9A9.
Darkgray sits at 66% lightness with almost no saturation, which makes it a true workhorse neutral. In practice it behaves best as a border, divider or secondary-text color: it stays out of the way, lets accent colors do the talking, and pairs safely with nearly any hue on the wheel.
Darkgray is bright enough that it pairs better with dark text than white: black type on darkgray hits 8.94:1 — comfortably past the WCAG AA threshold — while white manages only 2.35:1. It shines as a section background, card fill or subtle highlight where a full-strength accent would shout.
Every palette below is computed from darkgray's position on the color wheel (hue 0°). Hover any swatch to see its code; click to copy.
Tints mix darkgray toward white; shades mix it toward black. Use the scale for hover states, borders and depth without leaving the hue.
WCAG 2.1 requires 4.5:1 for normal text (AA) and 3:1 for large text. Here's how darkgray performs, plus how it appears under the three main types of dichromatic color blindness (simulated approximation).
| Pairing | Ratio | Normal text | Large text |
|---|---|---|---|
| White text on Darkgray | 2.35:1 | Fail | Fail |
| Black text on Darkgray | 8.94:1 | AAA | AAA |
#A9A9A9#A9A9A9#A9A9A9Copy-ready snippets. In CSS you can also use the keyword darkgray directly.
:root {
--darkgray: #A9A9A9;
--darkgray-rgb: 169, 169, 169;
--darkgray-tint: #D0D0D0;
--darkgray-shade: #5D5D5D;
}
.btn-darkgray {
background: var(--darkgray);
color: #000000;
}// tailwind.config.js
colors: {
'darkgray': {
DEFAULT: '#A9A9A9',
light: '#D0D0D0',
dark: '#5D5D5D',
},
}The closest CSS named colors by perceptual (Lab) distance.