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

Превратите один цвет в шкалу 50–950 в стиле Tailwind, а также в tints, shades и tones. Расчёт в OKLCH и sRGB, экспорт в CSS, Tailwind или JSON.

Настройки оттенков

Базовый цвет

#3b82f6rgb(59 130 246)hsl(217 91% 60%)oklch(62.3% 0.188 259.8)

Шаги светлых / тёмных / приглушённых оттенков

Экспорт

Формат

Имя токена

Шкала 50–950 оставляет ваш цвет как 500 и меняет светлоту и хрому OKLCH для остальных шагов, сохраняя тон.

Шкала 50–950

#eef5ff

oklch(96.8% 0.015 257.2)

#e1edff

oklch(94.3% 0.028 258.4)

#c9deff

oklch(89.6% 0.051 259.4)

#a3c6ff

oklch(82.2% 0.089 260)

#73a8ff

oklch(73.2% 0.139 259.9)

#3b82f6

oklch(62.3% 0.188 259.8)

#266ad8

oklch(54.6% 0.182 259.9)

#1554b8

oklch(47% 0.17 260)

#074095

oklch(39.5% 0.15 259.7)

#002d72

oklch(32% 0.128 259.6)

#012156

oklch(26.5% 0.103 259.7)

Светлые, тёмные и приглушённые оттенки

Светлые (смешение с белым)

Тёмные (смешение с чёрным)

Приглушённые (смешение с серым #808080)

Смешивание в sRGB, как color-mix(in srgb, …), равными шагами; нажмите на цвет, чтобы скопировать его.

Код для экспорта

:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

Что такое Генератор оттенков цвета?

Разворачивает один цвет в 11-ступенчатую шкалу 50–950, как в палитрах Tailwind, а также в ряды tints (смешивание с белым), shades (с чёрным) и tones (с серым). Все значения можно копировать по отдельности или экспортировать как переменные CSS, SCSS, Tailwind v3/v4 или JSON.

Как пользоваться Генератор оттенков цвета

Введите базовый цвет.
Изучите шкалу 50–950; ваш цвет это шаг 500.
Задайте число шагов для рядов tints, shades и tones.
Щёлкните по любому образцу, чтобы скопировать его.
Выберите формат экспорта и имя токена и скопируйте шкалу.

Пример

Ввод

#3b82f6, CSS variables, token name brand

Вывод

:root {
  --brand-50: #eef5ff;
  --brand-100: #e1edff;
  --brand-200: #c9deff;
  --brand-300: #a3c6ff;
  --brand-400: #73a8ff;
  --brand-500: #3b82f6;
  --brand-600: #266ad8;
  --brand-700: #1554b8;
  --brand-800: #074095;
  --brand-900: #002d72;
  --brand-950: #012156;
}

Когда использовать Генератор оттенков цвета

Подходит для построения полной цветовой шкалы дизайн-системы или темы Tailwind из одного цвета бренда, а также для вариантов hover и active. Шкала это разумная алгоритмическая отправная точка; для рабочих дизайн-систем отдельные шаги всё равно стоит подправить и проверить контраст для текста.

Как работает Генератор оттенков цвета

Для шкалы базовый цвет переводится в OKLCH и остаётся неизменным на шаге 500. Светлые шаги сдвигают яркость на фиксированную долю пути к 0,985 (95%, 88%, 75%, 55%, 30% для 50–400) и уменьшают насыщенность; тёмные шаги движутся к 0,2 (18%–85% для 600–950) с чуть меньшей насыщенностью. Оттенок сохраняется, и каждый шаг приводится к гамме sRGB. Tints, shades и tones это смеси в гамма-кодированном sRGB, как color-mix(in srgb, …), с равными шагами 1/(n+1).