Как выбрать цвета бренда

Цвет. Это самый быстрый способ узнать бренд, ещё до прочтения названия. Правильная палитра усиливает позиционирование, ошибочная, отталкивает или делает вас похожими на конкурентов.

Психология цвета работает не как магическая таблица «красный = страсть», но общие ассоциации и контраст в категории действительно влияют на восприятие. Разберём, как подобрать палитру осмысленно.

Цвет влияет на решение быстрее текста. Пользователь ещё не прочитал оффер, но уже считывает «дорого / дёшево», «технологично / домашне», «агрессивно / спокойно». Задача палитры, поддержать позиционирование, а не спорить с ним. Яркий оранжевый для юридической фирмы и холодный серый для детского бренда, типичные промахи, которые мы исправляем на ребрендингах.

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

С чего начать подбор

Не с «любимого оттенка» основателя, а с трёх вопросов:

Три вопроса перед палитрой

1. Какой характер у бренда: экспертный, дружелюбный, премиальный, смелый?
2. Какие цвета доминируют у конкурентов и хотите ли вы от них отстроиться?
3. Где палитра будет жить чаще: экран, печать, упаковка, outdoor?

Ответ на третий вопрос определяет технические ограничения. Цвет, который сияет на Retina-дисплее, может «грязнить» на uncoated бумаге. Яркий неон на вывеске и на сайте, это разные задачи. Поэтому подбор начинается с носителей, а не с «красивого квадрата в Pinterest».

Структура палитры бренда

Минимальный набор, который мы закладываем в айдентику:

Четыре роли цвета

• Primary, основной цвет бренда, 1 оттенок.
• Secondary / Accent, акцент для кнопок, CTA, важных элементов.
• Neutrals, фоны, текст, серые для UI и печати.
• Semantic, успех, ошибка, предупреждение, если есть digital.

Для каждого цвета фиксируйте значения в Pantone, CMYK, RGB и HEX, экран и печать воспринимают цвет по-разному.

Печать и экран: как не потерять оттенок

Один HEX-код на мониторе и на визитке, это миф. RGB-свет и CMYK-краска работают по разным принципам. Мы всегда делаем тестовую печать или хотя бы просмотр на калиброванном мониторе до финального утверждения палитры.

Как проверить палитру до запуска

1. распечатать визитку или этикетку в CMYK, не только смотреть PDF;
2. проверить контраст primary и accent на белом и тёмном фоне;
3. сделать монохромную версию логотипа и оценить, сохраняется ли характер;
4. показать 3–5 носителей человеку из ЦА, не только команде.

Если бренд планирует outdoor, учитывайте выцветание и освещение. Цвет на баннере при дневном свете может отличаться от макета в Figma. Лучше заложить запас по насыщенности и протестировать на реальном носителе.

Цвет и ниша: примеры из практики

В B2B-сервисах часто доминируют синий и глубокие нейтрали: они считываются как надёжность. В food и retail работают тёплые акценты, но важно не скатиться в «как у всех». В wellness и eco, зелёные и земляные оттенки, но без клишированного «leaf green» без характера.

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

Психология без мифов

Общие тенденции, не жёсткие правила:

Ассоциации по цветам

• Синий, доверие, стабильность. Часто в финансах и IT.
• Зелёный, природа, здоровье, устойчивость.
• Красный и оранжевый, энергия, срочность, аппетит в food.
• Фиолетовый, креатив, премиальность, технологичность.
• Чёрный и глубокие нейтрали, люкс, минимализм, мода.

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

Оттенки, градиенты и вторичные цвета

Одного primary недостаточно для живой системы. Нужны светлые и тёмные варианты основного цвета для фонов, hover-состояний и иллюстраций. Градиенты допустимы, если они описаны в брендбуке: направление, угол, допустимые сочетания. Случайный градиент «как у всех» быстро устаревает и ломает узнаваемость.

Правила для расширенной палитры

