Цвет в дизайне: как он устроен и как собрать палитру, которая не выглядит дёшево

Разобрали, из каких трёх параметров собирается любой оттенок, чем RGB отличается от CMYK и как за 20 минут собрать палитру для сайта или презентации по правилу 60-30-10. Отдельно прошли по первоисточникам двух самых цитируемых цифр про психологию цвета: и «90 % решений о продукте зависит от цвета», и «красная кнопка даёт +21 %» при проверке оказываются слабее, чем принято думать. Уметь рисовать для этого не нужно, статья написана для новичков.
Статью написал:
Ваня Буявец, продюсер, основатель Checkroi
Ваня Буявец
Основатель Checkroi, продюсер, эксперт в выборе онлайн-курсов
Все 2386 статей автора Подписаться на Телеграм-канал
Одобрено экспертом:
Наташа Буявец, основатель Checkroi, эксперт по онлайн-курсам
Наташа Буявец
Основательница Checkroi, продюсер Youtube-каналов, эксперт по онлайн-курсам
Все 3045 экспертных мнений Подписаться на Телеграм-канал
Обложка: Цвет в дизайне: как он устроен и как собрать палитру, которая не выглядит дёшево

Возьмите один и тот же серый квадрат и положите его сначала на белый лист, потом на чёрный. На белом он покажется тёмным, почти графитовым. На чёрном посветлеет до пепельного. Краска не менялась, изменилось окружение. Примерно так работает цвет в дизайне: он почти никогда не означает что-то сам по себе, он означает что-то рядом с другими цветами и внутри конкретной задачи.

Теория цвета звучит академично, а на деле это несколько правил, которые разбираются за вечер. В этой статье мы собрали их так, чтобы ими можно было пользоваться сегодня же: из каких трёх параметров собирается любой оттенок, чем RGB отличается от CMYK и почему печать выходит тусклее экрана, какие бывают схемы сочетаний и как ими пользоваться, если цветовой круг Иттена вы видите впервые, как за 20 минут собрать палитру для сайта или презентации и какие пять ошибок делают макет дешёвым.

Отдельный большой раздел мы отдали психологии цвета. Про неё написаны сотни статей, и почти все повторяют друг за другом три цифры, которые при проверке рассыпаются. Мы прошли по первоисточникам и показываем, что там на самом деле было сказано.

Если хочется сначала понять базу композиции, загляните в наш разбор принципа контраста: цвет там один из инструментов, и вместе эти две темы читаются гораздо легче.

Статья пригодится не только дизайнерам. С цветом ежедневно работают маркетологи, SMM-специалисты, продакты, авторы презентаций, селлеры на маркетплейсах и все, кто хоть раз собирал слайд и думал: «вроде всё ровно, а выглядит как-то дёшево». Посмотреть, кто вообще этим занимается профессионально, можно в обзоре 18 направлений дизайна.

А если хочется освоить ремесло системно, у нас собрана подборка курсов по работе с цветом и сочетаниям: там 315 программ, от коротких интенсивов по колористике до полноценных дизайнерских профессий.

CheckroiCheckroiПодборка курсов по сочетанию цветов297 курсов • 43 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить

Что такое цвет с точки зрения дизайнера

Рой-дизайнер подбирает цвет на планшете

Само понятие цветового спектра появилось благодаря Исааку Ньютону: в 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 века. В основе круга лежат три основных цвета (красный, жёлтый, синий), из их смешения получаются составные, а из смешения составных с основными получаются третичные. Круг нужен ровно для одного: он превращает подбор цвета из гадания в геометрию.

Четыре схемы, которых новичку хватит на годы:

  • Монохромная. Один тон, разная насыщенность и светлота. Самая безопасная схема: испортить её почти невозможно, зато легко получить скуку. Лечится одним контрастным акцентом.
  • Аналоговая. Два-три соседних тона на круге, например синий, голубой и бирюзовый. Выглядит спокойно и цельно, хорошо работает для фонов и длинных текстов.
  • Комплементарная. Два цвета напротив друг друга: синий и оранжевый, красный и зелёный. Максимальный контраст, идеально для акцентов. В равных долях режет глаз, поэтому один цвет делают главным, второй точечным.
  • Триада. Три тона на равном расстоянии по кругу. Живо и энергично, но требует дисциплины: один ведущий, два подчинённых.

