Генератор оттенков цвета
Создайте полный диапазон светлых и тёмных оттенков на основе одного цвета — задайте шаг и количество оттенков, затем мгновенно копируйте любое значение.
Выберите базовый цвет, шаг в процентах и количество — все тинты и шейды вычисляются мгновенно в вашем браузере.
О Генератор оттенков цвета
Генератор оттенков цвета разворачивает один цвет в полный диапазон тонов и оттенков. Задайте базовый цвет, и инструмент создаст постепенно светлеющие тона с одной стороны и постепенно темнеющие оттенки с другой — классическую шкалу в стиле 50-900, используемую в современных дизайн-системах.
Два параметра управляют результатом: процент шага задаёт, насколько светлее или темнее становится каждый оттенок (1–25% за шаг), а количество определяет, сколько тонов и оттенков появится с каждой стороны от базового цвета, до десяти. Полоса градиента показывает всю шкалу целиком.
Генерация происходит мгновенно прямо в браузере по мере ввода — на сервер ничего не отправляется. Скопируйте любое отдельное значение, полный список или всю шкалу как CSS-переменные, готовые для вставки в файл дизайн-токенов или цветовую шкалу в стиле Tailwind.
Как использовать Генератор оттенков цвета
- Выберите базовый цвет с помощью палитры или введите значение; нажмите «Случайный цвет» для вдохновения.
- Задайте процент шага, чтобы определить, насколько сильно светлеет или темнеет каждый оттенок.
- Выберите количество оттенков, чтобы решить, сколько тонов и оттенков появится с каждой стороны.
- Щёлкните по образцу, чтобы скопировать его, или используйте «Копировать всё» и «Копировать CSS-переменные» для всей шкалы.