Charcoal Amber Palette
CSS variables
:root {
--color-1: #1C1C1C;
--color-2: #3A3A3A;
--color-3: #F59E0B;
--color-4: #FCD34D;
--color-5: #FAFAF9;
}Tailwind config
// tailwind.config.js
colors: {
"charcoal-amber-1": "#1C1C1C",
"charcoal-amber-2": "#3A3A3A",
"charcoal-amber-3": "#F59E0B",
"charcoal-amber-4": "#FCD34D",
"charcoal-amber-5": "#FAFAF9",
}About this palette
The Charcoal Amber 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
#1C1C1CWhite17.04:1AAAa
#3A3A3AWhite11.37:1AAAa
#F59E0BNear-black8.80:1AAAa
#FCD34DNear-black13.10:1AAAa
#FAFAF9Near-black18.09:1AAThese colours on each other
12 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.
| text \\ background | #1C1C1C | #3A3A3A | #F59E0B | #FCD34D | #FAFAF9 |
|---|---|---|---|---|---|
| #1C1C1C | 1.50Fails | 7.94AA | 11.82AA | 16.32AA | |
| #3A3A3A | 1.50Fails | 5.30AA | 7.89AA | 10.89AA | |
| #F59E0B | 7.94AA | 5.30AA | 1.49Fails | 2.06Fails | |
| #FCD34D | 11.82AA | 7.89AA | 1.49Fails | 1.38Fails | |
| #FAFAF9 | 16.32AA | 10.89AA | 2.06Fails | 1.38Fails |
More palettes