Иттен описал ещё и семь типов контраста: по тону, по светлоте, тепло-холодный, комплементарный, симультанный, по насыщенности и по площади цветовых пятен. Разбирать их здесь целиком смысла нет, у нас есть отдельная подробная инструкция: цветовой круг Иттена и как им пользоваться.

CheckroiCheckroiПодборка курсов по графическому дизайну231 курс • 44 школыСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить

Психология цвета: откуда взялись популярные цифры

Дальше самый спорный раздел статьи.

Если загуглить «психология цвета», вы получите десятки одинаковых статей с таблицей «синий про доверие, красный про аппетит, зелёный про экологию» и тремя одними и теми же цифрами. Мы прошли по источникам этих цифр. Дальше по пунктам.

Миф первый: «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 % задач новичка, остальное вопрос вкуса.

Ваня БуявецКанал основателя Checkroi Вани БуявцаЗабирайте промпты и обучение по нейросетям в моём Телеграм-каналеБольше 3 700 человек уже применяют Claude Code, ChatGPT и другие нейросети в работе, учёбе, бизнесе и жизниПерейти в канал

Доступность: как убедиться, что надпись вообще прочитают

WCAG — это международные рекомендации по доступности веб-контента: набор требований, чтобы сайтом могли пользоваться люди со слабым зрением, дальтонизмом и в неудобных условиях вроде яркого солнца на улице. Для цвета в них важны две вещи.

Первая: контраст текста и фона, тот самый коэффициент 4,5:1. Светло-серый текст на белом фоне выглядит на макете дизайнера воздушно и премиально, а на телефоне в метро исчезает.

Вторая: цвет никогда не должен быть единственным носителем смысла. Примерно каждый двенадцатый мужчина хуже различает красный и зелёный. Если у вас на графике зелёная линия «план» и красная «факт» и больше никаких отличий, для этих людей график пустой. Дублируйте цвет подписью, иконкой, штриховкой или формой линии.

Быстрая проверка за десять секунд. Сделайте скриншот макета и обесцветьте его. Если после этого понятно, где главное, где кнопка и что с чем связано, значит с иерархией всё в порядке, цвет у вас украшает и не тащит всю нагрузку в одиночку.

Тема контраста шире цвета и касается размера, формы и шрифта тоже. Полный разбор с семью видами контраста и чек-листом собран в статье «Принцип контраста: что это, какие бывают виды и как применять».

CheckroiCheckroiПодборка курсов по дизайну интерфейсов и UX/UI107 курсов • 37 школСравните цены, школы, программу и найдите выгодные предложения по обучениюСравнить

Где цвет работает по-разному: интерфейс, печать, интерьер и карточка товара

Одни и те же законы дают разные результаты в разных средах. Коротко по четырём самым частым.

Интерфейсы. Тут цвет прежде всего функционален: он показывает, что кликабельно, что выбрано, где ошибка и где успех. Палитра обязана иметь состояния (обычное, наведение, нажатие, недоступное) и работать в светлой и тёмной темах. Как это укладывается в профессию, разбираем в материале «Как стать UX/UI-дизайнером с нуля», а практику по макетам сайтов найдёте в советах по веб-дизайну.

Полиграфия и упаковка. Здесь всё упирается в CMYK, материал и способ печати: один и тот же файл на мелованной и на крафтовой бумаге даст разный результат. Фирменные цвета в таких проектах чаще фиксируют по Pantone. Что происходит с цветом на пути к полке, показываем в обзоре работы дизайнера упаковки.

Интерьер. В отличие от экрана, здесь цвет живёт при меняющемся освещении: утренний свет, вечерние лампы, соседняя стена. Поэтому образцы смотрят на месте и в разное время суток. Правило 60-30-10 родом как раз отсюда. Подробности собрали в статье «Как стать дизайнером интерьера с нуля».

Карточки на маркетплейсах. Самая жёсткая среда: у вас есть превью размером с спичечный коробок в ленте из сорока конкурентов. Работает контраст с белым фоном площадки и один опознавательный акцент, повторяющийся во всех карточках бренда. Как этому учатся, разобрали в тексте про дизайнера карточек для маркетплейсов.

5 ошибок, из-за которых макет выглядит дёшево

Рой доволен готовым макетом

Почти все неудачные цветовые решения новичков сводятся к пяти сценариям.

Ошибка 1: слишком много цветов

Сколько цветов можно использовать в одном макете? Столько, сколько вы готовы объяснить.

