Палитра Осень
CSS-переменные
:root {
--color-1: #283618;
--color-2: #606C38;
--color-3: #DDA15E;
--color-4: #BC6C25;
--color-5: #9C6644;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"autumn-1": "#283618",
"autumn-2": "#606C38",
"autumn-3": "#DDA15E",
"autumn-4": "#BC6C25",
"autumn-5": "#9C6644",
}Об этой палитре
Палитра Осень (Autumn) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#283618Белый12.87:1AAAa
#606C38Белый5.68:1AAAa
#DDA15EПочти чёрный8.40:1AAAa
#BC6C25Почти чёрный4.78:1AAAa
#9C6644Белый4.78:1AAЭти цвета друг на друге
2 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #283618 | #606C38 | #DDA15E | #BC6C25 | #9C6644 |
|---|---|---|---|---|---|
| #283618 | 2.27Не проходит | 5.72AA | 3.26Только крупный | 2.70Не проходит | |
| #606C38 | 2.27Не проходит | 2.52Не проходит | 1.44Не проходит | 1.19Не проходит | |
| #DDA15E | 5.72AA | 2.52Не проходит | 1.76Не проходит | 2.12Не проходит | |
| #BC6C25 | 3.26Только крупный | 1.44Не проходит | 1.76Не проходит | 1.21Не проходит | |
| #9C6644 | 2.70Не проходит | 1.19Не проходит | 2.12Не проходит | 1.21Не проходит |
Ещё палитры