Color Directory
Charcoal
A dark blue-grey that reads as black without the harshness.
#36454F
- HEX
- #36454F
- RGB
- rgb(54, 69, 79)
- HSL
- hsl(204, 19%, 26%)
Check Charcoal
Contrast ratios against white and black text.
WCAG asks for 4.5:1 on body text and 3:1 on text 24px or larger. Ratios are calculated from #36454F in the sRGB colour space.
About this entry
What it is
A dark blue-grey that reads as black without the harshness.
Body text, dark UI surfaces and masculine palettes.
Copy & use
How to copy and use charcoal
- 01
Copy the complete value
Use the copy button above so the value is captured without its label, description or surrounding page text.
- 02
Paste it where you need it
Body text, dark UI surfaces and masculine palettes.
- 03
Check the final result
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Tints & shades
A scale built from charcoal
Each step is mixed toward white or black from #36454F in sRGB, which is what the browser does too. Useful when one colour has to cover hover states, borders and backgrounds as well as the accent itself.
Lighter 60%
#AFB5B9
rgb(175, 181, 185)
Lighter 30%
#727D84
rgb(114, 125, 132)
- Base
Base
#36454F
rgb(54, 69, 79)
Darker 30%
#263037
rgb(38, 48, 55)
Darker 60%
#161C20
rgb(22, 28, 32)
Name & pairing
Where charcoal comes from
Named after burnt wood, and used in design as a softer stand-in for black. Because it is not fully black there is still somewhere darker to go, which matters when you need a second level of emphasis.
What to put beside it
A better text colour than pure black on a warm ground, where black can look like a hole. Pair with any of the muted colours here for something quiet and legible.
Common questions
Using charcoal
What is charcoal?
A dark blue-grey that reads as black without the harshness. Body text, dark UI surfaces and masculine palettes.
What are the colour values for Charcoal?
Charcoal is HEX #36454F, RGB rgb(54, 69, 79), HSL hsl(204, 19%, 26%). All three notations describe the same sRGB colour, so pick whichever your tool expects: hex for CSS and design files, RGB when you need the channels separately, HSL when you want to shift lightness or saturation without changing the hue.
Will charcoal work everywhere?
Modern browsers support hex, RGB and HSL. Screens, colour profiles and neighbouring colours can still make the same value appear different, so evaluate it in the intended interface.
Can I customise charcoal after copying?
Use the supplied value as a starting point, then check contrast and nearby colours in the final design. Converting between hex, RGB and HSL does not change the intended sRGB colour.
Also known as
Keep browsing