Palette · 5 colours
Desert Palette
The Desert 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: #EDC9AF;
--color-2: #E0A96D;
--color-3: #C19A6B;
--color-4: #8B5A2B;
--color-5: #5E3719;
}// tailwind.config.js
colors: {
"desert-1": "#EDC9AF",
"desert-2": "#E0A96D",
"desert-3": "#C19A6B",
"desert-4": "#8B5A2B",
"desert-5": "#5E3719",
}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 |
|---|---|---|---|
| #EDC9AF | Near-black | 12.21:1 | AA |
| #E0A96D | Near-black | 9.06:1 | AA |
| #C19A6B | Near-black | 7.29:1 | AA |
| #8B5A2B | White | 5.84:1 | AA |
| #5E3719 | White | 10.31:1 | AA |
These colours on each other
4 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.
| text \ background | #EDC9AF | #E0A96D | #C19A6B | #8B5A2B | #5E3719 |
|---|---|---|---|---|---|
| #EDC9AF | 1.35Fails | 1.68Fails | 3.78Large only | 6.67AA | |
| #E0A96D | 1.35Fails | 1.24Fails | 2.80Fails | 4.94AA | |
| #C19A6B | 1.68Fails | 1.24Fails | 2.25Fails | 3.98Large only | |
| #8B5A2B | 3.78Large only | 2.80Fails | 2.25Fails | 1.77Fails | |
| #5E3719 | 6.67AA | 4.94AA | 3.98Large only | 1.77Fails |
About this palette
The Desert 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.