Palette · 5 colours
Coffee Palette
The Coffee 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.
:root {
--color-1: #4B3621;
--color-2: #6F4E37;
--color-3: #967259;
--color-4: #C8A27C;
--color-5: #ECDFCB;
}// tailwind.config.js
colors: {
"coffee-1": "#4B3621",
"coffee-2": "#6F4E37",
"coffee-3": "#967259",
"coffee-4": "#C8A27C",
"coffee-5": "#ECDFCB",
}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.
| Color | Best text | Contrast | WCAG |
|---|---|---|---|
| #4B3621 | White | 11.36:1 | AA |
| #6F4E37 | White | 7.44:1 | AA |
| #967259 | Near-black | 4.36:1 | Large only |
| #C8A27C | Near-black | 8.02:1 | AA |
| #ECDFCB | Near-black | 14.38:1 | AA |
These colours on each other
6 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.
| text \ background | #4B3621 | #6F4E37 | #967259 | #C8A27C | #ECDFCB |
|---|---|---|---|---|---|
| #4B3621 | 1.53Fails | 2.62Fails | 4.82AA | 8.65AA | |
| #6F4E37 | 1.53Fails | 1.72Fails | 3.16Large only | 5.67AA | |
| #967259 | 2.62Fails | 1.72Fails | 1.84Fails | 3.30Large only | |
| #C8A27C | 4.82AA | 3.16Large only | 1.84Fails | 1.79Fails | |
| #ECDFCB | 8.65AA | 5.67AA | 3.30Large only | 1.79Fails |
About this palette
The Coffee 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.