Charcoal color guide

#36454F
HEX
#36454F
RGB
rgb(54, 69, 79)
HSL
hsl(204, 19%, 26%)
CMYK
cmyk(32%, 13%, 0%, 69%)

A dark grey with a blue undertone. Softer than black for body text and the standard dark surface in most modern systems.

Best for
Body text and dark UI surfaces.

Accessibility

Charcoal text on whiteAAA
Sample9.9:1
White text on charcoalAAA
Sample9.9:1
Charcoal text on blackFail
Sample2.12:1
Black text on charcoalFail
Sample2.12:1

Ratios follow WCAG 2.1. AA needs 4.5:1 for body text, AAA needs 7:1; large text passes AA at 3:1.

Colors that go with charcoal

Combinations that hold up in a real layout rather than only on the colour wheel.

Charcoal color harmonies

Complementary
The opposite hue — highest contrast, best used sparingly.
#36454F #4F4036
Analogous
Neighbouring hues that sit together calmly.
#364F4C #36454F #36384F
Triadic
Three evenly spaced hues — vivid but balanced.
#36454F #4F3645 #454F36
Split complementary
Softer than complementary, with the same tension.
#36454F #4F3638 #4F4C36

Charcoal shades and tints

The same hue and saturation across ten lightness steps — the basis of a usable colour ramp in a design system.

#F0F3F5#D1DAE0#B3C2CB#95A9B7#7691A2#5D7789#485D6A#34424C#1F282E#111518

Charcoal FAQ

What is the hex code for charcoal?

Charcoal is #36454F. In other formats that is rgb(54, 69, 79), hsl(204, 19%, 26%), and approximately cmyk(32%, 13%, 0%, 69%) for print.

What colors go with charcoal?

White, Coral, Gold all pair well with charcoal. Body text and dark UI surfaces.

Is charcoal accessible for text?

Yes — charcoal text on white reaches 9.9:1, which passes WCAG AA for body text.

Should text on charcoal be black or white?

Use white text. It gives the higher contrast ratio of the two against #36454F.

More neutral colors