Блог

Как выбрать цвета бренда: чтобы вас узнавали и кнопку было видно

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

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

Как выбрать цвета бренда: короткий ответ

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

Самый практичный факт темы - в тексте стандарта. WCAG 2.2 (редакция W3C от 12 декабря 2024 года) в исключениях SC 1.4.3 говорит дословно: «Text that is part of a logo or brand name has no contrast requirement» - текст логотипа или названия бренда под требование по контрасту не подпадает. На кнопку исключение не распространяется: 4,5:1 на текст по SC 1.4.3 и 3:1 на плашку по SC 1.4.11.

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

Один цвет - это еще не палитра: какие роли обязаны быть

На вопрос «сколько цветов должно быть у бренда» выдача отвечает числом: три-пять. Число ничего не проверяет. Считать надо роли: пока у основного цвета нет состояний, а у ошибки в форме нет своего сигнала, это не палитра бренда, а один фирменный цвет.

Наш набор - крайний случай минимализма, проверяемый по коду. В системе сайта MOON один хроматический цвет: акцент #0B20D1 поверх фона #000021, все прочее черно-белое. Правило номер два нашей дизайн-системы так и звучит: «один цвет». Цветовых токенов при этом двенадцать: три состояния акцента (#0B20D1, наведение #1730E8, нажатие #081699), два фона, две полупрозрачные поверхности, три уровня текста (белый 100, 60 и 38%) и две границы.

РольЧто ломается без нееЧем проверяется
ОсновнойВас путают с конкурентамиЦвет категории
Состояния акцентаИнтерфейс не отвечает на нажатиеSC 1.4.11, 3:1
Подложки и фоныБлоки нечем разделитьSC 1.4.11, 3:1
Уровни текстаВажно все - значит, ничегоSC 1.4.3, 4,5:1
Служебные: ошибка, успех, предупреждениеФорма отказывает и не говорит гдеSC 1.4.1, уровень A
Фокус с клавиатурыНе видно, где вы при табеНаш параметр: обводка 2 px, отступ 3 px

Строка про служебные цвета - единственная, где мы опираемся не на стандарт, а на свою практику: SC 1.4.1 требует лишь, чтобы цвет не был единственным сигналом, а сколько завести оттенков, не говорит. В палитрах, которые собираем клиентам, мы закладываем три.

Видно ли вашу кнопку: контраст считается парой, а не цветом

«Контраста цвета» не существует - контраст есть только у пары. Один и тот же #0B20D1 годится под белый текст и не годится под черный. Вопрос «хороший ли у нас фирменный цвет» ответа не имеет, «видно ли на нем кнопку» - имеет, и ответ число. Ниже наша палитра, включая неудобные строки.

ПараКонтрастВердикт
Белый текст на акценте #0B20D19,81:1Проходит AA и AAA
Черный текст на том же акценте2,14:1Не проходит ничего
Плашка #0B20D1 на фоне #0000212,10:1От фона почти не отделяется
Наведение #1730E8 на том же фоне2,57:1Тоже ниже 3:1
Белая кнопка на фоне #00002120,55:1Отделяется с запасом
Текст белый 60% на фоне7,30:1Проходит AA и AAA
Текст белый 38% на фоне3,40:1Основной текст им не набираем

Строка с 2,10:1 в таблице не случайна. Это не автоматическое нарушение: SC 1.4.11 требует 3:1 от информации, нужной для опознания элемента, а у кнопки с крупной белой надписью опознание держится на надписи - 9,81:1. Но факт: фирменный цвет на фирменном фоне - это 2,1:1, а не кнопка. Поэтому в подсвеченных акцентом блоках кнопка у нас белая. Цвет бренда никто не менял - поменяли пару.

Подбор фирменного цвета ReNairo: варианты палитр и выбранный лаймовый акцент
Подбор фирменного цвета ReNairo: варианты палитр и выбранный лаймовый акцент · кейс ReNairo

Психология цвета в брендинге: где она работает, а где миф

