Палитра Пустыня
CSS-переменные
:root {
--color-1: #EDC9AF;
--color-2: #E0A96D;
--color-3: #C19A6B;
--color-4: #8B5A2B;
--color-5: #5E3719;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"desert-1": "#EDC9AF",
"desert-2": "#E0A96D",
"desert-3": "#C19A6B",
"desert-4": "#8B5A2B",
"desert-5": "#5E3719",
}Об этой палитре
Палитра Пустыня (Desert) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#EDC9AFПочти чёрный12.21:1AAAa
#E0A96DПочти чёрный9.06:1AAAa
#C19A6BПочти чёрный7.29:1AAAa
#8B5A2BБелый5.84:1AAAa
#5E3719Белый10.31:1AAЭти цвета друг на друге
4 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #EDC9AF | #E0A96D | #C19A6B | #8B5A2B | #5E3719 |
|---|---|---|---|---|---|
| #EDC9AF | 1.35Не проходит | 1.68Не проходит | 3.78Только крупный | 6.67AA | |
| #E0A96D | 1.35Не проходит | 1.24Не проходит | 2.80Не проходит | 4.94AA | |
| #C19A6B | 1.68Не проходит | 1.24Не проходит | 2.25Не проходит | 3.98Только крупный | |
| #8B5A2B | 3.78Только крупный | 2.80Не проходит | 2.25Не проходит | 1.77Не проходит | |
| #5E3719 | 6.67AA | 4.94AA | 3.98Только крупный | 1.77Не проходит |
Ещё палитры