Возьмите один и тот же серый квадрат и положите его сначала на белый лист, потом на чёрный. На белом он покажется тёмным, почти графитовым. На чёрном посветлеет до пепельного. Краска не менялась, изменилось окружение. Примерно так работает цвет в дизайне: он почти никогда не означает что-то сам по себе, он означает что-то рядом с другими цветами и внутри конкретной задачи.
Теория цвета звучит академично, а на деле это несколько правил, которые разбираются за вечер. В этой статье мы собрали их так, чтобы ими можно было пользоваться сегодня же: из каких трёх параметров собирается любой оттенок, чем RGB отличается от CMYK и почему печать выходит тусклее экрана, какие бывают схемы сочетаний и как ими пользоваться, если цветовой круг Иттена вы видите впервые, как за 20 минут собрать палитру для сайта или презентации и какие пять ошибок делают макет дешёвым.
Отдельный большой раздел мы отдали психологии цвета. Про неё написаны сотни статей, и почти все повторяют друг за другом три цифры, которые при проверке рассыпаются. Мы прошли по первоисточникам и показываем, что там на самом деле было сказано.
Если хочется сначала понять базу композиции, загляните в наш разбор принципа контраста: цвет там один из инструментов, и вместе эти две темы читаются гораздо легче.
Статья пригодится не только дизайнерам. С цветом ежедневно работают маркетологи, SMM-специалисты, продакты, авторы презентаций, селлеры на маркетплейсах и все, кто хоть раз собирал слайд и думал: «вроде всё ровно, а выглядит как-то дёшево». Посмотреть, кто вообще этим занимается профессионально, можно в обзоре 18 направлений дизайна.
А если хочется освоить ремесло системно, у нас собрана подборка курсов по работе с цветом и сочетаниям: там 315 программ, от коротких интенсивов по колористике до полноценных дизайнерских профессий.
Что такое цвет с точки зрения дизайнера