Разговор про психологию цвета в брендинге почти всегда опирается на одну цифру: «цвет повышает узнаваемость бренда на 80%, исследование Университета Лойолы». Исследование прочитали - цифры в нем нет: речь шла про выбор между цветным и монохромным вариантом и про личные предпочтения.

Проверяемая часть психологии - не значение цвета, а цвет категории. «Синий - доверие» ничего не решает, если в этом синем сидят все конкуренты. Правильный вопрос не «что значит мой цвет», а «отличает ли он меня от тех, с кем меня сравнивают». Правило 60-30-10 - прием распределения площадей, а не норма.

Цветом 2026 года Pantone объявил PANTONE 11-4201 Cloud Dancer - мягкий белый, впервые за всю историю с 1999 года. Даже институт цвета выбрал его отсутствие: цвет года - маркетинг, а не сигнал бренду.

Три проекта, где мы ушли от очевидного цвета

Три решения, где мы шли против ожидания отрасли, а в ReNairo - и против ожидания заказчика. Общее одно: отказ от цвета или уход из цвета категории.

Target - монохром вместо наследования. Сервис вырастал из материнского бренда PayDex (эквайринг и трансграничные платежи), и напрашивалось унаследовать его цвет. Мы не унаследовали: палитра монохромная. В финтехе узнаваемость обычно несет как раз цвет, так что решение неочевидное. Задача была шире - чтобы Target читался как отдельная компания, а не как раздел PayDex. Монохром сработал дважды: отделил один сервис от другого и донес приватность вместо массовости.

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

ReNairo - отказ от технологичного синего. Очевидный для отрасли синий не взяли по одной причине: в нем уже сидели конкуренты. Заказчик спорил - он сам из стартап-среды и считал, что надо быть похожим на другие стартапы. Спор выиграла не палитра, а показ всей бренд-платформы целиком. В работе - четыре варианта логотипа, правила, палитра и минималистичная айдентика на носителях, срок полного запуска от 1 до 1,5 месяца. По дизайн-системе с правилами и запретами клиент до сих пор дорабатывает материалы сам.

Палитра DUQQA: Noir Mystique, Ivory Whisper, Blush Veil и Cocoa Serenity
Палитра DUQQA: Noir Mystique, Ivory Whisper, Blush Veil и Cocoa Serenity · кейс DUQQA

Экран и печать: почему в типографии цвет получается другим

Гамуты экрана и офсета не совпадают физически, старательность типографии тут ни при чем. По оценкам отраслевых источников больше половины каталога Pantone не воспроизводится четырьмя красками, по линейке Solid Coated вне охвата CMYK около 40% цветов. Семикрасочная печать CMYKOGV закрывает около 90% плашечных Pantone.

Второе: «одинаковый цвет» в офсете - это цвет в пределах допуска. ISO 12647-2 дает для плашек основных красок отклонение до ΔE 5 - по сэмплу стандарта и отраслевому обзору, причем по устаревшей формуле ΔE76: два тиража одного макета укладываются в допуск и при этом различаются. Плюс наша норма для макета в типографию: суммарная краска не выше 300-330% на мелованной бумаге, мелкий текст 100% K.

Третье. Pantone поэтапно ушел из Adobe: библиотеки убирали с августа 2022, а с релиза октября 2023 в Illustrator убраны последние. Полный доступ - через платный плагин Pantone Connect. Отсюда правило: фирменные цвета компании описываются минимум в четырех системах - RGB, HEX, CMYK и Pantone. Правила поведения цвета в печати - уровень брендбука, а не логобука.

Цвет как товарный знак: российская практика

Вопрос «а можно застолбить наш цвет» задают редко, а зря. По пункту 4 статьи 1482 ГК РФ обозначением может быть цвет или сочетание цветов, но нужно доказать приобретенную различительную способность: соцопросы, затраты на рекламу, долю рынка, срок использования. По данным НЦИК, приведенным «Деловым Петербургом» в июле 2022 года, в России зарегистрировано 12 цветовых товарных знаков, а семи компаниям отказали - среди них «Евросеть-Ритейл», Mars и Red Bull. Цифра вторичная, с тех пор не обновлялась.

