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

≈ 4 мин чтения

Ниже генератор оттенков из одного HEX: ровно 10 ступеней от самого светлого к самому тёмному. Не гармонии на круге — только tints/shades одного hue. Клик по свотчу копирует HEX; можно забрать весь ряд как CSS-переменные или списком.

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

Базовый HEX → 10 ступеней от светлого к тёмному

Цвет

HEX

Tints и shades - в чём разница

Tint — базовый цвет, смешанный с белым: светлее, мягче, подходит для фонов и hover. Shade — смесь с чёрным: темнее, плотнее, для текста, бордеров и активных состояний. Hue тот же, меняется светлота (и чуть насыщенность), поэтому ряд выглядит цельно.

Генератор палитры на сайте строит гармонии на цветовом круге. Этот инструмент — только шкала одного цвета: 10 ступеней от почти белого к почти чёрному.

Когда нужна шкала оттенков

UI-состояния кнопки и ссылки: default / hover / active / disabled — без прыжка в другой hue. Фоны карточек и секций в одной теме. Диаграммы и тепловые карты, где важен порядок «светлее = меньше». Токены дизайн-системы вроде —shade-100 … —shade-1000.

Практика.

Ступень с меткой «база» — ближайшая по светлоте к введённому HEX, не обязательно точная копия цвета. Для текста на фоне проверьте контраст (WCAG): светлая ступень под тёмный текст, тёмная — под светлый.

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

Выберите цвет пикером или вставьте HEX — свотчи обновятся сразу. Клик по свотчу копирует HEX. «Копировать CSS-переменные» кладёт блок:

css

:root {
  --shade-100: #E8F1FE;
  --shade-200: #C5DBFC;
  /* … */
  --shade-1000: #0B1220;
}

«Копировать список HEX» — через запятую, удобно для конфигов и чатов. Всё считается в браузере, цвет на сервер не уходит.

Коротко

Один hue, десять ступеней светлоты — быстрый старт для UI-шкалы и токенов. Нужны комплементарные или триадные цвета — берите генератор палитры.

HEX · CSS

← К списку статей