Toolman

#4B5563 color

#4B5563#4B5563

The swatch above shows #4B5563 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.

#4B5563 is a dark, muted blue, closest to the CSS named color darkslategray (#2F4F4F).

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

Color values

HEX#4B5563
RGBrgb(75, 85, 99)
HSLhsl(215, 14%, 34%)
CMYKcmyk(24%, 14%, 0%, 61%)
Decimal4937059
CSScolor: #4B5563;
Android0xFF4B5563
SwiftUIColor(red: 0.294, green: 0.333, blue: 0.388, alpha: 1)

Accessibility and contrast

White text on #4B55637.56:1 — AA pass · AA large pass · AAA pass
Black text on #4B55632.78:1 — AA fail · AA large fail · AAA fail
Recommended text colorwhite

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 #4B5563

Each swatch keeps the hue and saturation of #4B5563 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 #4B5563

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 #4B5563 in code

/* CSS */
.element { color: #4B5563; background-color: #4B5563; }
.element { color: rgb(75 85 99); }
.element { color: hsl(215 14% 34%); }

/* Tailwind */
<div class="bg-gray-600 text-white">

/* SCSS variable */
$brand: #4B5563;

Frequently asked questions

What color is #4B5563?

#4B5563 is a dark, muted blue. Its hue sits at 215° on the color wheel, with 14% saturation and 34% lightness.

What is #4B5563 in RGB?

#4B5563 converts to rgb(75, 85, 99) — 75 red, 85 green and 99 blue.

What is #4B5563 in CMYK?

Approximately cmyk(24%, 14%, 0%, 61%). 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 #4B5563 be white or black?

White gives the better contrast ratio (7.56:1 versus 2.78:1).

What is the complementary color of #4B5563?

#63594B — the hue directly opposite #4B5563 on the color wheel.

Convert any color → · Browse all colors