Monochrome Palette
CSS variables
:root {
--color-1: #212529;
--color-2: #495057;
--color-3: #ADB5BD;
--color-4: #DEE2E6;
--color-5: #F8F9FA;
}Tailwind config
// tailwind.config.js
colors: {
"monochrome-1": "#212529",
"monochrome-2": "#495057",
"monochrome-3": "#ADB5BD",
"monochrome-4": "#DEE2E6",
"monochrome-5": "#F8F9FA",
}About this palette
The Monochrome palette is a curated set of 5 colors with their HEX, RGB and ready CSS-variable and Tailwind exports. Click any swatch for that color's full breakdown — conversions, contrast and harmonies.
Readable text on each color
White and near-black measured against every swatch. AA means the pairing clears 4.5:1 for body text; Large means it only clears 3:1, so reserve it for 24px and up.
Aa
#212529White15.43:1AAAa
#495057White8.18:1AAAa
#ADB5BDNear-black9.11:1AAAa
#DEE2E6Near-black14.51:1AAAa
#F8F9FANear-black17.92:1AAThese colours on each other
10 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.
| text \\ background | #212529 | #495057 | #ADB5BD | #DEE2E6 | #F8F9FA |
|---|---|---|---|---|---|
| #212529 | 1.89Fails | 7.43AA | 11.85AA | 14.63AA | |
| #495057 | 1.89Fails | 3.94Large only | 6.28AA | 7.76AA | |
| #ADB5BD | 7.43AA | 3.94Large only | 1.59Fails | 1.97Fails | |
| #DEE2E6 | 11.85AA | 6.28AA | 1.59Fails | 1.24Fails | |
| #F8F9FA | 14.63AA | 7.76AA | 1.97Fails | 1.24Fails |
More palettes