Как это в жизни, показывает Wildberries. Ноябрь 2021 - отказ Роспатента: оттенок стандартный, различительной способности нет. Сентябрь 2022 - Суд по интеллектуальным правам отказывает в пересмотре (дело № СИП-512/2022). Июнь 2024 - регистрация все-таки получена, но только по 35-му классу МКТУ. Охрана привязана к классу: в другой отрасли тот же фиолетовый использовать можно.

Практический вопрос проще: регистрировать знак в цвете или в черно-белом. В цвете защищено только заявленное сочетание: красный логотип зарегистрировали - синяя версия не защищена. Черно-белый знак охраняется в любых цветах. Менять цвет после подачи нельзя: по пункту 69 Правил Роспатента нужны новая заявка и новые пошлины - минимум 35 000 ₽ за один класс, и класс МКТУ выбирается там же. Цвет в заявке указывают точным кодом, Pantone или RAL. Оговорка: мы не юристы, регистрацию не проводим - это работа патентных поверенных.

Что палитра стоит и где она сидит в смете

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

Что покупаютЧто входит по цветуЦенаСрок
ЛогобукНичего: только знак и написание, без носителей и правилот 55 000 ₽5-7 дней
Фирменный стильЦвета, шрифты и базовые носителиот 110 000 ₽3-4 недели
БрендбукПравила по логотипу, цветам и шрифтам; соцсети и печать - на среднем уровне пакетаот 250 000 ₽5-7 недель
РебрендингЛоготип и палитру меняем, остальное оставляемот 250 000 ₽6-10 недель

Последняя строка - и есть цена ошибки, сказанная счетом. «Обновляем логотип и палитру, остальное оставляем» - это нижний уровень ребрендинга в нашем калькуляторе, дальше добавляются носители и план перехода. Второй множитель - носители: в проекте КАРГОНОРД их около 40-50, от счетов и визиток до конвертов и дорожного жилета со светоотражателями. Каждый при смене цвета переделывается и перепечатывается - это уже производственная смета.

Для сверки с рынком: по исследованию АБКР дизайн-концепция фирменного стиля стоит в среднем 650 000 ₽: 222 000 ₽ - средняя у топ-10 агентств нижнего сегмента, 1 506 000 ₽ - у топ-10 верхнего. Брендбук - в среднем 634 348 ₽. Это выборка агентств - членов АБКР, а не рынок целиком.

Проверка палитры за вечер: что сделать самому

Проверки ниже делаются без подрядчика и без бюджета - вечера хватит, чтобы понять, держится палитра на числах или на вкусе.

  1. Прогоните через контраст-чекер две пары: текст кнопки на ее фоне (от 4,5:1) и плашку кнопки на фоне страницы (от 3:1). Порог не округляется: 2,999:1 - провал.
  2. Проверьте состояния основного цвета: наведение, нажатие, отключено, фокус. Если оттенок один - это фирменный цвет, а не палитра.
  3. Найдите места, где цвет остался единственным сигналом: ошибка только красным, успех только зеленым.
  4. Откройте палитру в симуляторе нарушения цветовосприятия: различаются ли служебные цвета.
  5. Напечатайте фирменный цвет на принтере и на цветной пробе, сравните с экраном.
  6. Откройте брендбук на чужом компьютере без плагина Pantone: видно ли, какой это цвет.
  7. Откройте пять сайтов конкурентов: отличает ли вас ваш выбор.

Три вопроса подрядчику до сметы:

  • В каких системах записаны цвета: только HEX или все четыре.
  • Входят ли в объем состояния акцента и служебные цвета.
  • Кто считает контраст пар.

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

Нужен не совет, а результат?

Расскажите задачу - посмотрим и предложим решение.

Написать в Telegram