Оттенки цвета

Светлые и тёмные варианты одного цвета

Перейти к инструменту 3 запуска в день без регистрации. Общий лимит на любые сервисы.

Оттенки цвета

Генерирует шкалу оттенков от самого светлого к самому тёмному. Удобно для UI-дизайна: hover, active, фон, рамки.

От 5 до 40. Стандартно - 20.
Сбросить

О сервисе

Бесплатный генератор оттенков. По заданному HEX генерирует от 5 до 40 вариантов от самого светлого до самого тёмного. Удобно для создания шкалы яркости в дизайне.

Когда пригодится

  • Создать шкалу яркости для кнопок интерфейса
  • Подобрать фоновые тона на основе фирменного цвета
  • Сгенерировать градацию цвета для графиков и диаграмм
  • Настроить палитру состояний элементов при наведении
  • Выбрать гармоничные светлые и темные тона для веб-страницы
  • Подготовить цветовую растяжку для дизайн-системы

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

  1. Введите базовый цвет (HEX)
  2. Укажите количество оттенков
  3. Нажмите «Построить шкалу» и посмотрите результат

Частые вопросы

Зачем нужны оттенки?

Для UI-дизайна: основной цвет, его светлые и тёмные варианты для фона, границ, состояний (hover, active).

Как создать цветовую шкалу по коду HEX?

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

Сколько оттенков можно получить из одного цвета?

Сервис позволяет сгенерировать от 5 до 40 вариантов яркости для выбранного цвета. Вы можете самостоятельно выбрать нужное число оттенков в этом диапазоне перед построением шкалы.

Попробуйте прямо сейчас

Оттенки цвета доступен в общем лимите платформы. Без регистрации можно сделать 3 запуска в день.

Открыть инструмент