Теория цвета звучит академично. На практике это небольшой набор инструментов, к которым хороший дизайнер обращается на автомате. Семь классических гармоний охватывают 95% работы с палитрами — знание каждой и понимание того, когда её применять, — вот разница между палитрой, которая выглядит намеренной, и палитрой, которая выглядит случайной.

Круг — это компас

Каждое правило гармонии определяет позиции на цветовом круге из 12 секций. Вы выбираете основной оттенок, а правило говорит вам, где на круге взять остальные цвета. Правила не определяют насыщенность или светлоту — эти параметры вы настраиваете сами.

Дополнительная (противоположные оттенки)

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

Ловушка: при полной насыщенности дополнительные пары вибрируют неприятно. Приглушите один цвет (снизьте насыщенность, осветлите или затемните) и используйте другой как акцент.

Триадическая (три равномерно распределённых)

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

Ловушка: все три цвета при равной насыщенности конкурируют за внимание. Выберите один, который будет доминировать (60% дизайна), один поддерживающий (30%), один для акцентов (10%).

Аналогичная (соседи на круге)

Три-пять смежных оттенков: жёлтый-жёлто-зелёный-зелёный или синий-сине-фиолетовый-фиолетовый. Самая спокойная гармония — нет конфликта, потому что цвета не конкурируют. Природные сцены (закаты, леса) почти всегда аналогичные.

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

Раздельно-дополнительная (два почти-противоположных)

Выберите основной цвет, а затем возьмите два цвета, прилегающих к его дополнительному, вместо самого дополнительного. Мягче, чем строгая дополнительная, но всё ещё выразительна. Хороший вариант по умолчанию для дизайнеров, которым строгая дополнительная кажется слишком агрессивной.

Тетрадическая (две дополнительные пары)

Четыре оттенка, образующих прямоугольник на круге: например красный + зелёный + оранжевый + синий. Самая богатая гармония — много разнообразия — но сложнее всего в балансировке. Лучше всего работает, когда один цвет доминирует, а остальные три играют вспомогательную роль.

Ловушка: тетрадические палитры легко выглядят хаотично. Решите, какой цвет несёт вашу идентичность, и отправьте остальные три в подчинённые роли.

Монохроматическая (один оттенок, много значений)

Один оттенок с варьирующейся насыщенностью и светлотой. Максимальная согласованность, нулевой контраст оттенков. Идеальна для интерфейсов, где вы хотите, чтобы содержание (фото, типография) нёс визуальный интерес, а не UI элементы.

Большинство минималистичных SaaS-инструментов используют монохроматику — бренд это один синий, всё остальное в оттенках серого.

Трендовые (правильный выход за рамки правил)

Седьмой режим, который мы включили в наш Генератор цветовой палитры: 177 тщательно отобранных сообществом палитр от ColourLovers, Coolors и дизайнеров индустрии. Эти палитры часто нарушают классические правила специально — они работают, потому что дизайнер имел конкретное творческое намерение — и они отличный источник вдохновения, когда чистая теория производит что-то слишком безопасное.

Что выбрать?

Редакционный, спокойный, природный → аналогичная.
Выразительность, CTA, энергия → дополнительная или раздельно-дополнительная.
Яркий бренд, иллюстрация → триадическая.
Богатая редакционная, смелые кампании → тетрадическая.
Минималистичный UI, много фото → монохроматическая.
Застряли → посмотрите Трендовые.

За пределами правил

Все семь гармоний игнорируют два критических параметра: контраст (читается ли текст на этом фоне?) и семантический цвет (красный означает опасность в западном UI независимо от теории). Всегда проверьте свою финальную палитру на соответствие WCAG контрасту — Генератор цветовой палитры показывает вам AA/AAA соотношения каждой пары в один клик — и не выбирайте цвет опасности просто потому, что круг говорит, что он выглядит хорошо.

Правила — это отправные точки, а не конечные пункты. Сгенерируйте пять палитр, критикуйте их, регулируйте. Хорошие палитры получаются в результате итерации, а не одного броска кубика.

Правила цветовой гармонии: дополнительные, триадические, тетрадические и когда их использовать