Палитра Сланцевый UI
CSS-переменные
:root {
--color-1: #0F172A;
--color-2: #334155;
--color-3: #64748B;
--color-4: #CBD5E1;
--color-5: #F8FAFC;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"slate-ui-1": "#0F172A",
"slate-ui-2": "#334155",
"slate-ui-3": "#64748B",
"slate-ui-4": "#CBD5E1",
"slate-ui-5": "#F8FAFC",
}Об этой палитре
Палитра Сланцевый UI (Slate UI) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#0F172AБелый17.85:1AAAa
#334155Белый10.35:1AAAa
#64748BБелый4.76:1AAAa
#CBD5E1Почти чёрный12.73:1AAAa
#F8FAFCПочти чёрный18.06:1AAЭти цвета друг на друге
10 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #0F172A | #334155 | #64748B | #CBD5E1 | #F8FAFC |
|---|---|---|---|---|---|
| #0F172A | 1.72Не проходит | 3.75Только крупный | 12.02AA | 17.06AA | |
| #334155 | 1.72Не проходит | 2.18Не проходит | 6.97AA | 9.90AA | |
| #64748B | 3.75Только крупный | 2.18Не проходит | 3.21Только крупный | 4.55AA | |
| #CBD5E1 | 12.02AA | 6.97AA | 3.21Только крупный | 1.42Не проходит | |
| #F8FAFC | 17.06AA | 9.90AA | 4.55AA | 1.42Не проходит |
Ещё палитры