Палитра Полночь
CSS-переменные
:root {
--color-1: #0B132B;
--color-2: #1C2541;
--color-3: #3A506B;
--color-4: #5BC0BE;
--color-5: #6FFFE9;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"midnight-1": "#0B132B",
"midnight-2": "#1C2541",
"midnight-3": "#3A506B",
"midnight-4": "#5BC0BE",
"midnight-5": "#6FFFE9",
}Об этой палитре
Палитра Полночь (Midnight) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#0B132BБелый18.38:1AAAa
#1C2541Белый15.10:1AAAa
#3A506BБелый8.27:1AAAa
#5BC0BEПочти чёрный8.75:1AAAa
#6FFFE9Почти чёрный15.44:1AAЭти цвета друг на друге
10 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #0B132B | #1C2541 | #3A506B | #5BC0BE | #6FFFE9 |
|---|---|---|---|---|---|
| #0B132B | 1.22Не проходит | 2.22Не проходит | 8.52AA | 15.02AA | |
| #1C2541 | 1.22Не проходит | 1.83Не проходит | 7.00AA | 12.34AA | |
| #3A506B | 2.22Не проходит | 1.83Не проходит | 3.83Только крупный | 6.76AA | |
| #5BC0BE | 8.52AA | 7.00AA | 3.83Только крупный | 1.76Не проходит | |
| #6FFFE9 | 15.02AA | 12.34AA | 6.76AA | 1.76Не проходит |
Ещё палитры