Создать палитру

Используйте базовый цвет и настройте изменение тона, насыщенности и яркости. Генератор безопасно ограничивает значения, зацикливает тон на 360 градусах и округляет значения экспорта для удобства разработки.

Базовый цвет

Введите 3-значный или 6-значный HEX-код, например #C96C3D или #f80.

Схема гармонии Разные схемы меняют интервалы тонов, а ползунок разброса формирует вариации внутри набора.

Размер палитры Для точности гармонии некоторые схемы повторяют интервалы, если запрошено больше цветов, чем в основной модели.

Разброс вариаций

48%

Низкий разброс удерживает цвета ближе к базовому тону. Высокий — сильнее отдаляет светлые и темные акценты.

Палитра готова.

Результаты

Полоса предпросмотра показывает палитру слева направо. Каждый образец включает рекомендацию по контрасту текста для этого конкретного цвета.

Экспорт

Используйте переключатель форматов для выбора между CSS-переменными и JSON. Копирование доступно, если браузер поддерживает Clipboard API.

HEX RGB HSL CSS JSON

Формат экспорта

Как это работает

Генератор преобразует базовый HEX-цвет в HSL, применяет интервалы тонов на основе правила гармонии, а затем корректирует насыщенность и яркость в соответствии с разбросом.

1. Очистка ввода

HEX-код нормализуется и дополняется при необходимости. Некорректные данные не ломают страницу: отображается последняя валидная палитра до исправления ввода.

2. Математика цвета

Значения тона (Hue) циклически проходят по цветовому кругу. Насыщенность и яркость ограничиваются значениями от 0 до 100 для корректного вывода.

3. Готовый экспорт

Экспорт включает именование токенов, округленные значения и стабильный порядок, что позволяет сразу вставлять код в дизайн-системы или прототипы.

Цвета могут отображаться по-разному в зависимости от экрана, браузера и ОС. Используйте этот инструмент как отправную точку, а затем проверяйте выбор в целевой среде и на соответствие стандартам доступности.