Цветовой круг — главный инструмент дизайнера для подбора цветов. С ним палитра для логотипа, сайта или поста перестаёт быть делом вкуса и становится понятной системой. Рассказываем, как устроен круг, какие есть схемы сочетания цветов и как не ошибиться с палитрой в реальном макете.
Что такое цветовой круг
Цветовой круг — это цвета спектра, расставленные по кругу в том порядке, в котором они переходят друг в друга: красный, оранжевый, жёлтый, зелёный, голубой, синий, фиолетовый и обратно к красному. Самый известный вариант предложил художник Иоханнес Иттен: в нём 12 цветов.
- Основные цвета: красный, жёлтый, синий. Из них смешиваются все остальные.
- Составные цвета: оранжевый, зелёный, фиолетовый. Получаются смешением двух основных.
- Третичные цвета: например, жёлто-оранжевый или сине-зелёный. Стоят между основным и составным.
Для экрана дизайнеры чаще думают в модели RGB (красный, зелёный, синий), а для печати — в CMYK. Но схемы сочетаний работают одинаково в любом круге.
Тёплые и холодные цвета
Круг легко поделить пополам. Красные, оранжевые и жёлтые оттенки воспринимаются тёплыми: они ближе, активнее, привлекают внимание. Синие, голубые и зелёные — холодными: они спокойнее и как бы отходят назад.
На практике это значит: кнопку или главный акцент удобно делать тёплым цветом на холодном фоне, а не наоборот.
Схемы сочетания цветов
| Схема | Как найти на круге | Впечатление и где подходит |
|---|---|---|
| Монохромная | один цвет и его оттенки | спокойно и цельно: минимализм, интерфейсы |
| Аналоговая | 2–4 соседних цвета | мягко и гармонично: природные темы, иллюстрации |
| Комплементарная | два цвета напротив друг друга | контрастно и ярко: акценты, реклама, спорт |
| Расщеплённая комплементарная | цвет и два соседа его противоположности | контрастно, но мягче |
| Триада | три цвета через равные промежутки | живо: детские темы, игры, яркие бренды |
| Тетрада | две пары противоположных цветов | богато: большие системы с многими цветами |
Начинающим проще всего работать с монохромной и аналоговой схемами: в них трудно ошибиться. Комплементарная даёт самый сильный контраст, но её нужно дозировать.
Правило 60–30–10
Даже удачная схема выглядит пёстро, если все цвета занимают одинаково места. Помогает простое правило:
- 60% площади — основной цвет, обычно спокойный фон;
- 30% — дополнительный цвет для блоков, плашек, иллюстраций;
- 10% — акцент: кнопки, ссылки, важные детали.
Так глаз сразу понимает, что главное, а что второстепенное.
Насыщенность и светлота важнее оттенка
Новички часто подбирают правильные оттенки, но палитра всё равно «режет глаз». Обычно дело не в самих цветах, а в том, что все они одинаково яркие. Хорошая палитра почти всегда содержит:
- Светлый нейтральный для фона: почти белый, светло-серый, бежевый.
- Тёмный нейтральный для текста: почти чёрный или тёмно-синий, а не чистый #000000.
- Основной цвет бренда.
- Один акцент для действий.
Проверить, хорошо ли читается текст, можно простым приёмом: переведите макет в чёрно-белый. Если заголовок и фон слились, контраста не хватает.
Как подобрать палитру для бренда: пошагово
- Определите характер бренда. Строгий, дружелюбный, премиальный, молодёжный — от этого зависит, тёплые или холодные, яркие или приглушённые цвета нужны.
- Выберите основной цвет. Посмотрите, какие цвета у конкурентов, и подумайте, как выделиться.
- Выберите схему на круге и найдите дополнительный цвет и акцент.
- Добавьте нейтральные: фон и цвет текста.
- Проверьте палитру в деле: на визитке, посте, странице сайта, в светлой и тёмной версии.
- Запишите коды цветов в HEX, RGB и CMYK, чтобы бренд выглядел одинаково везде.
Где подбирать сочетания цветов онлайн
- Цветовой круг Иттена онлайн. Наш бесплатный инструмент на русском: выбираете цвет и схему, копируете палитру в HEX.
- Adobe Color. Цветовой круг со всеми схемами, можно вытащить палитру из фотографии.
- Coolors. Быстрый генератор палитр: нажимаете пробел, фиксируете понравившиеся цвета.
- Палитры в Figma и Illustrator. Удобно хранить цвета бренда прямо в рабочем файле.
Генератор подскажет идею, но решение, подходит ли палитра бренду и задаче, всё равно принимает дизайнер.
Частые ошибки
- Слишком много цветов: больше 3–4 без системы.
- Все цвета одинаково яркие, нет спокойного фона.
- Текст на цветном фоне без проверки контраста.
- Цвета подобраны на экране, а при печати выглядят тусклее. Для печати палитру нужно проверять в CMYK.
Психология цвета в визуальных коммуникациях
Как цвет влияет на восприятие и как осознанно использовать его в дизайне. Зарегистрируйтесь, и лекция сразу откроется в личном кабинете.
Как развить чувство цвета
Чувство цвета тренируется, как мышца. Проверьте, насколько точно вы различаете оттенки, в нашем бесплатном тесте на цветовосприятие. А системно разобраться в цвете, композиции и типографике можно на курсе графического дизайна с нуля: за 7 недель вы сделаете 13 проектов, от визитки и постера до логотипа и фирменного стиля, а преподаватель разберёт каждую работу. Academy Graphicmania — партнёр по учебной карте Töötukassa, подробнее на странице «Обучение по учебной карте».
Частые вопросы
Сколько цветов должно быть в палитре?
Обычно 3–5: светлый и тёмный нейтральные, основной цвет и один-два акцента. Больше цветов сложнее держать в системе.
Какие цвета сочетаются с красным?
На круге напротив красного — зелёный, это самый сильный контраст. Мягче смотрятся соседние оранжевые и розовые оттенки или красный с нейтральными: белым, серым, тёмно-синим.
Чем отличается RGB от CMYK?
RGB — цвета экрана, они получаются из света. CMYK — цвета печати, они получаются из красок. Яркие экранные цвета в печати часто выглядят тусклее, поэтому макеты для печати готовят в CMYK.