Генератор цветовой палитры
Введите базовый цвет, выберите схему гармонии и сразу смотрите образцы. Копируйте отдельный HEX-код или всю палитру как пользовательские свойства CSS.
Работает в браузере: всё, что вы вводите, никуда не отправляется.
Как пользоваться
- Введите HEX-код или выберите цвет палитрой.
- Выберите схему гармонии из списка.
- Нажмите Копировать у образца, чтобы взять один код, или скопируйте блок CSS-переменных со всей палитрой.
Как это работает
Инструмент переводит базовый цвет из RGB в HSL (тон, насыщенность, светлота) и поворачивает тон. Например, #3366cc — это hsl(220, 60%, 50%). Дополнительный к нему цвет отстоит на 180°: hsl(40, 60%, 50%), то есть #cc9933. Повёрнутые цвета округляются до ближайших целых значений RGB.
Пример
По умолчанию стоит #3366cc и триадная схема: получаются #3366cc, #cc3366 и #66cc33, а CSS-блок — --color-1: #3366cc;, --color-2: #cc3366;, --color-3: #66cc33;. Чистый красный #ff0000 в раздельно-комплементарной схеме даёт красный плюс #00ff80 и #0080ff — два тона по обе стороны от голубого.
Советы
- Один цвет схемы делайте основным, остальные — акцентами: если использовать все поровну, выйдет пёстро.
- Аналоговые палитры выглядят спокойно, комплементарные — энергично.
- После вставки переименуйте переменные по роли (
--brand, --accent).
Частые вопросы
Как подбираются цвета?
Базовый цвет переводится в HSL. Схемы гармонии поворачивают тон на фиксированные углы цветового круга, а насыщенность и светлоту оставляют прежними, поэтому все цвета такие же яркие, как базовый. Первый образец каждой схемы — сам базовый цвет.
Чем триада отличается от тетрады?
Триада — три тона через 120°: сбалансированный, но живой набор. Тетрада здесь — четыре тона на 0°, 60°, 180° и 240°, прямоугольник на круге: в ней две пары дополнительных цветов, и баланс держать сложнее.
Как устроена монохромная схема?
Тон и насыщенность берутся от базового цвета, а светлота HSL ставится на 20, 35, 50, 65 и 80 %. Сам базовый цвет попадает в список, только если его светлота совпадает с одним из этих значений.
Гарантирован ли в палитре достаточный контраст?
Нет. Гармония описывает отношения тонов, а не читаемость. Любую пару «текст — фон» проверяйте в инструменте проверки контраста.