#696969Dimgray is a dark neutral — a gray that works as a supporting color rather than a statement. Also written as dimgrey in CSS — both spellings resolve to #696969.
Dimgray sits at 41% 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.
With a 5.49:1 contrast ratio against white, dimgray is dark enough to carry white text at any size — use it confidently for buttons, headers and filled UI elements. Against black text it manages 3.83:1, so stick with white type on dimgray surfaces.
Every palette below is computed from dimgray's position on the color wheel (hue 0°). Hover any swatch to see its code; click to copy.
Tints mix dimgray 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 dimgray 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 Dimgray | 5.49:1 | AA | AAA |
| Black text on Dimgray | 3.83:1 | Fail | AA |
#696969#696969#696969Copy-ready snippets. In CSS you can also use the keyword dimgray directly.
:root {
--dimgray: #696969;
--dimgray-rgb: 105, 105, 105;
--dimgray-tint: #ACACAC;
--dimgray-shade: #3A3A3A;
}
.btn-dimgray {
background: var(--dimgray);
color: #ffffff;
}// tailwind.config.js
colors: {
'dimgray': {
DEFAULT: '#696969',
light: '#ACACAC',
dark: '#3A3A3A',
},
}The closest CSS named colors by perceptual (Lab) distance.