Палитра Киберпанк
CSS-переменные
:root {
--color-1: #0D0221;
--color-2: #FF2A6D;
--color-3: #05D9E8;
--color-4: #D1F7FF;
--color-5: #7700A6;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"cyberpunk-1": "#0D0221",
"cyberpunk-2": "#FF2A6D",
"cyberpunk-3": "#05D9E8",
"cyberpunk-4": "#D1F7FF",
"cyberpunk-5": "#7700A6",
}Об этой палитре
Палитра Киберпанк (Cyberpunk) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#0D0221Белый20.04:1AAAa
#FF2A6DПочти чёрный5.22:1AAAa
#05D9E8Почти чёрный10.88:1AAAa
#D1F7FFПочти чёрный16.61:1AAAa
#7700A6Белый8.99:1AAЭти цвета друг на друге
10 из 20 сочетаний внутри палитры проходят 4,5:1 для основного текста. Строки — цвет текста, столбцы — фон.
| текст \\ фон | #0D0221 | #FF2A6D | #05D9E8 | #D1F7FF | #7700A6 |
|---|---|---|---|---|---|
| #0D0221 | 5.54AA | 11.55AA | 17.62AA | 2.23Не проходит | |
| #FF2A6D | 5.54AA | 2.08Не проходит | 3.18Только крупный | 2.49Не проходит | |
| #05D9E8 | 11.55AA | 2.08Не проходит | 1.53Не проходит | 5.18AA | |
| #D1F7FF | 17.62AA | 3.18Только крупный | 1.53Не проходит | 7.91AA | |
| #7700A6 | 2.23Не проходит | 2.49Не проходит | 5.18AA | 7.91AA |
Ещё палитры