Генератор шкал

Преобразуйте любой цвет в шкалу дизайн-системы из 11 шагов (50→950): перцептивно равномерная интерполяция OKLCH с привязкой к ближайшему шагу исходного цвета, контрастность WCAG с белым/черным на каждом шаге, экспорт в один клик в Tailwind / CSS variables / SCSS / JSON.

#--11 шаг

#fff6ff

50профиль →

с белым 1.06
с черным 19.88

#ffdffd

100профиль →

с белым 1.22
с черным 17.23

#ffc1f9

200профиль →

с белым 1.47
с черным 14.25

#ffa0f4

300профиль →

с белым 1.81
с черным 11.59

#ff75ec

400профиль →

с белым 2.33
с черным 9.01

исходный шаг#f439dd

500профиль →

с белым 3.24
с черным 6.48

#e400cd

600профиль →

с белым 4.05
с черным 5.18

#cc00b7

700профиль →

с белым 4.94
с черным 4.25

#ae009d

800профиль →

с белым 6.39
с черным 3.29

#8d007f

900профиль →

с белым 8.61
с черным 2.44

#66005c

950профиль →

с белым 12.21
с черным 1.72

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#fff6ff",
        100: "#ffdffd",
        200: "#ffc1f9",
        300: "#ffa0f4",
        400: "#ff75ec",
        500: "#f439dd",
        600: "#e400cd",
        700: "#cc00b7",
        800: "#ae009d",
        900: "#8d007f",
        950: "#66005c",
        },
      },
    },
  },
};

Как работает генератор оттенков — ввод, проверка, экспорт.

Создание шкалы дизайн-системы из 11 шагов на основе одного цвета, перцептуально равномерной в OKLCH.

01
Ввод
Вставьте HEX-код или нажмите «Создать шкалу» на любой странице цвета, чтобы добавить значение.
02
Проверка
Ваш цвет подстраивается под ближайший шаг; контрастность по WCAG относительно белого и черного указана под каждым шагом.
03
Экспорт
Выберите формат Tailwind / CSS-переменные / SCSS / JSON и скопируйте результат прямо в ваш код.

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

Четыре вопроса, которые реально задают про генерацию оттенков.

Почему 11 шагов?: Диапазон 50–950 на 11 точек соответствует шкалам, используемым в популярных дизайн-системах (Tailwind, Radix), поэтому замена не требует дополнительных затрат.
Произойдет ли сдвиг оттенка?: Нет. Интерполяция выполняется в OKLCH с привязкой вашего цвета к ближайшему шагу, поэтому оттенок сохраняется от 50 до 950.
Можно ли использовать шкалу в коммерческих целях?: Да. Шкала оттенков — это вычисленные числовые значения без лицензионных ограничений — то, что вы экспортируете, принадлежит вам.
Почему некоторые шаги получаются сероватыми?: Цвета с высокой хроматичностью выходят за пределы sRGB на крайних точках; движок сжимает хроматичность там, чтобы шаги оставались насыщенными, а не превращались в серые или неоновые.

После получения результата

Продолжите отсюда и используйте цвета в работе.

Соответствие стандартам

Введите код RAL, Pantone или NCS — или любой HEX — и найдите его соответствие во всех 10 стандартных системах с ΔE CIEDE2000.

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

Проверка контраста по WCAG 2.1 между любым цветом переднего плана и фона.

Панель палитр

Пробел для рандомизации, блокировка, перетаскивание для изменения порядка, обмен по URL — всё, что должна делать панель палитр.

AI-студия палитр

Опишите сцену или настроение одной строкой — получите палитру из пяти цветов с обоснованием.

Генератор шкал

// tailwind.config.js / @theme module.exports = { theme: { extend: { colors: { brand: { 50: "#fff6ff", 100: "#ffdffd", 200: "#ffc1f9", 300: "#ffa0f4", 400: "#ff75ec", 500: "#f439dd", 600: "#e400cd", 700: "#cc00b7", 800: "#ae009d", 900: "#8d007f", 950: "#66005c", }, }, }, }, };

Как работает генератор оттенков — ввод, проверка, экспорт.

Создание шкалы дизайн-системы из 11 шагов на основе одного цвета, перцептуально равномерной в OKLCH.

Ввод

Вставьте HEX-код или нажмите «Создать шкалу» на любой странице цвета, чтобы добавить значение.

Проверка

Ваш цвет подстраивается под ближайший шаг; контрастность по WCAG относительно белого и черного указана под каждым шагом.

Экспорт

Выберите формат Tailwind / CSS-переменные / SCSS / JSON и скопируйте результат прямо в ваш код.

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

Четыре вопроса, которые реально задают про генерацию оттенков.

Почему 11 шагов?

Диапазон 50–950 на 11 точек соответствует шкалам, используемым в популярных дизайн-системах (Tailwind, Radix), поэтому замена не требует дополнительных затрат.

Произойдет ли сдвиг оттенка?

Нет. Интерполяция выполняется в OKLCH с привязкой вашего цвета к ближайшему шагу, поэтому оттенок сохраняется от 50 до 950.

Можно ли использовать шкалу в коммерческих целях?

Да. Шкала оттенков — это вычисленные числовые значения без лицензионных ограничений — то, что вы экспортируете, принадлежит вам.

Почему некоторые шаги получаются сероватыми?

Цвета с высокой хроматичностью выходят за пределы sRGB на крайних точках; движок сжимает хроматичность там, чтобы шаги оставались насыщенными, а не превращались в серые или неоновые.