Как подобрать цветовую гармонию по HEX-коду

Введите HEX-код RGB, выберите тип гармонии и запустите построение. Если ничего не указать, инструмент использует #3498db и дополнительную гармонию.

Что делает генератор цветовых гармоний

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

Цвет можно ввести как HEX-код RGB. Если перед числом нет символа #, он добавляется автоматически. Трёхзначная запись расширяется до шестизначной, поэтому краткая форма также может быть использована как входное значение. Тип гармонии и цвет можно не указывать: в таком случае применяются цвет #3498db и дополнительная гармония. Если вы хотите проверить несколько подходов, меняйте тип гармонии, сохраняя исходный цвет.

Доступны пять распознаваемых типов: дополнительная, аналогичная, триадная, расщеплённо-дополнительная и тетрадная. Названия в поле типа нужно передавать в поддерживаемом виде, включая подчёркивания в split_complementary и tetradic, если интерфейс предоставляет это поле как текстовый ввод.

Как получить гармонию по HEX-коду

1. Откройте инструмент и найдите поле для цвета. Введите HEX-код RGB, например #3498db. Если вы вводите трёхзначную форму, используйте только допустимые шестнадцатеричные символы. Символ # можно не добавлять: отсутствующий начальный символ будет добавлен при обработке.

2. Найдите управление типом гармонии и выберите нужный вариант. Для первого сравнения подойдёт complementary, то есть дополнительная гармония. Для соседних оттенков выберите analogous, для цветового треугольника triadic, для расщеплённого дополнительного сочетания split_complementary, а для тетрады tetradic. Если поле типа оставить пустым, будет использован вариант complementary.

3. Запустите построение результата. Если оба поля оставить без значения, инструмент обработает цвет #3498db с дополнительной гармонией. При введённом цвете и пустом типе будет сохранён ваш цвет, но тип останется дополнительным.

4. Просмотрите базовый цвет и созданные варианты. Для дополнительной гармонии оттенок исходного цвета сдвигается на 180 градусов, а насыщенность и светлота сохраняются. Для аналогичной гармонии создаются варианты со сдвигами оттенка на -30 и +30 градусов; их светлота составляет 90 процентов от светлоты входного цвета. Для триадной гармонии используются сдвиги на 120 и 240 градусов. Для расщеплённо-дополнительной применяются сдвиги на 150 и 210 градусов, а для тетрадной на 60, 180 и 240 градусов.

5. Скопируйте нужные значения из результата в макет или палитру. Если вы сравниваете типы между собой, оценивайте их относительно одного и того же базового HEX-кода. Так легче понять, какая схема лучше подходит для вашей задачи, не смешивая влияние исходного цвета и выбранного преобразования.

Как читать результат и проверять его границы

В результате для распознанного типа гармонии присутствуют нормализованный базовый цвет и созданные цвета этой схемы. Сгенерированные RGB-каналы округляются, ограничиваются диапазоном от 0 до 255 и записываются как шестизначные HEX-коды в нижнем регистре с начальным символом #. Поэтому форма результата может отличаться от записи, которую вы ввели: например, отсутствие # или краткая трёхзначная форма будут приведены к нормализованному виду.

Не воспринимайте каждый вариант как отдельную рекомендацию по контрастности, читаемости или доступности: инструмент строит цвета по выбранному преобразованию, а не сообщает о пригодности палитры для конкретного интерфейса. Дополнительная схема располагает цвет на противоположной точке цветового круга по оттенку, но сохраняет насыщенность и светлоту входа. Аналогичная схема, напротив, собирает соседние оттенки и одновременно меняет светлоту созданных вариантов. Эти различия помогают выбрать направление для дальнейшей ручной проверки.

Для триадного запроса результат содержит четыре записи гармонии, включая базовый цвет. У расщеплённо-дополнительного запроса построение завершается успешно, а тетрадная схема использует три указанных сдвига оттенка. Если тип не распознан, ответ содержит ошибку, а не созданную палитру. В такой ситуации проверьте написание и выберите один из поддерживаемых вариантов. Также не делайте вывод о точных визуальных свойствах цвета только по HEX-строке: итоговый вид зависит от экрана, фона и соседних элементов.

Практический пример

Дизайнер проверяет дополнительную палитру для макета, начиная с синего цвета #3498db.

Введите #3498db, выберите complementary и запустите построение.

В результате появятся нормализованный базовый цвет и созданные цвета для дополнительной гармонии; HEX-значения будут представлены в нижнем регистре, с шестью цифрами и начальным #.

Ограничения

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

Частые ошибки

• Если вместо поддерживаемого типа указано другое значение, инструмент возвращает ответ с ошибкой, а не готовые цвета. Выберите один из пяти распознаваемых вариантов и проверьте написание, особенно в split_complementary и tetradic.

Частые вопросы

Что произойдёт, если не указать цвет или тип гармонии?

Если поле цвета пусто, используется #3498db. Если поле типа гармонии пусто, применяется complementary, то есть дополнительная схема.

Можно ли ввести HEX-код без символа #?

Да, отсутствие начального # допускается: символ добавляется при обработке. Трёхзначная HEX-запись расширяется до шестизначной.

Какие типы цветовой гармонии доступны?

Выберите complementary, analogous, triadic, split_complementary или tetradic. Другое значение не распознаётся как поддерживаемый тип и приводит к ответу с ошибкой.