Генератор цветовых схем

Выберите базовый цвет и получите полную палитру, комплементарную, аналоговую, триадную, тетрадную или монохромную. Копируйте любой образец как HEX, RGB или HSL. Ничего не покидает ваш браузер.

Как работает Генератор цветовых схем

Генератор цветовых схем создаёт полные цветовые палитры из одного базового цвета: комплементарный (противоположный на цветовом круге), аналогичный (соседние оттенки), триадный (три равномерно расположенных), тетрадный (четыре оттенка в двух комплементарных парах) и монохроматический (различная светлота и насыщенность того же оттенка). Вся логика палитры выполняется в браузере; ничто из введённого не покидает устройство.

Каждая созданная палитра показывает цветовые образцы с готовыми для копирования значениями HEX и RGB. Это даёт дизайнерам отправную точку, основанную на теории цвета, а не на догадках. Поскольку генератор работает офлайн после первоначальной загрузки страницы, вы можете свободно экспериментировать с фирменными цветами во время встречи с клиентом без сетевого подключения. Введите базовый цвет в любой нотации, HEX, RGB или HSL, и каждый созданный образец возвращается во всех трёх, чтобы вы могли скопировать тот, который ожидает ваш дизайнерский инструмент.

Автор: Bastien Sulyan

Генератор цветовых схем: пошаговая инструкция

Выберите базовый цвет с помощью цветового пикера или введите HEX-значение.
Выберите тип гармонии на вкладках: комплементарный, аналогичный, триадный, тетрадный или монохроматический.
Цветовые образцы палитры появятся немедленно с их значениями HEX и RGB.
Нажмите на любой образец, чтобы скопировать его HEX-значение в буфер обмена.
Настройте базовый цвет для исследования вариаций и наблюдайте за обновлением всей палитры.

Частые сценарии использования

Дизайнер, начинающий новую фирменную идентичность, выбирает основной цвет и создаёт триадную палитру для предложения трёхцветных комбинаций клиенту.
Разработчик, создающий тему тёмного режима, использует монохроматическую палитру для генерации диапазона тонов и оттенков из одного фирменного цвета.
Создатель контента выбирает аналогичную палитру для подбора акцентных цветов для презентации, которая будет выглядеть целостно без резкого контраста.
UI-дизайнер использует комплементарную палитру для определения высококонтрастного акцентного цвета, выделяющегося на фоне основного фирменного цвета.

Часто задаваемые вопросы

Как работает комплементарная палитра?

Комплементарный цвет это оттенок, расположенный прямо напротив базового цвета на цветовом круге HSL, на расстоянии 180 градусов. Размещение комплементарных цветов рядом создаёт максимальный контраст. Инструмент показывает базовый цвет и его дополнение, а также более светлые и более тёмные варианты каждого.

В чём разница между триадной и тетрадной палитрами?

Триадная палитра использует три оттенка, равномерно расположенных на расстоянии 120 градусов друг от друга на цветовом круге. Тетрадная палитра использует четыре оттенка на расстоянии 90 градусов, образуя две комплементарные пары (также называемые двойной комплементарной или квадратной палитрой). Тетрадные палитры более сложны и требуют тщательной балансировки пропорций во избежание визуального шума.

Сохраняются ли выбранные цвета где-либо или отправляются ли они?

Нет. Создание палитры это арифметика на основе HSL-представления базового цвета: поворот угла оттенка на фиксированные значения, изменение светлоты и насыщенности. Каждое вычисление выполняется локально в браузере; ничто не отправляется на сервер.

Можно ли экспортировать палитру в CSS-файл или файл токенов дизайна?

Инструмент в настоящее время показывает образцы с копируемыми значениями HEX и RGB. Для полного экспорта пользовательских CSS-свойств или JSON токенов дизайна скопируйте значения вручную в файл токенов или CSS проекта. Специальная кнопка экспорта может быть добавлена в будущем обновлении.

Следует ли этот генератор какому-либо формальному стандарту теории цвета?

Вычисления палитры используют стандартные формулы поворота оттенка в цветовом пространстве HSL, что является общепринятым подходом в большинстве веб-дизайн-инструментов. Точная перцептивная однородность HSL имеет ограничения по сравнению с LAB или OKLCH, но повороты HSL дают палитры, соответствующие тем соглашениям цветового круга, которые обычно ожидают дизайнеры.