Само понятие цветового спектра появилось благодаря Исааку Ньютону: в 1672 году он пропустил солнечный луч через стеклянную призму и разложил белый свет на радугу. С тех пор дизайнеры описывают цвет не словами «красненький потемнее», а тремя измеримыми параметрами.
Свойства цвета: три параметра, которыми описывают любой оттенок
| Свойство | Что означает простыми словами | Как называется в программах | Что происходит, если крутить |
|---|---|---|---|
| Тон | Собственно «какой это цвет»: красный, синий, зелёный. Положение на цветовом круге | Hue (H) | Красный превращается в оранжевый, потом в жёлтый |
| Насыщенность | Насколько цвет чистый и яркий. На нуле любой тон становится серым | Saturation (S) | Кислотный салатовый превращается в приглушённый оливковый |
| Светлота | Сколько в цвете света. На максимуме белый, на минимуме чёрный | Brightness / Lightness (B, L) | Синий превращается в голубой или в тёмно-синий |
Запомнить стоит одно: тон отвечает за «какой», а два других ползунка за «насколько громко».
Эта тройка называется HSB (Hue, Saturation, Brightness: тон, насыщенность, яркость). Она есть в Figma, Photoshop, Illustrator и почти в любом редакторе. Новичку удобнее всего собирать палитру именно в ней: подобрали один тон, а дальше двигаете два ползунка и получаете семейство родственных оттенков.
Практический вывод. Большинство «некрасивых» палитр ломаются не на выборе тонов. Тона там нормальные, а насыщенность и светлота у всех цветов одинаково задраны в потолок.
Хроматические и ахроматические цвета
Ахроматические — это чёрный, белый и вся серая шкала между ними. У них нет тона, они различаются только светлотой. Хроматические — все остальные, у которых тон есть.
Для новичка тут есть неочевидная, но рабочая мысль: ахроматика — это ваша страховка. Макет, собранный на белом, паре серых и одном ярком акценте, выглядит спокойно и дорого почти всегда. Макет из пяти равноправных ярких цветов выглядит нормально примерно никогда.
Тёплые и холодные цвета
Красный, оранжевый и жёлтый считают тёплыми, синий, голубой и фиолетовый холодными, зелёный живёт посередине и уходит в ту сторону, куда его сдвинули. Тёплые визуально приближаются к зрителю и читаются как энергия, холодные отступают вглубь и читаются как спокойствие.
Физики за этим делением почти нет, это удобная рабочая условность. Пользуются ей так: если нужно, чтобы кнопка выступала вперёд на холодном фоне, берут тёплый акцент. Если нужно утопить фоновую иллюстрацию под текстом, её уводят в холод и снижают насыщенность.
RGB, CMYK, HEX и Pantone: почему на экране одно, а в печати другое
Цветовая модель — это способ записать цвет числами, чтобы его можно было передать другому человеку или устройству. Моделей несколько, потому что экран и бумага получают цвет физически разными способами.
| Модель | Как устроена | Где применяется | Что нужно знать новичку |
|---|---|---|---|
| RGB | Складывает три луча света: красный, зелёный, синий. Все три на максимуме дают белый | Сайты, приложения, презентации, соцсети, всё, что смотрят с экрана | Дефолт для digital. Если работа никогда не пойдёт в типографию, оставайтесь тут |
| CMYK | Вычитает свет четырьмя красками: голубой, пурпурный, жёлтый, чёрный. Все на максимуме дают почти чёрный | Печать: визитки, упаковка, полиграфия, наружная реклама | Часть ярких экранных цветов физически невоспроизводима краской и при переводе тускнеет |
| HSB / HSL | Описывает цвет через тон, насыщенность и яркость | Ручной подбор оттенков в любом редакторе | Самая понятная человеку модель. Ей удобно собирать палитру |
| HEX | Шестизначный код вида #1A73E8, короткая запись того же RGB | Вёрстка, дизайн-системы, передача цвета разработчику | Это просто короткая форма записи RGB |
| Lab | Описывает цвет так, как его видит человек, независимо от устройства | Профессиональная цветокоррекция, сверка цвета между устройствами | Новичку трогать необязательно |
| Pantone | Каталог готовых смесевых красок с номерами (в каталоге больше 28 000 оттенков) | Фирменные цвета брендов, печать плашкой | Нужен, когда цвет обязан совпасть на пачке, вывеске и футболке |
Практический вывод из всей таблицы один.
Сочный неоновый зелёный, который отлично смотрится на мониторе, в CMYK превращается в болотный, потому что таких чистых пигментов у печати попросту нет. Диапазон цветов, который устройство умеет воспроизвести, называется цветовым охватом, и у бумаги он заметно уже, чем у экрана.
Отсюда правило: если макет поедет в печать, переключайтесь в CMYK на старте, ещё до первого макета. Тогда вы сразу видите реальные цвета и не влюбляетесь в те, которых не получите. Подробнее про то, что происходит с файлом по пути в типографию, рассказывает наш материал о дизайнере полиграфии.
Если же цвет уже снят или отрисован и его нужно вытянуть, это отдельное ремесло: базовые приёмы разобраны в статье про цветокоррекцию в Photoshop.
Канал основателя Checkroi Вани Буявца3 700 человек читают мой Телеграм-канал про нейросетиСобрал промпты для Claude Code и ChatGPT, разборы ИИ-инструментов и лайфхаки по продвижению бизнеса в одном местеПрисоединитьсяСхемы сочетаний: как получить палитру из цветового круга

