Гармония цветового круга: палитры, которые работают
Что на самом деле значат комплементарные, аналоговые и триадные схемы и как превратить один фирменный цвет в полную палитру интерфейса.
Многие разработчики спокойно собирают целое приложение, но впадают в ступор, когда нужно выбрать второй цвет. С первым просто: у бренда уже есть синий, или вам просто нравится бирюзовый. Ломается всё на втором — и вот у дашборда предупреждающий оранжевый ругается со всем вокруг.
Генератор цветовых палитр решает это математикой, которую художники вывели задолго до CSS: поворачивайте оттенок по цветовому кругу на фиксированные углы, и результаты будут смотреться согласованно.
Пять правил простыми словами
Каждая схема — это набор позиций на круге, измеренных в градусах оттенка:
- Комплементарная — цвет строго напротив, через 180°. Синему достаётся оранжевый. Максимальный контраст, поэтому киноафиши так любят сочетание teal-and-orange.
- Аналоговая — два соседа, по 30° с каждой стороны. У синего это сине-фиолетовый и голубой. Спокойно, без напряжения, хорошо для фонов.
- Триадная — три оттенка через 120°. Сбалансированно и живо; вспомните костюмы классических супергероев.
- Тетрадная — четыре оттенка через 90°. Самая капризная схема, работает, когда один цвет явно главный.
- Монохромная — один оттенок и несколько ступеней светлоты. Испортить невозможно, заскучать — легко.
Возьмём #3b82f6, синий по умолчанию в инструменте. Его оттенок — 217°. Поворот на 180° даёт примерно 37° — тёплый янтарный. Эту пару никто не подбирал на глаз, она получилась из арифметики. А выглядит как осознанное решение.
Из одного цвета — в рабочую палитру интерфейса
Правило гармонии выдаёт оттенки, но не говорит, куда их класть. Чаще всего дизайнеры берут распределение 60-30-10, позаимствованное из дизайна интерьеров: около 60% экрана — нейтральный фон или самый светлый тон базового цвета, 30% — сам базовый цвет, 10% — акцент.
Эти 10% и есть место, где комплементарный цвет отрабатывает своё. Оранжевая кнопка на синей странице притягивает взгляд именно потому, что оранжевого больше нигде нет. Размажьте тот же оранжевый по заголовкам, рамкам и иконкам — эффект умрёт, останется просто пёстрая страница.
Промежуточные тона (ховеры, рамки, отключённый текст) удобно брать из монохромного ряда базового цвета. Пяти ступеней светлоты небольшому проекту обычно хватает.
Где поворот оттенка обманывает
Одна честная оговорка. HSL считает все оттенки равными, а глаз — нет. Жёлтый при светлоте 50% выглядит заметно ярче синего при тех же 50%: человеческое зрение чувствительнее всего в жёлто-зелёной зоне. Поэтому триадная палитра из среднего синего может выдать жёлтый, который рядом с соседями смотрится неоновой вывеской.
Лечится вручную и быстро: после генерации приглушите светлоту у цвета, который визуально кричит. Именно эту проблему решают новые цветовые пространства вроде OKLCH, но классическая математика круга живёт в HSL, и для набросков палитры её вполне достаточно.
И проверьте контраст перед релизом. Красивая аналоговая пара всё ещё может провалить WCAG, если один цвет ляжет текстом на другой. У образцов видны значения HSL, так что два цвета с почти одинаковой светлотой заметны сразу.
Попробуйте на своём фирменном цвете
Возьмите HEX-код, который уже используется в проекте, вставьте его в Генератор цветовых палитр и пролистайте пять схем. Понравившиеся коды копируются в один клик — HEX, RGB или HSL с каждого образца.