Палитра Чернильный синий
CSS-переменные
:root {
--color-1: #050A30;
--color-2: #0B1D6B;
--color-3: #173EA5;
--color-4: #6C8BD4;
--color-5: #E6ECF8;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"ink-blue-1": "#050A30",
"ink-blue-2": "#0B1D6B",
"ink-blue-3": "#173EA5",
"ink-blue-4": "#6C8BD4",
"ink-blue-5": "#E6ECF8",
}Об этой палитре
Палитра Чернильный синий (Ink Blue) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#050A30Белый19.22:1AAAa
#0B1D6BБелый14.98:1AAAa
#173EA5Белый9.26:1AAAa
#6C8BD4Почти чёрный5.65:1AAAa
#E6ECF8Почти чёрный15.94:1AAЭти цвета друг на друге
8 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #050A30 | #0B1D6B | #173EA5 | #6C8BD4 | #E6ECF8 |
|---|---|---|---|---|---|
| #050A30 | 1.28Не проходит | 2.08Не проходит | 5.75AA | 16.22AA | |
| #0B1D6B | 1.28Не проходит | 1.62Не проходит | 4.48Только крупный | 12.64AA | |
| #173EA5 | 2.08Не проходит | 1.62Не проходит | 2.77Не проходит | 7.81AA | |
| #6C8BD4 | 5.75AA | 4.48Только крупный | 2.77Не проходит | 2.82Не проходит | |
| #E6ECF8 | 16.22AA | 12.64AA | 7.81AA | 2.82Не проходит |
Ещё палитры