Цветовой круг — это спектр, свёрнутый в кольцо, чтобы было видно, какие тона стоят рядом, а какие напротив. Самый известный вариант собрал Иоганнес Иттен, преподаватель Баухауса, в начале XX века. В основе круга лежат три основных цвета (красный, жёлтый, синий), из их смешения получаются составные, а из смешения составных с основными получаются третичные. Круг нужен ровно для одного: он превращает подбор цвета из гадания в геометрию.
Четыре схемы, которых новичку хватит на годы:
- Монохромная. Один тон, разная насыщенность и светлота. Самая безопасная схема: испортить её почти невозможно, зато легко получить скуку. Лечится одним контрастным акцентом.
- Аналоговая. Два-три соседних тона на круге, например синий, голубой и бирюзовый. Выглядит спокойно и цельно, хорошо работает для фонов и длинных текстов.
- Комплементарная. Два цвета напротив друг друга: синий и оранжевый, красный и зелёный. Максимальный контраст, идеально для акцентов. В равных долях режет глаз, поэтому один цвет делают главным, второй точечным.
- Триада. Три тона на равном расстоянии по кругу. Живо и энергично, но требует дисциплины: один ведущий, два подчинённых.
Иттен описал ещё и семь типов контраста: по тону, по светлоте, тепло-холодный, комплементарный, симультанный, по насыщенности и по площади цветовых пятен. Разбирать их здесь целиком смысла нет, у нас есть отдельная подробная инструкция: цветовой круг Иттена и как им пользоваться.
Психология цвета: откуда взялись популярные цифры
Дальше самый спорный раздел статьи.
Если загуглить «психология цвета», вы получите десятки одинаковых статей с таблицей «синий про доверие, красный про аппетит, зелёный про экологию» и тремя одними и теми же цифрами. Мы прошли по источникам этих цифр. Дальше по пунктам.
Миф первый: «90 % решения о продукте зависит от цвета»
Фраза кочует из статьи в статью в формулировке «до 90 % первичных суждений о товаре основаны исключительно на цвете». Источник у неё есть: работа Сатьендры Сингха Impact of color on marketing, журнал Management Decision, 2006 год.
Только там сказано другое. Речь идёт про первое впечатление в первые полторы минуты знакомства, и это не эксперимент с покупателями, а обзор литературы. Сам автор в тексте отмечает противоречивость исследований по психологии цвета. По дороге через сотню перепечаток «цвет влияет на первое впечатление» превратилось в «цвет решает 90 % продаж». Это разные утверждения.
Миф второй: «красная кнопка конвертит лучше зелёной»
Классика статей про конверсию: «красная кнопка призыва к действию (по-английски CTA, call to action) дала +21 %». Цифра настоящая, это A/B-тест сервиса Performable, опубликованный в блоге HubSpot ещё в 2011 году.
Нюанс в том, что это один тест на одной странице с одной аудиторией. Зелёная кнопка там проиграла не потому, что зелёный слабее по природе: она хуже выделялась на том конкретном макете. Возьмите красный лендинг и поставьте на него красную кнопку, и она проиграет любой другой.
Что работает вместо «цвета кнопки». Конверсию двигает контраст оттенка с окружением и место элемента в иерархии страницы. Проверить свою кнопку просто: сделайте скриншот, обесцветьте его и посмотрите, осталась ли она заметной.
Миф третий: «синий вызывает доверие, а красный аппетит»
Тут ситуация тоньше. Устойчивые ассоциации у цветов есть, и исследования их фиксируют. Проблема в силе эффекта: он мал, сильно зависит от культуры, возраста, контекста и товара, и почти всегда перебивается всем остальным дизайном.
Синий у банков стоит не из-за нейрофизиологии доверия. Он стоит потому, что так делают банки уже полвека, и у людей сложилась категорийная привычка. Это работает как выученный язык. Поэтому у российского зрителя зелёный банк, красный банк и жёлтый банк уживаются в голове одновременно и прекрасно узнаются.
Культура и контекст решают больше, чем сам оттенок
Белый в европейской традиции читается как чистота и свадьба, в ряде азиатских культур это цвет траура. Зелёный в исламских странах имеет отдельное религиозное значение. Красный в Китае означает удачу и процветание, а в финансовом интерфейсе тот же красный означает убыток.
Вывод для практики простой: значение цвета берут из задачи и аудитории, таблицы из интернета тут бесполезны. Посмотрите, какими цветами говорит ваша категория, решите, вы встраиваетесь в этот язык или сознательно ломаете его, и дальше проверяйте гипотезу на живых людях. Про то, как устроена такая проверка на практике, мы писали в материале о работе бренд-дизайнера.
Цвет бренда: как его выбирают на самом деле
Отдельный вопрос, который приходит сразу после теории: как выбрать цвет для логотипа и всего остального. Здесь у новичка обычно два сценария. Первый: открыть таблицу значений и взять «цвет доверия». Второй: взять любимый оттенок. Оба дают случайный результат, потому что пропускают главный шаг.
Главный шаг такой: посмотрите, какими цветами уже говорит ваша категория. Выпишите десять ближайших конкурентов и снимите пипеткой их основные цвета на одну доску. Дальше решение принимается осознанно и всего из двух вариантов.
Можно встроиться в язык категории. Тогда человек с первого взгляда понимает, что перед ним банк, аптека или служба доставки, и не тратит силы на расшифровку. Цена решения: вас легко перепутать с соседями.
Можно сознательно выйти из него. Если вся полка синяя, ярко-жёлтая упаковка заметна издалека, и это работающий приём. Цена другая: придётся объяснять аудитории, кто вы такие, а это деньги на рекламу. Второй путь имеет смысл, когда у продукта есть реальное отличие, которое этот цвет обозначает.
Дальше цвет надо не только выбрать, но и удержать. Для этого его фиксируют в брендбуке (документе с правилами использования фирменного стиля) сразу в нескольких системах: HEX для сайта, RGB для презентаций и видео, CMYK для печати и номер Pantone для случаев, когда оттенок обязан совпасть на вывеске, пакете и мерче. Без этой таблицы фирменный цвет расползается: на сайте он один, в печатном каталоге чуть темнее, на корпоративной футболке вообще другой.
Проверка на прочность. Хороший фирменный цвет работает на плашке размером с иконку приложения, на чёрном фоне, в печати одной краской и в чёрно-белой ксерокопии. Если оттенок разваливается хотя бы в одном из этих сценариев, его придётся дорабатывать позже, уже с переделкой всех носителей.
Цвет остаётся лишь одной частью айдентики, и в одиночку он не работает.
Один цвет почти никогда не продаёт сам по себе, продаёт связка «цвет плюс форма плюс постоянство». Узнаваемость приходит через год-два, когда вы ни разу от выбранного цвета не отступили.
Как собрать палитру за 20 минут: 5 шагов

