Палитра Неон
CSS-переменные
:root {
--color-1: #FF006E;
--color-2: #FB5607;
--color-3: #FFBE0B;
--color-4: #8338EC;
--color-5: #3A86FF;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"neon-1": "#FF006E",
"neon-2": "#FB5607",
"neon-3": "#FFBE0B",
"neon-4": "#8338EC",
"neon-5": "#3A86FF",
}Об этой палитре
Палитра Неон (Neon) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#FF006EПочти чёрный4.93:1AAAa
#FB5607Почти чёрный5.79:1AAAa
#FFBE0BПочти чёрный11.36:1AAAa
#8338ECБелый5.61:1AAAa
#3A86FFПочти чёрный5.43:1AAЭти цвета друг на друге
Ни одно из 20 сочетаний внутри палитры не дотягивает до 4,5:1 — сочетайте её цвета с белым или почти чёрным, а не друг с другом.
| текст \\ фон | #FF006E | #FB5607 | #FFBE0B | #8338EC | #3A86FF |
|---|---|---|---|---|---|
| #FF006E | 1.18Не проходит | 2.30Не проходит | 1.46Не проходит | 1.10Не проходит | |
| #FB5607 | 1.18Не проходит | 1.96Не проходит | 1.72Не проходит | 1.07Не проходит | |
| #FFBE0B | 2.30Не проходит | 1.96Не проходит | 3.37Только крупный | 2.09Не проходит | |
| #8338EC | 1.46Не проходит | 1.72Не проходит | 3.37Только крупный | 1.61Не проходит | |
| #3A86FF | 1.10Не проходит | 1.07Не проходит | 2.09Не проходит | 1.61Не проходит |
Ещё палитры