#36454F

Charcoal Gray color code

Charcoal Gray hex code: #36454F · RGB 54, 69, 79. Also called charcoal, charcoal grey.

Build a website palette from charcoal gray →

What color is charcoal gray?

Charcoal gray is a very dark gray named after burnt wood. The common reference value is #36454F, which has a noticeable blue tint. Neutral (#333333) and warm (#3D3B3A) charcoals are also common, depending on whether you want a cool or warm feel.

Charcoal is the default choice for text and dark UI when pure black feels too harsh. It's used for body copy, dark-mode surfaces, menswear, architecture and tech brands.

Charcoal on white passes WCAG AAA for body text while feeling softer than black. In dark themes, use charcoal as the surface and an off-white (not pure white) for text. Pair charcoal with almost anything: mustard, coral, blush, teal or sage all pop against it.

Charcoal Gray variants

Popular color names rarely have one official value. "Reference" values are the ones commonly listed in general color references; "HueWiz pick" values are lighter, deeper or muted versions chosen for interface work. Click a code to copy it.

Charcoal (reference value)#36454Frgb(54, 69, 79) · reference

Neutral charcoal#333333rgb(51, 51, 51) · HueWiz pick

Warm charcoal#3D3B3Argb(61, 59, 58) · HueWiz pick

Light charcoal#5A6670rgb(90, 102, 112) · HueWiz pick

Charcoal Gray on a real website

The same base color in a light and a dark theme. Surfaces and text are tinted with charcoal gray's hue; links are adjusted until they reach 4.5:1 against the surface. The accent comes from the first palette below.

light theme

StudioWorkAboutContact

Spring collection

Designed around charcoal gray.

A short paragraph shows how body text reads on this surface, with an inline link in the brand color.

Get startedLearn more

NewCard on surface with an accent badge.

Light roles · surface #F4F7FA · text #1B2023 · link #36454F

dark theme

StudioWorkAboutContact

Spring collection

Designed around charcoal gray.

A short paragraph shows how body text reads on this surface, with an inline link in the brand color.

Get startedLearn more

NewCard on surface with an accent badge.

Dark roles · surface #111417 · text #EDEFF0 · link #70808B

Charcoal Gray color palettes

Hand-picked combinations that work with charcoal gray. Hover a swatch to see its code; click to copy.

Charcoal Gray contrast & accessibility

WCAG 2.x asks for 4.5:1 for normal text (AA), 3:1 for large text and 7:1 for AAA. Ratios are truncated, not rounded, so a pass shown here is a real pass. Check your exact pairs in the contrast checker.

Pairing	Ratio	Normal text	Large text
White text on charcoal gray	`9.90:1`	AAA	AAA
Black text on charcoal gray	`2.12:1`	Fail	Fail
Charcoal Gray text on white	`9.90:1`	AAA	AAA
Charcoal Gray text on near-black #111111	`1.90:1`	Fail	Fail

Charcoal Gray shades for Tailwind & design systems

An 11-step 50–950 ramp generated in OKLCH from #36454F. Light steps suit backgrounds and borders, middle steps buttons, dark steps text. This is a generated ramp, not an official Tailwind palette.

Tailwind CSS v4

@import "tailwindcss";

@theme {
  --color-charcoal-gray-50: #F3F7FB;
  --color-charcoal-gray-100: #E8EEF1;
  --color-charcoal-gray-200: #D5DCE0;
  --color-charcoal-gray-300: #BCC4C9;
  --color-charcoal-gray-400: #9EA8AE;
  --color-charcoal-gray-500: #818C94;
  --color-charcoal-gray-600: #65727B;
  --color-charcoal-gray-700: #4E5C65;
  --color-charcoal-gray-800: #374650;
  --color-charcoal-gray-900: #24313A;
  --color-charcoal-gray-950: #121D24;
  --color-charcoal-gray: #36454F;
}

CSS variables

:root {
  --charcoal-gray: #36454F;
  --charcoal-gray-rgb: 54 69 79;
  --charcoal-gray-light: #E8EEF1;
  --charcoal-gray-dark: #374650;
}

.btn-charcoal-gray {
  background: #36454F;
  color: #FFFFFF;
}

Need semantic roles (surface, text, primary, accent) and exports? Open charcoal gray in the Tailwind color generator.

Charcoal Gray FAQ

What is the hex code for charcoal gray?

#36454F is the value HueWiz uses for charcoal gray; it equals rgb(54, 69, 79). Other common versions include #333333 (neutral charcoal), #3D3B3A (warm charcoal), #5A6670 (light charcoal).

Is charcoal gray a warm or cool color?

With an HSL hue of 204° and 19% saturation, charcoal gray reads as a cool blue.

What text color looks best on charcoal gray?

Use white or very light text. White on #36454F measures 9.90:1 and black measures 2.12:1; WCAG AA needs 4.5:1 for normal text.

What colors go with charcoal gray?

Try charcoal & mustard (#36454F, #E1AD01, #F5F5F2); modern neutral (#333333, #F2F2F0, #D9D9D6); charcoal & blush (#36454F, #F4C2C2, #FAFAFA). Each palette above can be copied or opened in the HueWiz studio.