Autumn Palette
CSS variables
:root {
--color-1: #283618;
--color-2: #606C38;
--color-3: #DDA15E;
--color-4: #BC6C25;
--color-5: #9C6644;
}Tailwind config
// tailwind.config.js
colors: {
"autumn-1": "#283618",
"autumn-2": "#606C38",
"autumn-3": "#DDA15E",
"autumn-4": "#BC6C25",
"autumn-5": "#9C6644",
}About this palette
The Autumn 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
#283618White12.87:1AAAa
#606C38White5.68:1AAAa
#DDA15ENear-black8.40:1AAAa
#BC6C25Near-black4.78:1AAAa
#9C6644White4.78:1AAThese colours on each other
2 of the 20 combinations inside this palette clear 4.5:1 for body text. Rows are the text colour, columns the background.
| text \\ background | #283618 | #606C38 | #DDA15E | #BC6C25 | #9C6644 |
|---|---|---|---|---|---|
| #283618 | 2.27Fails | 5.72AA | 3.26Large only | 2.70Fails | |
| #606C38 | 2.27Fails | 2.52Fails | 1.44Fails | 1.19Fails | |
| #DDA15E | 5.72AA | 2.52Fails | 1.76Fails | 2.12Fails | |
| #BC6C25 | 3.26Large only | 1.44Fails | 1.76Fails | 1.21Fails | |
| #9C6644 | 2.70Fails | 1.19Fails | 2.12Fails | 1.21Fails |
More palettes