Палитра Земляные тона
CSS-переменные
:root {
--color-1: #A98467;
--color-2: #6C584C;
--color-3: #ADC178;
--color-4: #DDE5B6;
--color-5: #F0EAD2;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"earth-tones-1": "#A98467",
"earth-tones-2": "#6C584C",
"earth-tones-3": "#ADC178",
"earth-tones-4": "#DDE5B6",
"earth-tones-5": "#F0EAD2",
}Об этой палитре
Палитра Земляные тона (Earth Tones) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#A98467Почти чёрный5.56:1AAAa
#6C584CБелый6.69:1AAAa
#ADC178Почти чёрный9.61:1AAAa
#DDE5B6Почти чёрный14.36:1AAAa
#F0EAD2Почти чёрный15.66:1AAЭти цвета друг на друге
4 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #A98467 | #6C584C | #ADC178 | #DDE5B6 | #F0EAD2 |
|---|---|---|---|---|---|
| #A98467 | 1.97Не проходит | 1.73Не проходит | 2.58Не проходит | 2.81Не проходит | |
| #6C584C | 1.97Не проходит | 3.40Только крупный | 5.09AA | 5.55AA | |
| #ADC178 | 1.73Не проходит | 3.40Только крупный | 1.49Не проходит | 1.63Не проходит | |
| #DDE5B6 | 2.58Не проходит | 5.09AA | 1.49Не проходит | 1.09Не проходит | |
| #F0EAD2 | 2.81Не проходит | 5.55AA | 1.63Не проходит | 1.09Не проходит |
Ещё палитры