Charcoal gray color: code #36454F

Charcoal gray

#36454F

Color codes

  • HEX#36454F
  • RGBrgb(54, 69, 79)
  • HSLhsl(204, 19%, 26%)
  • HSVhsv(204, 32%, 31%)
  • CMYKcmyk(32%, 13%, 0%, 69%)
  • LABlab(28.4% -3.3 -8)
  • OKLCHoklch(38.1% 0.026 237.5)

About the color Charcoal gray

Charcoal gray has the HEX code #36454F, which corresponds to rgb(54, 69, 79) in the RGB model. On the color wheel its hue sits at 204°, with 19% saturation and 26% lightness (hsl(204, 19%, 26%)).

Because of its hue it reads as a cool color: it tends to feel calm and distant, and it visually “recedes” in a composition.

As a background it calls for light text: white reaches a 9.90:1 contrast ratio on it, versus 2.12:1 for black.

For print, the approximate conversion is cmyk(32%, 13%, 0%, 69%). Always confirm with your printer’s color profile, because the result depends on paper and ink.

Lighter tints

Darker shades

Color combinations with Charcoal gray

Complementary

#36454F · #4F4036

Analogous

#364F4C · #36454F · #36384F

Triadic

#36454F · #4F3645 · #454F36

Tetradic

#36454F · #4C364F · #4F4036 · #384F36

Split-complementary

#36454F · #4F3638 · #4F4C36

Monochromatic

#020303 · #212A31 · #36454F · #556D7C · #7993A4

Charcoal gray with white and black text

White text Aa Bb Cc 123
9.90:1 · AAA
Black text Aa Bb Cc 123
2.12:1 · fails WCAG

Test other pairs in the contrast checker

Charcoal, graphite or slate?

The charcoal gray on this page, #36454F (rgb(54, 69, 79)), is a dark gray with a bluish base: blue is the highest channel, followed by green. The name comes from the black-gray of burnt wood, and in everyday use “charcoal,” “graphite” and “slate” overlap a lot, though graphite tends to be more neutral and slate more blue. There is no charcoal keyword among CSS named colors; the nearest is darkslategray (#2F4F4F), which leans greener.

Why many designers swap black for charcoal

In interfaces, pure black text on white hits 21:1, the maximum possible. Charcoal on white comes in around 9.9:1, well above the 7:1 AAA threshold but with a less harsh edge. That is why many design systems use dark bluish grays for text and icons instead of #000000. The slight cool tint also sits better next to blue brand colors than a neutral gray does.

Off screen, charcoal reads as serious, discreet and modern in most Western contexts: suits, coats, cars, facades and window frames. In interiors, charcoal walls make rooms feel cozy and act as a gallery backdrop for art and light wood; in small, dim rooms, though, they can feel heavy.

Pairings

Being almost neutral, charcoal accepts nearly any accent color. A few that shine:

  1. Mustard (#FFDB58): warmth and contrast, an interiors favorite.
  2. Baby pink (#F4C2C2): softens without losing sophistication.
  3. Lime green (#32CD32): athletic energy.
  4. Terracotta (#E2725B): urban with a handmade touch.
  5. Off-white (#FAF9F6): the ideal light background for charcoal text.

Charcoal in dark mode

In a dark theme, charcoal changes jobs: it stops being a text color and becomes a surface. As the background for cards and sidebars over a near-black base, it creates layers of depth, and white text on #36454F keeps the same 9.9:1. Just don’t use charcoal as text on a dark background: on #121212 the ratio drops below 2:1. For that role, lighten it to something like #8FA3B0. Check it in the contrast checker and see how to structure themes in the website color palette guide.

How to use it in CSS

:root {
  --color-charcoal-gray: #36454F;
  --color-charcoal-gray-rgb: 54, 69, 79;
}

.elemento {
  background-color: var(--color-charcoal-gray);
  color: #FFFFFF;
}

Similar colors

Use Charcoal gray in our tools