Генератор оттенков

Генерирует шкалы светлых и тёмных оттенков с экспортируемыми CSS-переменными.

Генератор оттенков создаёт шкалы светлых и тёмных оттенков из базового цвета, показывает их как градиентную полосу и экспортирует готовые CSS-переменные.

Цвет

Количество

Режим

Выход

{
  "mode": "tint",
  "count": 5,
  "colors": [
    "#4c7fef",
    "#739bf2",
    "#9ab7f6",
    "#c1d2f9",
    "#e8eefd"
  ],
  "cssVars": "--shade-1: #4c7fef;\n--shade-2: #739bf2;\n--shade-3: #9ab7f6;\n--shade-4: #c1d2f9;\n--shade-5: #e8eefd;"
}

Как использовать

Выберите базовый цвет.
Выберите количество шагов и генерировать ли светлые, тёмные или оба оттенка.
Скопируйте цвета или CSS-переменные.

Часто задаваемые вопросы

Как создаются светлые и тёмные оттенки?

Яркость интерполируется к белому для светлых и к чёрному для тёмных.

Можно ли поделиться палитрой?

Да, цвет, количество и режим сохраняются в параметрах URL.

Генератор цветовых палитр

Создавайте гармоничные палитры в режимах случайного, аналогового, комплементарного и триадного.

Конвертер цветов

Мгновенно конвертирует цвета между HEX, RGB, HSL и HSV.

Проверка контрастности

Проверяйте коэффициенты контрастности WCAG для доступного текста и интерфейса.

Симулятор дальтонизма

Предпросмотр, как изображения выглядят при распространённых типах дальтонизма.

Генератор цветовых градиентов

Создавайте CSS-линейные градиенты с пользовательскими цветами и направлениями.

Поиск названия цвета

Находит ближайшее CSS-название цвета для любого значения.