Палитра Вейпорвейв
CSS-переменные
:root {
--color-1: #FF71CE;
--color-2: #01CDFE;
--color-3: #05FFA1;
--color-4: #B967FF;
--color-5: #FFFB96;
}Конфиг Tailwind
// tailwind.config.js
colors: {
"vaporwave-1": "#FF71CE",
"vaporwave-2": "#01CDFE",
"vaporwave-3": "#05FFA1",
"vaporwave-4": "#B967FF",
"vaporwave-5": "#FFFB96",
}Об этой палитре
Палитра Вейпорвейв (Vaporwave) — подобранный набор из 5 цветов с HEX, RGB и готовым экспортом в CSS-переменные и Tailwind. Нажмите на любой свотч для подробностей цвета — конвертаций, контраста и гармоний.
Читаемый текст на каждом цвете
Белый и почти чёрный измерены на каждом свотче. AA значит, что пара берёт 4,5:1 для основного текста; «Только крупный» — что берёт лишь 3:1, и годится от 24px.
Aa
#FF71CEПочти чёрный7.65:1AAAa
#01CDFEПочти чёрный10.04:1AAAa
#05FFA1Почти чёрный14.24:1AAAa
#B967FFПочти чёрный5.80:1AAAa
#FFFB96Почти чёрный17.54:1AAЭти цвета друг на друге
Ни одно из 20 сочетаний внутри палитры не дотягивает до 4,5:1 — сочетайте её цвета с белым или почти чёрным, а не друг с другом.
| текст \\ фон | #FF71CE | #01CDFE | #05FFA1 | #B967FF | #FFFB96 |
|---|---|---|---|---|---|
| #FF71CE | 1.31Не проходит | 1.86Не проходит | 1.32Не проходит | 2.29Не проходит | |
| #01CDFE | 1.31Не проходит | 1.42Не проходит | 1.73Не проходит | 1.75Не проходит | |
| #05FFA1 | 1.86Не проходит | 1.42Не проходит | 2.45Не проходит | 1.23Не проходит | |
| #B967FF | 1.32Не проходит | 1.73Не проходит | 2.45Не проходит | 3.02Только крупный | |
| #FFFB96 | 2.29Не проходит | 1.75Не проходит | 1.23Не проходит | 3.02Только крупный |
Ещё палитры