Палитра Лес
CSS-переменные
:root {
--color-1: #1B4332;
--color-2: #2D6A4F;
--color-3: #40916C;
--color-4: #74C69D;
--color-5: #B7E4C7;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"forest-1": "#1B4332",
"forest-2": "#2D6A4F",
"forest-3": "#40916C",
"forest-4": "#74C69D",
"forest-5": "#B7E4C7",
}Об этой палитре
Палитра Лес (Forest) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#1B4332Белый11.08:1AAAa
#2D6A4FБелый6.39:1AAAa
#40916CПочти чёрный4.93:1AAAa
#74C69DПочти чёрный9.27:1AAAa
#B7E4C7Почти чёрный13.44:1AAЭти цвета друг на друге
6 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #1B4332 | #2D6A4F | #40916C | #74C69D | #B7E4C7 |
|---|---|---|---|---|---|
| #1B4332 | 1.73Не проходит | 2.89Не проходит | 5.44AA | 7.88AA | |
| #2D6A4F | 1.73Не проходит | 1.67Не проходит | 3.14Только крупный | 4.55AA | |
| #40916C | 2.89Не проходит | 1.67Не проходит | 1.88Не проходит | 2.72Не проходит | |
| #74C69D | 5.44AA | 3.14Только крупный | 1.88Не проходит | 1.45Не проходит | |
| #B7E4C7 | 7.88AA | 4.55AA | 2.72Не проходит | 1.45Не проходит |
Ещё палитры