Что такое цветовой круг
Цветовой круг — это способ упорядочить цвета по оттенку (Hue) так, чтобы было видно, какие цвета близки друг к другу, а какие находятся напротив. На практике он помогает быстро находить гармоничные сочетания для интерфейсов, иллюстраций, брендинга и полиграфии.
Как пользоваться на этой странице
- Выберите базовый цвет на круге (клик/перетаскивание) — так вы задаёте оттенок и насыщенность.
- Точно задайте цвет через HEX или RGB, либо нажмите на квадратный свотч, чтобы открыть встроенный пикер.
- Отрегулируйте яркость ползунком «Яркость» — он меняет светлоту текущего цвета, не меняя его оттенок.
- Выберите метод сочетания — ниже появится гармоничная палитра, а её цвета будут отмечены маркерами на круге.
Что означают оси в круге
- По углу меняется оттенок (Hue): полный спектр по окружности.
- По радиусу меняется насыщенность (Saturation): ближе к центру цвет спокойнее, ближе к краю — насыщеннее.
- Яркость (Value) регулируется отдельным ползунком: это удобно, потому что сам круг остаётся наглядным даже при низкой яркости.
Методы сочетаний
Комплементарное — 2 цвета, расположенные напротив друг друга (180°). Это самый контрастный метод: хорошо работает для акцентов (кнопка/CTA) и выделения важных элементов. Чтобы палитра не выглядела «кричащей», обычно один из цветов делают доминирующим, а второй — дозируют.
Аналогичное — 3 близких оттенка. Даёт мягкую, цельную палитру: подходит для фонов, иллюстраций, градиентов и спокойных интерфейсов. Если нужно больше контраста, добавьте нейтральный цвет (серый/белый/чёрный) или усиливайте разницу по яркости.
Триада — 3 цвета, равномерно распределённые по кругу (120°). Хороший баланс разнообразия и читаемости: можно выбрать один основной цвет, второй — для вторичных элементов, третий — для акцентов.
Разделённое комплементарное — 3 цвета: базовый + два цвета по сторонам от его комплемента. По ощущениям это похоже на комплементарное сочетание, но контраст получается менее «жёстким» и чаще выглядит приятнее в UI.
Тетрада — 4 цвета (две комплементарные пары). Метод даёт богатую палитру для сложных проектов (дашборды, инфографика), но важно контролировать доли и яркость, иначе набор может выглядеть слишком пёстро.
Квадрат — 4 цвета, равноудалённые по окружности (примерно 90°). Получается энергичная палитра «на разные роли» (ошибка, успех, предупреждение, информация), но для аккуратного результата чаще всего один цвет делают основным, а остальные — поддерживающими.
Куда унести сочетание
Часто задаваемые вопросы
Как подобрать сочетающиеся цвета?
Выберите базовый оттенок на круге и сравните комплементарную, аналогичную и триадную гармонии. Затем проверьте контраст выбранной пары для текста и фона.
Что показывает цветовой круг?
Круг показывает взаимное положение оттенков и помогает находить близкие, противоположные и равноудалённые цвета.
