Как подобрать цветовую палитру бренда — пошаговая методика

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

Шаг 0Сначала карта конкурентов, потом вкус

Самая частая ошибка — начинать с «мне нравится синий». Цвет бренда — это территория на рынке, а не украшение (как её делят банки, мессенджеры и маркетплейсы). Поэтому первый шаг — карта: выпишите 5‑10 конкурентов и их основные цвета (точные коды удобно смотреть в нашем каталоге — блок «Цвета бренда» есть на каждой странице — или через инструменты‑пипетки). На карте станет видно: какие зоны спектра заняты намертво, какие свободны. Свободная зона — ваш шорт‑лист. Именно так Т‑Банк взял жёлтый, а Spotify — зелёный.

Шаг 1Основной цвет: три фильтра

Кандидатов из свободной зоны прогоняем через три фильтра:

1. Смысловой. Что цвет должен говорить о бренде? Ориентиры — в статье психология цвета в логотипе, но без фанатизма: контекст бьёт «психологию» (зелёный Сбера не про экологию, а про полтора века истории).
2. Средовой. Где цвет будет жить? Для приложения с тёмной темой нужен оттенок, горящий на чёрном — именно поэтому Spotify сменил зелёный; для печатной упаковки — воспроизводимый в CMYK, подробности про печать мы разбирали отдельно.
3. Практический. Хватает ли контраста для текста? Белая надпись на вашем цвете должна проходить проверку читаемости (см. шаг 4).

Выбирайте не «цвет вообще», а конкретный оттенок: «синий» — это тысячи вариантов от кобальта до бирюзы, и работают они по‑разному.

Шаг 2Акцентные цвета: цветовой круг вместо интуиции

Акценты (кнопки, выделения, детали иллюстраций) подбираются не «на глаз», а по классическим схемам цветового круга:

• Комплементарная — цвет напротив основного: максимальный контраст, энергия. Осторожно: в равных дозах пара «вибрирует», акцент должен быть редким.
• Аналоговая — соседи по кругу: спокойная, «дорогая» гамма, но слабый контраст для кнопок.
• Триада — три цвета через равные интервалы: живо и сбалансированно, требует дисциплины в пропорциях.

Практическое правило пропорций — 60/30/10: 60% макета — нейтральный фон, 30% — основной цвет, 10% — акцент. Палитры, где все цвета «главные», не работают.

Шаг 3Нейтральные: цвета, о которых забывают

В реальных макетах 80% площади занимают не фирменные цвета, а фон и текст — и их тоже надо зафиксировать: белый или чуть тонированный фон, тёмно‑серый (не чисто чёрный — он «звенит» на белом) для текста, светло‑серый для рамок и разделителей. Если нейтральные не заданы, каждый макет будет чуть разным — и фирменный стиль рассыплется на мелочах.

Шаг 4Проверки перед фиксацией

• Контраст. Пары «текст + фон» проверьте по стандарту WCAG (любой онлайн‑чекер контраста): минимум 4,5:1 для обычного текста. Это не только про доступность — нечитаемые плашки убивают конверсию кнопок.
• Дальтонизм. Прогоните палитру через симулятор цветовой слепоты (встроен в Figma‑плагины): 8% мужчин видят красный и зелёный иначе.
• Боевой тест. Соберите на палитре три реальных макета: пост, кнопку, визитку. Палитры, прекрасные в кружочках на презентации, часто разваливаются в вёрстке.
• Тёмная тема. Если бренд живёт в приложениях — проверьте всё на тёмном фоне: почему это критично, хорошо видно на примере стриминговых сервисов.

Шаг 5Зафиксировать и не отпускать

Финал — один файл (страница в Figma, PDF или даже заметка) со всеми цветами: название роли («основной», «акцент», «текст»), HEX для экрана, CMYK для печати. Этот файл — зародыш брендбука; без него через месяц в макетах будет пять «почти фирменных» оттенков синего. В Figma дополнительно сохраните цвета как Color Styles — тогда правка оттенка обновит все макеты разом.

Частые ошибки

1. Слишком много цветов. Пять «основных» — значит ноль основных. Сильные палитры экономны: у Netflix фактически два цвета.
2. Цвет из генератора без карты конкурентов. Красивая палитра, совпадающая с лидером ниши, работает на лидера.
3. Незафиксированные коды. «Примерно такой синий» в каждом макете свой. Лечится файлом из шага 5.
4. Игнорирование среды. Палитра, собранная на белом листе, для продукта, живущего в тёмном приложении.
5. Смена палитры под настроение. Цвет копит узнаваемость годами — WhatsApp не менял зелёный с 2009‑го. Терпение — часть методики.

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