Цветовой круг
Основной цвет
По окружности меняется тон, к центру - насыщенность. Стрелки: ←/→ - тон, ↑/↓ - насыщенность.
Цветовая схема
Используйте основной оттенок для крупных поверхностей, а контрастный - для акцента.
Подробнее →Цветовой круг онлайн для подбора цветов
Инструмент помогает подобрать цвета онлайн по правилам цветовой гармонии и получить готовые коды для сайта, презентации, иллюстрации или оформления интерьера.
Начните с одного оттенка: укажите HEX, RGB или HSL либо выберите цвет прямо на круге. Затем переключайте схемы и сравнивайте результат в палитре и на небольшом макете. Все значения пересчитываются сразу - ничего устанавливать не нужно.
Как пользоваться цветовым кругом
- Перемещайте основную точку по кругу: направление от центра задаёт цветовой тон, а расстояние до центра - насыщенность.
- Для точной настройки используйте ползунки насыщенности и светлоты, системную палитру или введите код цвета.
- Выберите тип сочетания: комплементарное, аналоговое, триаду, тетраду или другую схему.
- Нажмите на отдельный образец, чтобы скопировать HEX, либо скопируйте всю палитру как набор CSS-переменных.
Какую схему выбрать
| Схема | Расположение | Когда использовать |
|---|---|---|
| Комплементарная | Напротив, 180° | Сильный контраст, кнопки, акценты и динамичные композиции. |
| Аналоговая | Рядом на круге | Спокойные интерфейсы, природные сюжеты и мягкие переходы. |
| Триада | Три цвета через 120° | Разнообразная, но сбалансированная палитра для иллюстраций и брендинга. |
| Раздельная | 150° и 210° | Выразительный контраст, который легче сбалансировать, чем прямую пару. |
| Тетрада | Две контрастные пары | Сложные композиции с одним доминирующим цветом и несколькими акцентами. |
| Монохромная | Один тон, разная светлота | Строгий единый стиль, фоновые оттенки и состояния одного элемента. |
Подбор цветов для интерфейса
Гармония отвечает за отношения оттенков, но не гарантирует читаемость. Для интерфейса назначьте каждому цвету роль: фон, поверхность, основной текст, вторичный текст и акцент. Самые насыщенные цвета лучше оставить для небольших элементов, на которые пользователь должен обратить внимание.
После подбора палитры отдельно проверьте контраст текста и фона. Красивое сочетание может не соответствовать требованиям доступности.
Частые вопросы
Что такое цветовой круг?
Цветовой круг - это схема расположения оттенков по спектру. Она показывает отношения между цветами и помогает быстро находить спокойные, контрастные и сбалансированные сочетания.
Как подобрать цвета онлайн?
Выберите основной оттенок на круге или введите его HEX-код, затем переключайте цветовые схемы. Сервис автоматически рассчитает остальные цвета палитры, а нужный код можно скопировать одним нажатием.
Какая цветовая схема подходит для контрастного дизайна?
Для самого заметного контраста используйте комплементарную схему: два цвета находятся напротив друг друга. Более мягкий контраст дают раздельно-комплементарная схема и триада.
Чем круг RGB отличается от цветового круга Иттена?
RGB описывает цвета света на экране и подходит для сайтов, приложений и цифровой графики. Классический круг Иттена основан на смешении художественных красок, поэтому рассчитанные оттенки могут отличаться.
Можно ли поделиться подобранной палитрой?
Да. Нажмите «Скопировать ссылку»: основной цвет и выбранная схема сохранятся в адресе страницы. Получатель увидит ту же палитру.