Что такое цветовой круг и как работают схемы
Если вместо готовых гармоний сервис выводит предупреждение или подобранные цвета выглядят некорректно, причина обычно в формате входного HEX-кода или в ожидании от схемы, которую инструмент не строит. Частые сценарии: «Поле hex обязательно» - код не введен; «HEX должен быть в формате #RGB или #RRGGBB» - пропущена решетка или лишние символы; результат кажется «странным» - выбранная схема (например, тетрадная) геометрически шире ожидаемой.
В инструменте подбора цветовых гармоний Zyntec расчет палитр строится строго по математическим моделям цветового пространства. Достаточно передать базовый код, чтобы система мгновенно рассчитала координаты всех зависимых оттенков для выбранного типа гармонии.
Геометрия схем: градусы и правила смещения
Каждая гармоническая схема использует собственную фигуру или фиксированный шаг смещения угла (Hue) внутри круга от 0 до 360 градусов:
- Комплементарная схема (поворот на 180 градусов): базовый цвет объединяется с диаметрально противоположным. Это дает максимально возможный контраст по цветовому тону.
- Аналогичная схема (+/-30 градусов): базовый оттенок дополняется двумя ближайшими соседями по кругу. Разница между точками составляет всего 30 градусов, что создает мягкий, плавный градиент без резких переходов.
- Триадная схема (три точки через 120 градусов): образует равносторонний треугольник на круге. Цвета остаются контрастными, но визуально уравновешивают друг друга сильнее, чем чистая комплементарная пара.
- Тетрадная схема (четыре точки через 90 градусов): вписывает в круг правильный квадрат. Содержит две взаимно перпендикулярные пары противоположных цветов, обеспечивая богатое разнообразие палитры.
- Раздельно-комплементарная (Split-complementary, 150 и 210 градусов): базовый тон сочетается с двумя оттенками, лежащими по бокам от противоположного ему цвета (отклонение на 30 градусов от точки 180). Это сохраняет выразительный контраст, но снижает визуальное напряжение.
- Монохромная схема (5 градаций одного тона): оттенок на круге не меняет свой градус. Палитра формируется за счет изменения светлоты и насыщенности: строятся два более темных оттенка, базовый цвет и два более светлых с последовательным уменьшением насыщенности.
Сводная таблица параметров схем
| Схема гармонии | Количество цветов | Углы смещения на круге | Особенности структуры |
|---|---|---|---|
| Комплементарная | 2 | 180° | Максимальный контраст |
| Аналогичная | 3 | -30°, 0°, +30° | Мягкое соседство оттенков |
| Триадная | 3 | 0°, +120°, +240° | Равносторонний треугольник |
| Тетрадная | 4 | 0°, +90°, +180°, +270° | Квадратная сетка из двух пар |
| Split-complementary | 3 | 0°, +150°, +210° | Мягкий контраст через соседей |
| Монохромная | 5 | 0° (один цветовой тон) | 2 темных, базовый, 2 светлых |
Как это выглядит на практике: пример с базой #5E6AD2
Возьмем значение по умолчанию в Zyntec - сине-фиолетовый оттенок #5E6AD2. Применяя к нему различные правила геометрического смещения, мы получаем принципиально разные решения под задачи оформления:
- В комплементарном расчете смещение на 180 градусов находит теплый желто-горчичный оттенок. Получается контрастная пара для акцентов.
- В аналогичном расчете смещения на 30 градусов влево и вправо дают глубокий синий и насыщенный фиолетовый цвета, создавая спокойный монолитный блок.
- В триадной схеме шаг в 120 градусов добавляет к сине-фиолетовому теплый оранжево-красный и свежий зеленый тона.
- В split-complementary базовый
#5E6AD2дополняется не чистым желтым, а золотисто-оранжевым и салатовым (150 и 210 градусов). - В монохромной гамме тон фиксируется, а генератор выдает пять плашек: от глубокого темного индиго до пастельного лавандового.
Правила ввода параметров и работа инструмента
Генератор гармоний принимает значение в поле hex. Вы можете передавать цвет в нескольких форматах:
- Короткий вид
#RGB(например,#5A2). - Полный вид
#RRGGBB(например,#5E6AD2). - Символ решетки указывать необязательно: система принимает как
5E6AD2, так и#5E6AD2. - Допустимы только цифры
0-9и буквы латиницыA-F(в любом регистре).
Все введенные данные автоматически нормализуются к стандартному шестизначному формату #RRGGBB. Если поле оставлено пустым, сервис вернет ошибку «Введите HEX-цвет». При вводе недопустимых символов или некорректной длины строки отобразится сообщение «HEX должен быть в формате #RGB или #RRGGBB».
Обработка экстремально темных и блеклых цветов
Если выбрать в качестве базы чистый черный (#000000), серый или крайне темный оттенок, классический математический поворот угла не сработает: у ахроматических цветов цветовой тон не выражен, а любые гармонии на выходе слились бы в неразличимые черные плашки.
Для решения этой проблемы в алгоритме предусмотрена автоматическая корректировка: очень темные и малонасыщенные цвета принудительно подтягиваются к минимальному порогу яркости и насыщенности в 10%. Благодаря этому даже при вводе околочерного базового кода полученная палитра остается наглядной, различимой и пригодной для переноса в макет.
Какую схему выбрать для витрины и интерфейса
Выбор геометрии на круге зависит от роли цвета в структуре страницы:
- Для главных кнопок действия (CTA), плашек скидок и акцентных бейджей подходит комплементарная или split-complementary схема: они сразу привлекают внимание к целевому действию.
- Для фоновых блоков, карточек товаров, подложек и выпадающих меню оптимальны монохромная или аналогичная схемы: они не перегружают зрение и сохраняют цельность стилистики каталога.
- Для разнородных категорий каталога, инфографики и цветовой маркировки статусов заказа лучше использовать триадную или тетрадную гармонию: они позволяют назначить каждому элементу собственный различимый цвет в единой визуальной гамме.