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

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

#--11 шаг

#fff5ff

50профиль →

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

#ffdffd

100профиль →

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

#ffc2fa

200профиль →

с белым 1.46
с черным 14.35

#ffa0f5

300профиль →

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

#ff75ed

400профиль →

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

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

500профиль →

с белым 3.25
с черным 6.47

#e400cf

600профиль →

с белым 4.04
с черным 5.20

#cc00b8

700профиль →

с белым 4.93
с черным 4.26

#af009e

800профиль →

с белым 6.33
с черным 3.32

#8d0080

900профиль →

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

#66005d

950профиль →

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

// tailwind.config.js / @theme
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
        50: "#fff5ff",
        100: "#ffdffd",
        200: "#ffc2fa",
        300: "#ffa0f5",
        400: "#ff75ed",
        500: "#f438de",
        600: "#e400cf",
        700: "#cc00b8",
        800: "#af009e",
        900: "#8d0080",
        950: "#66005d",
        },
      },
    },
  },
};

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

Создание шкалы дизайн-системы из 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: "#fff5ff", 100: "#ffdffd", 200: "#ffc2fa", 300: "#ffa0f5", 400: "#ff75ed", 500: "#f438de", 600: "#e400cf", 700: "#cc00b8", 800: "#af009e", 900: "#8d0080", 950: "#66005d", }, }, }, }, };

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

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

Ввод

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

Проверка

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

Экспорт

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

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

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

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

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

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

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

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

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

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

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