Цветовые гармонии: комплементарная, аналоговая, триада и другие

Что такое цветовая гармония

Гармония это правило подбора цветов, которые сочетаются друг с другом. Берётся базовый цвет, его светлота и насыщенность сохраняются, а тон поворачивается на заданные углы по цветовому кругу.

Углы здесь самое простое. Не менее важно, какой круг вращать: классический HSL и перцептивный OKLCH при одном и том же угле дают заметно разные цвета. Все примеры ниже построены от #2a7fbf, спокойного синего средней светлоты.

Комплементарная, сплит, аналоговая, триада, тетрада, квадрат

В каждой строке сохранены светлота базового цвета в OKLCH, 0.577, и его насыщенность, 0.127. Меняется только тон, на углы из таблицы. Если повёрнутый цвет выходит за охват sRGB, насыщенность немного снижается, поэтому пара цветов чуть менее яркие. Монохромная схема устроена иначе: тон тот же, а светлота меняется шагом 0.12.

• Комплементарная: самое сильное напряжение. Второй цвет лучше оставить для мелких акцентов, например для главной кнопки.
• Сплит-комплементарная: та же энергия, но её проще уравновесить, потому что акцент разделён на двух соседей противоположного тона.
• Аналоговая: спокойная и цельная. Хороша для иллюстраций и фонов, слаба, когда один элемент должен выделяться.
• Триада, тетрада и квадрат: живые и трудные в управлении. Пусть один цвет ведёт, а остальные занимают мало места.
• Монохромная: один тон в нескольких ступенях светлоты. Самый надёжный выбор для интерфейсов, ведь контраст всё равно даёт светлота.

Почему круг HSL даёт неровные гармонии

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

Поворот в OKLCH сохраняет воспринимаемую светлоту. Вот #f4b400, повёрнутый обоими способами, и светлота OKLCH у каждого результата.

В наборе HSL светлота гуляет от 0.489 до 0.857: синий и фиолетовый проваливаются, мятный светится. Набор OKLCH держится между 0.802 и 0.817. То же с чистыми основными цветами RGB: #ff0000, #00ff00 и #0000ff образуют идеальную триаду в HSL, но их светлота в OKLCH равна 0.628, 0.866 и 0.452.

Есть и цена. Синий такой же светлый, как этот жёлтый, не может быть очень ярким на экране sRGB, поэтому у комплементарного #97c0ff насыщенность 0.10 вместо 0.166. Приходится выбирать между равной светлотой и равной яркостью, а у пары жёлтый и синий получить обе сразу нельзя.

Художественный круг RYB и экранный круг RGB

Круг из художественной школы это RYB: основные цвета красный, жёлтый и синий, как при смешивании красок. На нём дополнительный к красному это зелёный, а к синему оранжевый. Экран смешивает свет, поэтому цифровые инструменты используют круг RGB, где дополнительный к красному это голубой, а к синему жёлтый.

Ошибки тут нет, просто круги отвечают на разные вопросы. RYB следует традиции живописи, RGB и OKLCH следуют тому, как работают экран и глаз. Если редактор предлагает голубой там, где вы ждали зелёный, значит он использует круг RGB.

Столбец OKLCH показывает, что равная светлота делает с крайними цветами. Дополнительный к чистому синему становится тёмной охрой с той же светлотой 0.45, а дополнительный к чистому жёлтому почти белым лавандовым со светлотой 0.96.

Правило 60-30-10 для гармонии

Гармония говорит, какие цвета взять, но не сколько каждого. Этот пробел закрывает правило 60-30-10: около 60% площади отдают основному цвету, 30% второму и 10% акценту. При равных долях даже удачная гармония выглядит пёстро.

В интерфейсе 60% обычно занимает почти нейтральный цвет с оттенком базового тона, 30% сам базовый цвет, 10% комплементарный акцент. Вот готовый набор от #2a7fbf.

:root {
    --surface: #eff6fd;
    --primary: #2a7fbf;
    --accent: #ab6708;
    --text: #15232f;
}

Как проверить контраст гармонии

Читаемость текста даёт разница в светлоте, а не в тоне. Комплементарная пара выше максимально далека по тону, но #2a7fbf на #ab6708 даёт по WCAG всего 1.05:1, а по APCA Lc 0: как текст это почти невидимо.

У равной светлоты есть и плюс. Белый текст на любом цвете из гармоний OKLCH выше даёт от 4.04:1 до 4.62:1. На HSL-версии тех же гармоний разброс от 2.15:1 до 8.90:1. Поэтому для всего набора OKLCH работает одно исправление: опустите светлоту до 0.52, и белый текст проходит 4.5:1 на любом тоне с насыщенностью 0.127, от 5.00:1 до 5.91:1.

Чтобы поставить два цвета гармонии как текст и фон, разведите их по светлоте: тона оставьте, один цвет опустите примерно к 0.35, другой поднимите к 0.93. Потом проверьте настоящую пару в проверке контраста, а если акцент несёт смысл, прогоните палитру через симулятор нарушений цветового зрения.

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