Дальше рабочий алгоритм, по которому можно собрать палитру для сайта, презентации или карточки товара, ни разу не открыв учебник.
Шаг 1: начните с референса
Соберите мудборд (доску с референсами: скриншотами, фотографиями, чужими работами, которые попадают в нужное настроение). Восемь-двенадцать картинок достаточно. Собирать палитру из головы почти всегда получается хуже, чем вытаскивать её из материала, который уже нравится.
Шаг 2: вытащите из референса базовый цвет
Возьмите пипетку и снимите с мудборда один тон, который повторяется чаще других. Это ваш базовый цвет. Дальше уводите его по светлоте и насыщенности, чтобы получить два-три родственных оттенка: тёмный для текста и заголовков, светлый для фонов и подложек.
Шаг 3: раздайте цветам роли по правилу 60-30-10
Классическая пропорция, пришедшая из интерьера и отлично работающая в цифре:
- 60 % — доминирующий цвет. Чаще всего это нейтраль: белый, светло-серый, тёмный графит. Фон, воздух, основная площадь
- 30 % — поддерживающий цвет. Блоки, карточки, шапка, иллюстрации
- 10 % — акцент. Кнопки, ссылки, важные цифры, состояние «выбрано»
Главная ценность правила в том, что оно запрещает делать всё одинаково громким. Акцент работает только пока его мало.
Шаг 4: проверьте контраст
Прогоните каждую пару «текст на фоне» через любой онлайн-чекер контраста. Ориентир из международного стандарта WCAG: 4,5:1 для обычного текста и 3:1 для крупного. Ниже этих значений часть людей ваш текст просто не прочитает.
Шаг 5: зафиксируйте палитру
Выпишите итоговые цвета HEX-кодами и подпишите каждому роль: фон, текст основной, текст второстепенный, акцент, ошибка, успех. Такой список уже зародыш дизайн-системы (набора готовых правил и элементов, из которых собираются все экраны проекта). Он экономит часы на втором и третьем макете, потому что решать заново уже нечего.
Инструменты, которые делают половину работы
| Сервис | Что делает | Когда брать |
|---|---|---|
| Adobe Color | Строит схемы по цветовому кругу, вытаскивает палитру из фото, проверяет доступность | Универсальный вариант, если нужен один инструмент на всё |
| Coolors | Генерирует палитры пробелом, позволяет запирать понравившиеся цвета | Когда идей нет совсем и нужен быстрый перебор |
| Paletton | Показывает схему сразу на макете-превью | Когда полосок мало и хочется увидеть палитру на макете |
| Color Hunt | Библиотека готовых палитр из четырёх цветов | Для быстрых задач: презентация, сторис, карточка |
| Contrast Checker | Считает коэффициент контраста пары цветов по WCAG | Обязательный финальный шаг для любого интерфейса |
Если непонятно, с чего начать: берите Adobe Color для сбора палитры и любой contrast checker для проверки. Этой пары хватает на 99 % задач новичка, остальное вопрос вкуса.
Доступность: как убедиться, что надпись вообще прочитают
WCAG — это международные рекомендации по доступности веб-контента: набор требований, чтобы сайтом могли пользоваться люди со слабым зрением, дальтонизмом и в неудобных условиях вроде яркого солнца на улице. Для цвета в них важны две вещи.
Первая: контраст текста и фона, тот самый коэффициент 4,5:1. Светло-серый текст на белом фоне выглядит на макете дизайнера воздушно и премиально, а на телефоне в метро исчезает.
Вторая: цвет никогда не должен быть единственным носителем смысла. Примерно каждый двенадцатый мужчина хуже различает красный и зелёный. Если у вас на графике зелёная линия «план» и красная «факт» и больше никаких отличий, для этих людей график пустой. Дублируйте цвет подписью, иконкой, штриховкой или формой линии.
Быстрая проверка за десять секунд. Сделайте скриншот макета и обесцветьте его. Если после этого понятно, где главное, где кнопка и что с чем связано, значит с иерархией всё в порядке, цвет у вас украшает и не тащит всю нагрузку в одиночку.
Тема контраста шире цвета и касается размера, формы и шрифта тоже. Полный разбор с семью видами контраста и чек-листом собран в статье «Принцип контраста: что это, какие бывают виды и как применять».
Где цвет работает по-разному: интерфейс, печать, интерьер и карточка товара
Одни и те же законы дают разные результаты в разных средах. Коротко по четырём самым частым.
Интерфейсы. Тут цвет прежде всего функционален: он показывает, что кликабельно, что выбрано, где ошибка и где успех. Палитра обязана иметь состояния (обычное, наведение, нажатие, недоступное) и работать в светлой и тёмной темах. Как это укладывается в профессию, разбираем в материале «Как стать UX/UI-дизайнером с нуля», а практику по макетам сайтов найдёте в советах по веб-дизайну.
Полиграфия и упаковка. Здесь всё упирается в CMYK, материал и способ печати: один и тот же файл на мелованной и на крафтовой бумаге даст разный результат. Фирменные цвета в таких проектах чаще фиксируют по Pantone. Что происходит с цветом на пути к полке, показываем в обзоре работы дизайнера упаковки.
Интерьер. В отличие от экрана, здесь цвет живёт при меняющемся освещении: утренний свет, вечерние лампы, соседняя стена. Поэтому образцы смотрят на месте и в разное время суток. Правило 60-30-10 родом как раз отсюда. Подробности собрали в статье «Как стать дизайнером интерьера с нуля».
Карточки на маркетплейсах. Самая жёсткая среда: у вас есть превью размером с спичечный коробок в ленте из сорока конкурентов. Работает контраст с белым фоном площадки и один опознавательный акцент, повторяющийся во всех карточках бренда. Как этому учатся, разобрали в тексте про дизайнера карточек для маркетплейсов.
5 ошибок, из-за которых макет выглядит дёшево