Самая частая и самая заметная. Каждый новый цвет должен что-то означать, иначе он превращается в шум. Рабочий максимум для новичка: два хроматических цвета плюс нейтрали. Нужно больше вариантов? Берите оттенки уже выбранных тонов вместо новых.

Ошибка 2: чистые цвета прямо из палитры редактора

Ярко-красный #FF0000 и чистый #0000FF в природе почти не встречаются, поэтому глаз читает их как «сделано на коленке». Сдвиньте насыщенность вниз процентов на десять-пятнадцать и добавьте в цвет немного соседнего тона. Тот же приём спасает градиенты: градиент из двух чистых цветов почти всегда выглядит грязно посередине. Разница заметна сразу.

Ошибка 3: одинаковая насыщенность у всего

Когда фон, текст, кнопка и иллюстрация одинаково яркие, глазу негде отдохнуть и непонятно, куда смотреть. Иерархию делают разной громкостью: приглушённая база, спокойный средний слой, один звонкий акцент.

Ошибка 4: цвет как единственный носитель смысла

Красная и зелёная линии без подписей, статусы заказа только цветными точками, обязательные поля формы, помеченные одним лишь оттенком рамки. Про это подробно выше, в разделе про доступность.

Ошибка 5: палитра из головы вместо палитры из задачи

«Мне нравится бирюзовый» плохо работает как аргумент, если продукт про строгость и деньги. Начинайте с вопросов: кто аудитория, какими цветами говорит категория, какое ощущение нужно на выходе. Вкус подключается позже, когда рамки уже заданы.

Чек-лист перед сдачей макета

  • Хроматических цветов не больше двух, остальное нейтрали
  • У каждого цвета выписана роль, не только HEX
  • Пропорция близка к 60-30-10, акцента визуально мало
  • Все пары «текст на фоне» проходят 4,5:1
  • В чёрно-белом скриншоте иерархия читается
  • Ни один смысл не передаётся только цветом
  • Если проект пойдёт в печать, файл собран в CMYK
  • Палитра одинаково выглядит на телефоне и на мониторе

Где научиться работать с цветом

Сразу снимем главный страх: уметь рисовать для работы с цветом необязательно. Подбор палитры — это ремесло с понятными правилами, которым учат.

Теорию цвета можно собрать самостоятельно: она компактная и хорошо описана. Тяжело даётся другое: насмотренность и обратная связь. Без человека, который скажет «вот здесь у тебя акцента слишком много, а здесь фон спорит с текстом», собственные ошибки не видны годами. Именно за это платят на курсах: за практику с разбором работ.

Обучение работе с цветом бывает двух видов. Короткие интенсивы по колористике и цветоведению учат именно сочетать цвета и занимают от двух недель. Полные курсы графического дизайна и смежных профессий дают цвет как часть большой программы вместе с композицией, типографикой и софтом.

Ниже подборка программ, где работа с цветом входит в обязательную часть.

КурсШколаСтоимость со скидкойВ рассрочкуДлитель­ностьОбзор курса от Checkroi
Профессия «Дизайнер интерьеров»
Перейти на сайт курса
SkillboxSkillbox207 518 ₽6898 ₽/мес.12 месяцевОбзор курса
Профессия «2D-художник»
Перейти на сайт курса
SkillboxSkillbox212 980 ₽5450 ₽/мес.8 месяцевОбзор курса
Профессия «Графический дизайнер: расширенный курс»
Перейти на сайт курса
НетологияНетология160 400 ₽7496 ₽/мес.17 месяцевОбзор курса
Профессия «Моушн-дизайнер с нуля до ПРО»
Перейти на сайт курса
ContentedContented196 794 ₽5466 ₽/мес.18 месяцевОбзор курса
Профессия «Motion-дизайнер»
Перейти на сайт курса
SkillboxSkillbox149 885 ₽5500 ₽/мес.12 месяцевОбзор курса
Профессия «Ландшафтный дизайнер PRO»
Перейти на сайт курса
SkillboxSkillbox176 772 ₽4294 ₽/мес.11 месяцевОбзор курса
Графический дизайн и коммуникации
Перейти на сайт курса
НетологияНетология102 900 ₽4743 ₽/мес.9 месяцевОбзор курса
Методист онлайн-курсов PRO
Перейти на сайт курса
НетологияНетология77 100 ₽3212 ₽/мес.7 месяцевОбзор курса
Профессия «Ландшафтный дизайнер»
Перейти на сайт курса
SkillboxSkillbox151 950 ₽3864 ₽/мес.8 месяцевОбзор курса
Профессия «Предметный фотограф»
Перейти на сайт курса
SkillboxSkillbox139 918 ₽4188 ₽/мес.8 месяцевОбзор курса

