Блог
Конвертеры единиц

Генератор цветовых палитр

Введите базовый HEX-цвет, выберите тип цветовой гармонии и, для аналоговой и монохромной схем, количество цветов — генератор построит палитру и покажет HEX-код каждого цвета.

Количество цветов учитывается только для аналоговой и монохромной схем; комплементарная всегда даёт 2 цвета, триадная — 3, тетрадная — 4.

Результат

У этой страницы вообще нет серверной части. Вставленная таблица разбирается кодом JavaScript внутри вашего же браузера, график рисуется на элементе canvas на вашей машине, файл экспорта собирается локально. Ничего не загружается, не хранится и не пишется ни в какие логи. После загрузки страницы можно отключить сеть — всё продолжит работать, и это самый простой способ проверить обещание самостоятельно.

Факты и границы применимости

Комплементарная Базовый цвет и цвет с тоном, повёрнутым на 180°
Триадная Три цвета с тоном, повёрнутым на 0°, 120° и 240°
Тетрадная Четыре цвета с тоном, повёрнутым на 0°, 90°, 180° и 270°
Аналоговая Несколько цветов с шагом 30° по тону вокруг базового
Монохромная Один и тот же тон и насыщенность, светлота от 12% до 90%

Когда этот метод вводит в заблуждение

Как это считается

Базовый HEX-цвет переводится в модель HSL (тон, насыщенность, светлота) — это удобная система для построения гармоничных сочетаний.

В зависимости от выбранного типа палитры тон базового цвета поворачивается на фиксированные углы (180° для комплементарной, 120°/240° для триадной, 90°/180°/270° для тетрадной) или изменяется мелкими шагами (для аналоговой) при неизменных насыщенности и светлоте.

Для монохромной палитры тон и насыщенность остаются постоянными, а светлота равномерно распределяется от тёмного к светлому оттенку.

Каждый полученный цвет HSL переводится обратно в HEX-код и отображается в виде образца с подписанным кодом.

Вопросы и ответы

Чем отличаются типы палитр?

Они основаны на разных геометрических фигурах на цветовом круге: комплементарная берёт противоположный цвет, триадная и тетрадная — равномерно расставленные точки, аналоговая — соседние тона, монохромная — вариации светлоты одного тона.

Почему для комплементарной схемы не учитывается количество цветов?

У комплементарной, триадной и тетрадной схем число цветов задано самим правилом построения (2, 3 и 4 соответственно) — настройка количества применима только к аналоговой и монохромной схемам.

Подходит ли палитра для веб-дизайна?

Да, как отправная точка — перед использованием в интерфейсе рекомендуется проверить контрастность текста и фона отдельным инструментом на соответствие WCAG.

Мои данные куда-то отправляются?

Нет, весь расчёт выполняется в вашем браузере.

Похожие утилиты

Все утилиты