• не больше 10–15% площади макета под яркий accent;
• нейтрали для 60–70% фона и текста;
• градиент, только если он есть в логотипе или ключевом носителе;
• запрет на «случайные» оттенки вне палитры.

Digital: доступность и контраст

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

Минимальный уровень для основного текста, контраст 4,5:1. Для крупных заголовков и кнопок, 3:1. Бесплатные проверки есть в Figma и онлайн-инструментах. Если акцентный цвет не проходит проверку, меняют не текст, а оттенок кнопки, это быстрее, чем спорить с доступностью.

Типичные ошибки

• Слишком много ярких цветов без иерархии.
• Копирование палитры лидера рынка «один в один».
• Игнорирование монохромной версии логотипа и печати.
• Нет правил, когда какой цвет использовать.

Как зафиксировать палитру в брендбуке

Без документа палитра «уплывёт» через месяц. В брендбуке для каждого цвета указывают: название, роль, все технические значения, примеры применения и запреты. «Primary только для логотипа и ключевых CTA», «Accent, для кнопок и акцентных блоков, не для фона абзаца».

Добавьте страницу с примерами носителей: сайт, визитка, упаковка, Stories. Так подрядчик видит не абстрактные квадраты, а живой контекст. Это экономит время и защищает инвестицию в айдентику.

Обновляйте раздел о цветах при каждом изменении палитры: версия документа, дата, кто утвердил. Старая PDF в чате «для скачивания» без версии, частая причина, почему через полгода у бренда пять «официальных» оттенков синего.

Чек-лист перед утверждением палитры

• палитра читается на белом и тёмном фоне;
• primary и accent не сливаются в одно пятно;
• есть монохромная версия логотипа с новыми цветами;
• контраст кнопок проходит WCAG на mobile;
• цвета зафиксированы в Pantone, CMYK, RGB и HEX;
• 3–5 человек из ЦА узнают «ваш» характер по палитре без логотипа.

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

Хорошая палитра не кричит о себе, она работает фоном для смысла. Когда клиент вспоминает ваш бренд и видит «ваш» оттенок, даже без логотипа, задача выполнена. Это результат системы, а не удачного HEX-кода в генераторе.

Сочетание цвета и типографики

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

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

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

Начните с трёх вопросов из начала статьи и карты конкурентов. Уже на этом этапе станет ясно, в какой стороне искать свой цвет, а не перебирать случайные сочетания в генераторе.

Палитра, которую сложно описать словами, обычно сложна и в применении. Если вы не можете объяснить команде, «когда какой цвет», пора упростить систему.

Вопросы и ответы

Как выбрать цвета для бренда?

Начните с характера бренда и конкурентов, определите основной, акцентный и нейтральные цвета. Проверьте палитру на экране, в печати и на реальных носителях.

Сколько цветов должно быть в палитре бренда?

Минимум: один primary, один accent, 2–3 neutral и при необходимости semantic-цвета для UI. Итого 4–6 оттенков с чёткими ролями, а не десять «на всякий случай».

Как проверить контраст цветов для сайта?

Используйте проверку WCAG для текста и кнопок. Контраст текста и фона должен быть достаточным для читаемости — особенно на мобильных и для людей с нарушениями зрения.

Чем Pantone отличается от HEX?

HEX и RGB — для экранов. Pantone и CMYK — для печати. Один и тот же цвет на мониторе и на бумаге может отличаться, поэтому фиксируют все форматы в брендбуке.

Можно ли использовать градиенты в фирменном стиле?

Да, если градиент заложен в систему: направление, угол, допустимые сочетания цветов. Случайные градиенты «под тренд» без правил быстро ломают узнаваемость бренда.

Как не скопировать палитру конкурента?

Соберите палитры 5–7 конкурентов в одну строку и найдите переполненный сектор. Часто выгоднее занять соседний оттенок или другой цветовой угол, чем делать «ещё один синий» в категории.