Палитра Деним
CSS-переменные
:root {
--color-1: #1E3A5F;
--color-2: #2E5A88;
--color-3: #5B8FB9;
--color-4: #A8C5DD;
--color-5: #E3EDF5;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"denim-1": "#1E3A5F",
"denim-2": "#2E5A88",
"denim-3": "#5B8FB9",
"denim-4": "#A8C5DD",
"denim-5": "#E3EDF5",
}Об этой палитре
Палитра Деним (Denim) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#1E3A5FБелый11.50:1AAAa
#2E5A88Белый7.16:1AAAa
#5B8FB9Почти чёрный5.47:1AAAa
#A8C5DDПочти чёрный10.52:1AAAa
#E3EDF5Почти чёрный15.92:1AAЭти цвета друг на друге
6 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #1E3A5F | #2E5A88 | #5B8FB9 | #A8C5DD | #E3EDF5 |
|---|---|---|---|---|---|
| #1E3A5F | 1.61Не проходит | 3.33Только крупный | 6.41AA | 9.69AA | |
| #2E5A88 | 1.61Не проходит | 2.07Не проходит | 3.99Только крупный | 6.03AA | |
| #5B8FB9 | 3.33Только крупный | 2.07Не проходит | 1.93Не проходит | 2.91Не проходит | |
| #A8C5DD | 6.41AA | 3.99Только крупный | 1.93Не проходит | 1.51Не проходит | |
| #E3EDF5 | 9.69AA | 6.03AA | 2.91Не проходит | 1.51Не проходит |
Ещё палитры