Перейти к содержимому

Палитра Вейпорвейв

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:1AA
Aa
#01CDFEПочти чёрный10.04:1AA
Aa
#05FFA1Почти чёрный14.24:1AA
Aa
#B967FFПочти чёрный5.80:1AA
Aa
#FFFB96Почти чёрный17.54:1AA
Эти цвета друг на друге

Ни одно из 20 сочетаний внутри палитры не дотягивает до 4,5:1 — сочетайте её цвета с белым или почти чёрным, а не друг с другом.

текст \\ фон#FF71CE#01CDFE#05FFA1#B967FF#FFFB96
#FF71CE1.31Не проходит1.86Не проходит1.32Не проходит2.29Не проходит
#01CDFE1.31Не проходит1.42Не проходит1.73Не проходит1.75Не проходит
#05FFA11.86Не проходит1.42Не проходит2.45Не проходит1.23Не проходит
#B967FF1.32Не проходит1.73Не проходит2.45Не проходит3.02Только крупный
#FFFB962.29Не проходит1.75Не проходит1.23Не проходит3.02Только крупный
Ещё палитры

Смотрите также

Градиенты в той же гамме

✓ Скопировано