Больше программ — в полном каталоге курсов по сочетанию цветов

Если пока не хочется тратить деньги, начните с книг: у нас собрана подборка 16 книг для начинающих дизайнеров. А чтобы понять, в какую сторону вообще двигаться, посмотрите разбор 18 направлений дизайна с зарплатами и порогом входа: цвет нужен во всех, но задачи у них разные.

Часто задаваемые вопросы

Сколько цветов можно использовать в одном дизайне?

Рабочий ориентир для новичка: два хроматических цвета плюс нейтрали (белый, серые, чёрный). Если нужно больше вариантов, берите оттенки уже выбранных тонов, меняя насыщенность и светлоту, а не добавляйте новые тона. Пропорцию задают по правилу 60-30-10: 60% нейтральной базы, 30% поддерживающего цвета, 10% акцента.

Нужно ли уметь рисовать, чтобы хорошо работать с цветом?

Нет. Подбор палитры — это ремесло с понятными правилами: три свойства цвета, схемы сочетаний по цветовому кругу, пропорция 60-30-10 и проверка контраста. Рисование помогает с насмотренностью, но не является входным билетом. Гораздо важнее регулярно разбирать чужие работы и получать обратную связь по своим.

Чем RGB отличается от CMYK простыми словами?

RGB складывает три луча света (красный, зелёный, синий) и работает на экранах: сайты, приложения, презентации, соцсети. CMYK вычитает свет четырьмя красками и работает в печати. У бумаги цветовой охват заметно уже, поэтому яркие экранные цвета при переводе в CMYK тускнеют. Если макет пойдёт в типографию, собирайте его в CMYK с самого начала.

Правда ли, что цвет влияет на продажи?

Влияет, но слабее, чем принято писать. Фраза «до 90% решения о продукте зависит от цвета» восходит к обзору Сатьендры Сингха в журнале Management Decision (2006), где речь шла о первом впечатлении в первые полторы минуты, а сам автор отмечал противоречивость исследований. Знаменитый «красный CTA даёт +21%» — это один A/B-тест Performable 2011 года на одной конкретной странице. На практике решает контраст элемента с окружением и его место в иерархии, а не сам оттенок.

Какой цвет выбрать для логотипа?

Начните не с таблицы значений, а с анализа категории: снимите пипеткой основные цвета десяти ближайших конкурентов на одну доску. Дальше выбор осознанный: встроиться в язык категории (вас сразу поймут, но легко перепутать) или сознательно выйти из него (заметно, но придётся объяснять аудитории, кто вы). Второй путь оправдан, когда у продукта есть реальное отличие.

Что такое правило 60-30-10?

Это пропорция распределения цвета в макете: 60% занимает доминирующий цвет (чаще всего нейтральный фон), 30% — поддерживающий, 10% — акцент для кнопок, ссылок и важных цифр. Правило пришло из дизайна интерьера и хорошо работает в цифре. Его главная ценность в том, что оно запрещает делать всё одинаково громким: акцент работает, пока его мало.

Как проверить, читается ли текст на фоне?

Прогоните пару «текст на фоне» через любой онлайн contrast checker. Ориентир международного стандарта WCAG: 4,5:1 для обычного текста и 3:1 для крупного. Быстрая проверка без сервисов: сделайте скриншот и обесцветьте его. Если в чёрно-белом варианте понятно, где главное и где кнопка, с иерархией всё в порядке. Подробнее про виды контраста — в статье «Принцип контраста».

Где быстро научиться подбирать цвета?

Теорию можно собрать самостоятельно за пару вечеров, она компактная. Сложнее с насмотренностью и обратной связью: без разбора работ собственные ошибки не видны годами. Именно за это платят на курсах. Программы, где работа с цветом входит в обязательную часть, собраны в подборке курсов по сочетанию цветов — там есть и короткие интенсивы по колористике, и полные дизайнерские профессии.

Читайте Checkroi первым в Google
Добавьте Checkroi в избранные источники — и наши разборы курсов и обзоры школ будут показываться выше в вашей выдаче Google.
Оставить комментарий
0 комментариев
Форма комментария

Оставьте комментарий

Напишите, что думаете. Нам важно ваше мнение!