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

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

Можно ли выбрать фирменный цвет на свой вкус

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

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

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

Из чего состоит фирменная палитра

Роль	Зачем нужна	Сколько оттенков	Где встречается
Основной	Узнавание бренда	1–2	Логотип, вывеска, упаковка, крупные плоскости на сайте
Акцентный	Показать главное действие	1 плюс варианты для наведения и нажатия	Кнопки, ссылки, цены, метки
Нейтральные	Текст, фон, линии	3–6, от почти белого до почти чёрного	Основной текст, фон страниц, рамки, подложки
Служебные	Сообщить о состоянии	По одному на ошибку, предупреждение, успех и информацию	Сообщения форм, уведомления, статусы заказа
Дополнительные	Расширить графику	По необходимости	Иллюстрации, инфографика, разделы и линейки продуктов

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

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

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

Как выбрать основной цвет: ниша, конкуренты, ассоциации

Начните не с веера образцов, а с соседей. Соберите на одной доске в Figma логотипы, сайты, вывески и упаковку 10–15 конкурентов и посмотрите, какие цвета повторяются. Во многих нишах есть своя привычная гамма: зелёный у эко-продуктов, бело-голубой у клиник, чёрный с золотом у премиальных товаров.

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

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

Какой контраст нужен, чтобы текст читался

Палитра бесполезна, если надпись на кнопке не прочитать. Ориентир — рекомендации по доступности WCAG:

• 4,5 : 1 — минимальный контраст обычного текста с фоном;
• 3 : 1 — для крупного текста: от 24 пикселей обычным начертанием или примерно от 19 пикселей полужирным;
• 3 : 1 — для границ полей ввода, иконок и других элементов интерфейса.

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

Чаще всего не проходят проверку светлые и яркие цвета — жёлтый, салатовый, оранжевый, голубой — с белым текстом. Выход — затемнённый оттенок того же цвета для текста и кнопок или тёмные надписи на светлом фирменном фоне.

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

Цвет на экране и в печати: HEX, RGB, CMYK, Pantone

Почему фирменный цвет на визитке «не такой», как на сайте? Монитор сам излучает свет, а отпечаток мы видим в отражённом, и краска на бумаге передаёт не все оттенки, которые способен показать экран. Поэтому у цвета несколько записей:

• RGB и HEX — для экранов: сайта, соцсетей, презентаций. HEX — та же запись RGB в шестнадцатеричном виде, её используют в вёрстке и в Figma.
• CMYK — для полноцветной печати четырьмя красками. Самые насыщенные экранные оттенки — яркий бирюзовый, неоновый розовый, сочный оранжевый — в ней становятся заметно спокойнее.
• Pantone — для смесевых красок, которые замешивают по рецептуре из каталога. Такой цвет стабильнее от тиража к тиражу, а у одного номера есть варианты для мелованной и немелованной бумаги — и выглядят они по-разному.
• RAL и каталоги плёнок — для покраски металла и фасадов и для вывесок.

Цвет «плывёт» и без печати. Экраны по-разному настроены, у части телефонов расширенный цветовой охват, ночной режим делает картинку теплее. В печати результат зависит от бумаги, оборудования типографии и даже от света, при котором вы смотрите на оттиск.

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

Палитра для светлой и тёмной темы

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

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

Как проверить фирменные цвета до утверждения

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

1. Соберите носители. Первый экран сайта на телефоне, форму с ошибкой и сообщением об успехе, пост для соцсетей, визитку, вывеску вечером, аватарку в списке чатов — в светлой и тёмной теме.
2. Посмотрите макеты в оттенках серого. Если и без цвета понятно, где кнопка, а где заголовок, иерархия держится не только на цвете. В инструментах разработчика Chrome есть имитация нарушений цветового зрения — по ней видно, различимы ли статусы.
3. Откройте макеты на разных экранах: на недорогом телефоне, на улице при ярком солнце, на ноутбуке и мониторе.
4. Напечатайте пробу на той бумаге или материале, которые пойдут в тираж.
5. Запишите результат: роли цветов, коды HEX, RGB, CMYK и Pantone, удачные сочетания и запреты. Место этим правилам — в гайдлайне; что ещё в него входит, рассказали в статье про брендбук и гайдлайн.

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

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

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