Earth Tones Palette
CSS variables
:root {
--color-1: #A98467;
--color-2: #6C584C;
--color-3: #ADC178;
--color-4: #DDE5B6;
--color-5: #F0EAD2;
}Tailwind config
// tailwind.config.js
colors: {
"earth-tones-1": "#A98467",
"earth-tones-2": "#6C584C",
"earth-tones-3": "#ADC178",
"earth-tones-4": "#DDE5B6",
"earth-tones-5": "#F0EAD2",
}About this palette
The Earth Tones 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
#A98467Near-black5.56:1AAAa
#6C584CWhite6.69:1AAAa
#ADC178Near-black9.61:1AAAa
#DDE5B6Near-black14.36:1AAAa
#F0EAD2Near-black15.66:1AAThese 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 | #A98467 | #6C584C | #ADC178 | #DDE5B6 | #F0EAD2 |
|---|---|---|---|---|---|
| #A98467 | 1.97Fails | 1.73Fails | 2.58Fails | 2.81Fails | |
| #6C584C | 1.97Fails | 3.40Large only | 5.09AA | 5.55AA | |
| #ADC178 | 1.73Fails | 3.40Large only | 1.49Fails | 1.63Fails | |
| #DDE5B6 | 2.58Fails | 5.09AA | 1.49Fails | 1.09Fails | |
| #F0EAD2 | 2.81Fails | 5.55AA | 1.63Fails | 1.09Fails |
More palettes