Почти все неудачные цветовые решения новичков сводятся к пяти сценариям.
Ошибка 1: слишком много цветов
Сколько цветов можно использовать в одном макете? Столько, сколько вы готовы объяснить.
Самая частая и самая заметная. Каждый новый цвет должен что-то означать, иначе он превращается в шум. Рабочий максимум для новичка: два хроматических цвета плюс нейтрали. Нужно больше вариантов? Берите оттенки уже выбранных тонов вместо новых.
Ошибка 2: чистые цвета прямо из палитры редактора
Ярко-красный #FF0000 и чистый #0000FF в природе почти не встречаются, поэтому глаз читает их как «сделано на коленке». Сдвиньте насыщенность вниз процентов на десять-пятнадцать и добавьте в цвет немного соседнего тона. Тот же приём спасает градиенты: градиент из двух чистых цветов почти всегда выглядит грязно посередине. Разница заметна сразу.
Ошибка 3: одинаковая насыщенность у всего
Когда фон, текст, кнопка и иллюстрация одинаково яркие, глазу негде отдохнуть и непонятно, куда смотреть. Иерархию делают разной громкостью: приглушённая база, спокойный средний слой, один звонкий акцент.
Ошибка 4: цвет как единственный носитель смысла
Красная и зелёная линии без подписей, статусы заказа только цветными точками, обязательные поля формы, помеченные одним лишь оттенком рамки. Про это подробно выше, в разделе про доступность.
Ошибка 5: палитра из головы вместо палитры из задачи
«Мне нравится бирюзовый» плохо работает как аргумент, если продукт про строгость и деньги. Начинайте с вопросов: кто аудитория, какими цветами говорит категория, какое ощущение нужно на выходе. Вкус подключается позже, когда рамки уже заданы.
Чек-лист перед сдачей макета
- Хроматических цветов не больше двух, остальное нейтрали
- У каждого цвета выписана роль, не только HEX
- Пропорция близка к 60-30-10, акцента визуально мало
- Все пары «текст на фоне» проходят 4,5:1
- В чёрно-белом скриншоте иерархия читается
- Ни один смысл не передаётся только цветом
- Если проект пойдёт в печать, файл собран в CMYK
- Палитра одинаково выглядит на телефоне и на мониторе
Где научиться работать с цветом
Сразу снимем главный страх: уметь рисовать для работы с цветом необязательно. Подбор палитры — это ремесло с понятными правилами, которым учат.
Теорию цвета можно собрать самостоятельно: она компактная и хорошо описана. Тяжело даётся другое: насмотренность и обратная связь. Без человека, который скажет «вот здесь у тебя акцента слишком много, а здесь фон спорит с текстом», собственные ошибки не видны годами. Именно за это платят на курсах: за практику с разбором работ.
Обучение работе с цветом бывает двух видов. Короткие интенсивы по колористике и цветоведению учат именно сочетать цвета и занимают от двух недель. Полные курсы графического дизайна и смежных профессий дают цвет как часть большой программы вместе с композицией, типографикой и софтом.
Ниже подборка программ, где работа с цветом входит в обязательную часть.
| Курс | Школа | Стоимость со скидкой | В рассрочку | Длительность | Обзор курса от Checkroi |
|---|---|---|---|---|---|
| Профессия «Дизайнер интерьеров» Перейти на сайт курса | 207 518 ₽ | 6898 ₽/мес. | 12 месяцев | Обзор курса | |
| Профессия «2D-художник» Перейти на сайт курса | 212 980 ₽ | 5450 ₽/мес. | 8 месяцев | Обзор курса | |
| Профессия «Графический дизайнер: расширенный курс» Перейти на сайт курса | 160 400 ₽ | 7496 ₽/мес. | 17 месяцев | Обзор курса | |
| Профессия «Моушн-дизайнер с нуля до ПРО» Перейти на сайт курса | 196 794 ₽ | 5466 ₽/мес. | 18 месяцев | Обзор курса | |
| Профессия «Motion-дизайнер» Перейти на сайт курса | 149 885 ₽ | 5500 ₽/мес. | 12 месяцев | Обзор курса | |
| Профессия «Ландшафтный дизайнер PRO» Перейти на сайт курса | 176 772 ₽ | 4294 ₽/мес. | 11 месяцев | Обзор курса | |
| Графический дизайн и коммуникации Перейти на сайт курса | 102 900 ₽ | 4743 ₽/мес. | 9 месяцев | Обзор курса | |
| Методист онлайн-курсов PRO Перейти на сайт курса | 77 100 ₽ | 3212 ₽/мес. | 7 месяцев | Обзор курса | |
| Профессия «Ландшафтный дизайнер» Перейти на сайт курса | 151 950 ₽ | 3864 ₽/мес. | 8 месяцев | Обзор курса | |
| Профессия «Предметный фотограф» Перейти на сайт курса | 139 918 ₽ | 4188 ₽/мес. | 8 месяцев | Обзор курса |
Больше программ — в полном каталоге курсов по сочетанию цветов
Если пока не хочется тратить деньги, начните с книг: у нас собрана подборка 16 книг для начинающих дизайнеров. А чтобы понять, в какую сторону вообще двигаться, посмотрите разбор 18 направлений дизайна с зарплатами и порогом входа: цвет нужен во всех, но задачи у них разные.




