Toolman

#9CA3AF color

#9CA3AF#9CA3AF

The swatch above shows #9CA3AF with its hex code written on it in white and in black, so you can see which of the two is legible before reading the measured ratios below.

#9CA3AF is a light, muted blue, closest to the CSS named color darkgray (#A9A9A9).

It is also a Tailwind CSS default: gray-400. That means you can write bg-gray-400 or text-gray-400 directly, with no arbitrary-value brackets and no entry in your theme config.

Color values

HEX#9CA3AF
RGBrgb(156, 163, 175)
HSLhsl(218, 11%, 65%)
CMYKcmyk(11%, 7%, 0%, 31%)
Decimal10265519
CSScolor: #9CA3AF;
Android0xFF9CA3AF
SwiftUIColor(red: 0.612, green: 0.639, blue: 0.686, alpha: 1)

Accessibility and contrast

White text on #9CA3AF2.54:1 — AA fail · AA large fail · AAA fail
Black text on #9CA3AF8.27:1 — AA pass · AA large pass · AAA pass
Recommended text colorblack

WCAG 2.1 asks for at least 4.5:1 for body text and 3:1 for large text (18 pt, or 14 pt bold).

Tints and shades of #9CA3AF

Each swatch keeps the hue and saturation of #9CA3AF and varies only lightness — the quickest way to build a usable scale from a single brand color.

95%
85%
75%
65%
55%
45%
35%
25%
15%

Colors that go with #9CA3AF

Harmonies generated by rotating the hue on the color wheel while holding saturation and lightness constant.

Complementary
Triadic +120°
Triadic +240°
Analogous −30°
Analogous +30°
Split −150°
Split +150°

Using #9CA3AF in code

/* CSS */
.element { color: #9CA3AF; background-color: #9CA3AF; }
.element { color: rgb(156 163 175); }
.element { color: hsl(218 11% 65%); }

/* Tailwind */
<div class="bg-gray-400 text-black">

/* SCSS variable */
$brand: #9CA3AF;

Frequently asked questions

What color is #9CA3AF?

#9CA3AF is a light, muted blue. Its hue sits at 218° on the color wheel, with 11% saturation and 65% lightness.

What is #9CA3AF in RGB?

#9CA3AF converts to rgb(156, 163, 175) — 156 red, 163 green and 175 blue.

What is #9CA3AF in CMYK?

Approximately cmyk(11%, 7%, 0%, 31%). Print output depends on the ICC profile of the press and paper, so treat this as a starting point rather than an exact match.

Should text on #9CA3AF be white or black?

Black gives the better contrast ratio (8.27:1 versus 2.54:1).

What is the complementary color of #9CA3AF?

#B0A89C — the hue directly opposite #9CA3AF on the color wheel.

Convert any color → · Browse all colors