Генератор оттенков
Создаёт более светлые и тёмные варианты любого базового цвета для построения цветовой шкалы дизайн-системы.
Об этом инструменте
Генератор оттенков и теней создает более светлые и темные варианты из любого базового цвета. Оттенки создаются путем смешивания базового цвета с белым (добавление яркости), а тени — с черным (уменьшение яркости).
Инструмент создает до 5 уровней оттенков и 5 уровней теней плюс оригинальный базовый цвет, предоставляя 11-шаговую палитру вокруг выбранного оттенка. Нажмите на образец, чтобы скопировать его hex-код.
Как использовать
- Выберите базовый цвет с помощью цветовой палитры или введите hex-код.
- Используйте кнопки образцов для быстрой проверки предустановленных цветов.
- Отрегулируйте количество уровней (3-5), чтобы контролировать ширину палитры.
- Нажмите на образец, чтобы скопировать его hex-код. Используйте Скопировать все для полной шкалы.
Случаи использования
Дизайн-системам нужна систематическая цветовая шкала для каждого фирменного цвета. UI-дизайнеры создают состояния наведения, активное и отключенное из одного цвета действия. Фронтенд-разработчики создают последовательные варианты цветов.
Частые вопросы
- В чем разница между оттенком и тенью? — Оттенок смешивает цвет с белым (светлее); тень смешивает с черным (темнее). Тон смешивает с серым и здесь не генерируется.
- Как рассчитываются уровни? — Каждый уровень смешивает базовый цвет с белым или черным в пропорциях 10%, 30%, 50%, 70% и 90%, обеспечивая последовательные визуальные шаги.
- Могу ли я получить CSS-переменные из этого? — Вывод в hex-кодах. Вы можете вставить их в CSS как --color-500, --color-400 и т.д.