Charcoal Background
#36454F · rgb(54, 69, 79)
About the charcoal background
Charcoal (#36454F) is black with a slate of blue in it — rgb(54, 69, 79). That subtle cool cast is why it reads as 'graphite' or 'gunmetal' rather than pure black, and why it feels softer behind text and photography.
It's the go-to dark mode background for designers who find #000000 too harsh. White text on charcoal still clears WCAG AAA at roughly 10:1, while the lower contrast against pure black lets UI layers and shadows stay visible.
What to use a charcoal background for
- Dark mode UI backgrounds softer than pure black
- Premium tech and automotive branding
- Moody photography and portfolio backdrops
- High-contrast hero sections with white text
How to use charcoal in CSS
Copy the snippet below, or click any code chip on this page to grab a single value.
/* Full-page charcoal background */
body {
margin: 0;
background-color: #36454F;
}
/* A single section or element */
.hero {
background-color: rgb(54, 69, 79);
} Charcoal shades and tints
Click any swatch to copy it. Tints mix charcoal with white; shades mix it with black.
Charcoal background FAQ
Is charcoal better than black for dark mode?
Usually, yes. Charcoal #36454F reduces the halo effect and eye strain that pure black causes on bright UI elements, while white text still measures around 10:1 — comfortably past WCAG AAA.
What colors pair well with charcoal?
Charcoal loves warm accents: amber, coral and gold pop against its cool depth. For text and surfaces, white, light gray and desaturated blue keep the palette cohesive.
What is the hex code for charcoal?
Charcoal is #36454F in hexadecimal, rgb(54, 69, 79) in RGB and hsl(204, 19%, 26%) in HSL. Paste #36454F into any CSS background-color property to use it.
How do I set a charcoal background in CSS?
Add background-color: #36454F; to any element, or apply it to the whole page: body { background-color: #36454F; margin: 0; }. You can also use the CSS keyword or the rgb() form — rgb(54, 69, 79) — with identical results.