Палитра Скандинавская
CSS-переменные
:root {
--color-1: #2E3440;
--color-2: #3B4252;
--color-3: #5E81AC;
--color-4: #88C0D0;
--color-5: #ECEFF4;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"nordic-1": "#2E3440",
"nordic-2": "#3B4252",
"nordic-3": "#5E81AC",
"nordic-4": "#88C0D0",
"nordic-5": "#ECEFF4",
}Об этой палитре
Палитра Скандинавская (Nordic) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#2E3440Белый12.49:1AAAa
#3B4252Белый10.06:1AAAa
#5E81ACПочти чёрный4.69:1AAAa
#88C0D0Почти чёрный9.44:1AAAa
#ECEFF4Почти чёрный16.39:1AAЭти цвета друг на друге
8 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #2E3440 | #3B4252 | #5E81AC | #88C0D0 | #ECEFF4 |
|---|---|---|---|---|---|
| #2E3440 | 1.24Не проходит | 3.10Только крупный | 6.24AA | 10.84AA | |
| #3B4252 | 1.24Не проходит | 2.50Не проходит | 5.03AA | 8.73AA | |
| #5E81AC | 3.10Только крупный | 2.50Не проходит | 2.01Не проходит | 3.50Только крупный | |
| #88C0D0 | 6.24AA | 5.03AA | 2.01Не проходит | 1.74Не проходит | |
| #ECEFF4 | 10.84AA | 8.73AA | 3.50Только крупный | 1.74Не проходит |
Ещё палитры