Charcoal Series color palette
Five grays with no color cast at all, stepped from #F5F5F5 to #212121. Because they're perfectly neutral, you can drop any brand color on top and it will fit. The jumps are evenly spaced, which gives clear choices for background, border, secondary text and primary text. Use it for wireframes, UI kits, documentation and black-and-white print, or as the gray scale under a larger design system.
Charcoal Series palette in use
Use #F5F5F5 for backgrounds, #E0E0E0 for borders and dividers, and #212121 for primary text. #616161 handles secondary text and #9E9E9E placeholders and disabled controls.
This pair measures 14.76:1, so it works for body text too. The button uses #E0E0E0 with black text.
ButtonGood for
- Wireframes and mockups
- Design system gray scale
- Technical documentation
- Black-and-white print
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#212121 | #F5F5F5 | 14.76:1 | AAA |
#212121 | #E0E0E0 | 12.19:1 | AAA |
#212121 | #9E9E9E | 6.01:1 | AA |
#616161 | #F5F5F5 | 5.68:1 | AA |
#616161 | #E0E0E0 | 4.69:1 | AA |
Charcoal Series palette as code
CSS variables
:root {
--charcoal-series-1: #F5F5F5;
--charcoal-series-2: #E0E0E0;
--charcoal-series-3: #9E9E9E;
--charcoal-series-4: #616161;
--charcoal-series-5: #212121;
}Tailwind v4
@theme {
--color-charcoal-series-1: #F5F5F5;
--color-charcoal-series-2: #E0E0E0;
--color-charcoal-series-3: #9E9E9E;
--color-charcoal-series-4: #616161;
--color-charcoal-series-5: #212121;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'charcoal-series': {
100: '#F5F5F5',
200: '#E0E0E0',
300: '#9E9E9E',
400: '#616161',
500: '#212121',
},SCSS
$charcoal-series-1: #F5F5F5;
$charcoal-series-2: #E0E0E0;
$charcoal-series-3: #9E9E9E;
$charcoal-series-4: #616161;
$charcoal-series-5: #212121;JSON
["#F5F5F5","#E0E0E0","#9E9E9E","#616161","#212121"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.