Палитра Кофе
CSS-переменные
:root {
--color-1: #4B3621;
--color-2: #6F4E37;
--color-3: #967259;
--color-4: #C8A27C;
--color-5: #ECDFCB;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"coffee-1": "#4B3621",
"coffee-2": "#6F4E37",
"coffee-3": "#967259",
"coffee-4": "#C8A27C",
"coffee-5": "#ECDFCB",
}Об этой палитре
Палитра Кофе (Coffee) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#4B3621Белый11.36:1AAAa
#6F4E37Белый7.44:1AAAa
#967259Почти чёрный4.36:1Только крупныйAa
#C8A27CПочти чёрный8.02:1AAAa
#ECDFCBПочти чёрный14.38:1AAЭти цвета друг на друге
6 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #4B3621 | #6F4E37 | #967259 | #C8A27C | #ECDFCB |
|---|---|---|---|---|---|
| #4B3621 | 1.53Не проходит | 2.62Не проходит | 4.82AA | 8.65AA | |
| #6F4E37 | 1.53Не проходит | 1.72Не проходит | 3.16Только крупный | 5.67AA | |
| #967259 | 2.62Не проходит | 1.72Не проходит | 1.84Не проходит | 3.30Только крупный | |
| #C8A27C | 4.82AA | 3.16Только крупный | 1.84Не проходит | 1.79Не проходит | |
| #ECDFCB | 8.65AA | 5.67AA | 3.30Только крупный | 1.79Не проходит |
Ещё палитры