Charcoal vs slate
Both are dark greys with a tint, and the tint is the difference. Charcoal (#343837) carries a faint green-grey cast at just 4% saturation, so it reads as almost neutral. Slate leans clearly blue, like roof slate in the rain. CSS has no charcoal keyword, but it has two slates.
| Name | HEX | Tint | White text |
|---|---|---|---|
| Charcoal (name list) | #343837 | Nearly neutral | 11.89:1 |
| darkslategray (CSS) | #2F4F4F | Green-blue | 8.93:1 |
| Slate (name list) | #516572 | Blue | 6.08:1 |
| dimgray (CSS) | #696969 | None | 5.49:1 |
| slategray (CSS) | #708090 | Blue | 4.05:1 |
Watch the last row: slategray is mid-grey, and white text on it falls short of AA. If you want slate behind white text, the name list's darker Slate is the safer pick.
Charcoal instead of black
Charcoal is the usual answer when black is too harsh: for text on light pages, for dark-mode panels, for clothing and kitchen units. It still gives white text 11.89:1, far beyond AAA, while looking noticeably softer. For a darker near-black, see the options on the black page.
Accents that lift charcoal
Charcoal makes almost any bright colour look sharper. Mustard yellow is the classic (5.76:1 as text on charcoal). Coral and blush pink warm it up; plain white gives a crisp, graphic look. Lavender text on charcoal is another soft option at 9.66:1.
Questions
What is charcoal gray in RGB?
rgb(52, 56, 55).
Is it charcoal gray or charcoal grey?
Both: “gray” is the American spelling and “grey” the British. CSS accepts both spellings for its grey keywords, such as darkgray and darkgrey.