Как создать действительно эффективную цветовую палитру бренда
Практическое руководство для дизайнеров по созданию цветовой палитры бренда, которая сохраняется в темном режиме, в отключенных состояниях и на любой поверхности, кроме логотипа. Внутри — пять реальных брендов.
Большинство цветовых палитр брендов создаются для презентации логотипа, и они остаются довольно привлекательными до тех пор, пока первая реальная кнопка не потребует отключения.
Работающая цветовая палитра бренда — это не пять цветов. Это многоуровневая система: один якорный цвет, реальная нейтральная шкала, семантические цвета, цвета состояний и план темного режима, существовавший еще до того, как кто-либо открыл Figma. В этой статье рассматривается этот многоуровневый подход, показаны пять брендов, которые правильно его использовали, и в конце приводится порядок создания палитры.
--
Почему большинство цветовых палитр брендов терпят неудачу
Большинство цветовых палитр брендов терпят неудачу не потому, что цвета неправильные, а потому, что они создавались для презентации логотипа, а не для системы выпуска.
Типичный процесс выглядит так: дизайнер составляет мудборды, выбирает пять цветов, которые соответствуют брифу, обозначает их как основные, второстепенные, акцентные, светлые, темные и передает палитру командам, занимающимся выпуском продукта, сайта, документации и кампаний. Ни одна из этих команд не присутствовала при выборе пяти образцов.
«Вторичный» цвет не имеет пригодного для использования среднего диапазона. «Основной» цвет слишком насыщен для основного текста. Никто не выбрал нейтрально-серый, поэтому дизайнер придумал свой.
Команда, работающая над темным режимом, сдается и переворачивает все с помощью CSS-фильтра. Палитра выполнила свою задачу для презентации. Она провалилась в основной работе.
Пять слоев рабочей палитры
Палитра, которая выдерживает реальную работу над брендом, имеет пять слоев, а не пять цветов. Дизайнеры, выпускающие брендовые системы в больших масштабах, спорят о том, к какому слою относится цвет, а не о том, какой оттенок зеленого «больше соответствует нам».
| Слой | Что он делает | Типичное количество |
|-------|--------------|----------------| | Якорь | Обеспечивает узнаваемость бренда | 1 (возможно, 1 поддержка) |
| Нейтральные цвета | Поверхности, текст, границы, фоны | 9-12 шагов |
| Семантические цвета | Успех, предупреждение, критическая информация, информация | 3-5 семейств |
| Состояние | Наведение курсора, фокус, нажатие, отключение | Сопрягается с каждым интерактивным цветом |
| Темный цвет | Разрешение темного режима для каждого слоя | Полный параллельный набор |
Обратите внимание на то, чего нет в этом списке. Нет «вторичного фирменного цвета», нет «третичного», нет «акцента 2». Большинству брендов, которые считают, что им нужен второй фирменный цвет, на самом деле нужна более полная нейтральная шкала или более смелый якорь.
Сглаживание — это ошибка. Слои — это преимущество.
Выбор основного цвета — первый и последний шаг
Основной цвет — это тот единственный цвет, который обеспечивает узнаваемость бренда на всех поверхностях, и его выбирают дважды: сначала в начале, а затем, после того, как станет ясно, с чем он будет располагаться рядом.
Первый выбор — направленный. Основной цвет должен быть таким, который, даже без словесного знака, всё равно будет сигнализировать о бренде. Выбор оттенка также является эмоциональным, и именно здесь психология цвета определяет половину работы ещё до того, как будет выбран шестнадцатеричный код. Вспомните Stripe фиолетовый, Linear фиолетовый, Figma синий, Notion чёрный, Slack пурпурный. Один цвет выполняет работу по формированию идентичности.
Второй выбор — технический. После того, как нейтральная шкала сформирована, основной цвет почти всегда нуждается в небольшом изменении. Он должен обеспечивать контрастность с нейтральным цветом, на котором он расположен, иметь настроенный темный режим и не создавать эффекта размытия при наведении курсора и нажатии. В реальных системах брендов используется 5-9 шагов привязки, а не один фиксированный шестнадцатеричный код.
--
Нейтральные цвета — это палитра
Большая часть интерфейса, поставляемого с брендом, выполнена в нейтральных тонах, и у бренда без истинной нейтральной шкалы нет палитры, у него есть доска настроения.
Истинная нейтральная шкала состоит из 9-12 шагов от почти белого до почти черного, настроенных под цвет привязки, рядом с которым он находится. Чистые серые часто выглядят безжизненными рядом с теплым цветом привязки и слишком холодными рядом с синим цветом привязки.
Нейтральная шкала — это то, где доступный цветовой контраст либо включается, либо выключается из дизайна. Каждый шаг поверхностного цвета включает шаг текста и шаг границы, которые обеспечивают контрастность. Каждый шаг выполняет свою роль: фон, едва заметный фон, поверхность, рельефная поверхность, наложение, разделитель, граница, приглушенный текст, текст по умолчанию, выделенный текст.
Бренды, которые наиболее эффективно используют нейтральные цвета, рассматривают их как главный элемент палитры, а не как заполнитель. Якорь — это флаг. Нейтральные цвета — это вся страна.
Три бренда, которые идеально используют якорь
Эти три бренда используют один сдержанный якорь на фоне глубокой нейтральной шкалы, и якорь остается узнаваемым, потому что он никогда не выходит за ее рамки.
Notion
Посмотрите вживую на notion.com/product
Notion придерживается экстремального минимализма. Почти вся рабочая поверхность выполнена в сдержанном белом цвете с черным текстом. Один глубокий темно-синий цвет используется в качестве маркетингового элемента, а семантический уровень отвечает за видимые цвета: красный, оранжевый, синий, зеленый для обозначения состояний задач.
Что можно позаимствовать: выберите один основной цвет, а затем спросите, нужен ли бренду второй. Честный ответ обычно отрицательный.
Linear
Смотрите прямую трансляцию на linear.app
Linear использует самую специфичную палитру в категории, ориентированную на темные тона. Основной цвет — один фиолетовый. Нейтральные цвета представляют собой полную шкалу темного режима (поверхность, тонкая поверхность, рельефная поверхность, наложение), каждый из которых выполняет разные функции.
Что можно позаимствовать: если продукт поставляется в темном режиме, создавайте темную палитру с той же тщательностью, что и светлую, а не как фильтр.
Stripe
Смотрите трансляцию в прямом эфире на stripe.com/payments
Stripe использует самый чистый подход к якорным элементам в SaaS. Фиолетовый оттенок встречается в призывах к действию, встроенных ссылках, иллюстрациях и моментах взаимодействия с брендом, и почти нигде больше. Когда появляется фиолетовый цвет, глаз воспринимает его как действие, а не как украшение.
Что стоит позаимствовать: чем сдержаннее якорь, тем узнаваемее бренд. Нечеткие якоря воспринимаются как шум.
Два бренда, где нейтральные цвета — это вся история
Эти два бренда показывают, что происходит, когда нейтральная шкала сама по себе является основой бренда, а якорь либо монохромный, либо токенизирован по ролям.
Supabase
Смотрите прямую трансляцию на supabase.com
Supabase использует самую дисциплинированную палитру с одним акцентом в инструментах разработчика. Основной цвет — почти монохромные темные нейтральные тона. Основной цвет — изумрудно-зеленый, и он появляется только на элементах бренда, призывах к действию и состояниях успешного завершения. Второй цвет бренда никогда не используется. Нейтральная шкала — это бренд. Зеленый — это глагол.
Что можно позаимствовать: бренд может полностью обойтись без яркого акцента, если нейтральная система достаточно дисциплинирована. Некоторым брендам нужна фирменная шкала серых тонов, а не фирменный цвет.
Shopify
Смотрите прямую трансляцию на polaris.shopify.com
Система Polaris от Shopify показывает, как выглядит полностью токенизированная палитра бренда. Палитра представлена в виде дерева ролей и токенов: поверхность, текст, иконка, граница, интерактивный, критический, предупреждение, успех, информация, каждая роль несет светлые и темные значения. Polaris не оставляет дизайнеру места для выхода за пределы определенных токенов. Палитра — это не настроение, это контракт.
Что стоит позаимствовать: сначала записывайте токены как роли, а на последнем шаге преобразуйте их в шестнадцатеричные значения. Если имя токена описывает цвет, а не роль, палитра будет смещаться.
--
6-шаговый порядок построения палитры
Создавайте палитру в этом порядке, и большинство распространенных ошибок физически не произойдут.
-
Создайте список ролей перед списком цветов. Якорь, нейтральные поверхности, нейтральный текст, нейтральные границы, семантический успех, семантическое предупреждение, семантическая критическая ошибка, семантическая информация, состояние при наведении курсора, состояние фокуса, состояние отключено. Сделайте это сначала на бумаге.
-
Выберите направление якоря, а не конечный шестнадцатеричный код. Один оттенок, приблизительная целевая яркость, приблизительная целевая насыщенность. Пусть он будет редактируемым.
-
Создайте нейтральную шкалу, настроенную на этот якорь. От 9 до 12 шагов. Проверяйте каждый шаг по сравнению с другими. Холодные нейтральные оттенки для холодных якорей, теплые нейтральные оттенки для теплых якорей.
-
Добавляйте семантические цвета как набор, а не по отдельности. Успех, предупреждение, критическая ситуация, информация. Они должны восприниматься как родственные цвета. Отдельный зеленый, добавленный позже, почти всегда выглядит неуместно на палитре, с которой он не был изначально создан.
-
Определяйте цвета состояний, сопоставляя их, а не изобретая новые. Наведение обычно представляет собой сдвиг на один или два шага по шкале. Фокус обычно представляет собой контурное кольцо в оттенке якоря. Отключение обычно представляет собой конкретный шаг нейтрального цвета.
-
Зафиксируйте последний шестнадцатеричный код якоря в последнюю очередь. Проведите проверку контраста по отношению к нейтральному цвету, на котором он находится. Настройте соседний цвет в темном режиме. Добавьте шаги наведения и нажатия. Только теперь якорь становится зафиксированным значением.
Почему порядок важен
Каждый слой ограничивает следующий, и именно обратный порядок приводит к тому, что цвета в палитрах начинают конфликтовать друг с другом.
Выбирая якорный цвет последним, вы делаете это, полностью осознавая нейтральную шкалу, в которой он должен существовать. Выбирая его первым, каждый нейтральный выбор становится компромиссом, основанным на цвете, выбранном еще до создания интерфейса.
Что касается теории, лежащей в основе этого многослойного подхода, то теория цвета для дизайнеров охватывает весь стек. Что касается правил контраста, лежащих в основе сочетаний нейтральных цветов и якорных цветов, доступный цветовой контраст рассматривает конкретные детали. Для палитр внутри дизайн-систем руководство по системам проектирования дает более широкое представление.
Три ошибки, которые губят большинство цветовых палитр
Эти три ошибки встречаются почти в каждой неудачной цветовой палитре бренда, и все три возникают из-за выбора шестнадцатеричных значений до выбора ролей.
Ошибка с образцами логотипа. Пять цветов палитры, потому что в логотипе пять цветов. Ничто в дальнейшем не нуждалось в пяти цветах. Нет нейтральных оттенков, нет семантического уровня, нет плана темного режима. Самый распространенный тип ошибки.
Ловушка насыщенности. Все цвета имеют одинаковую насыщенность, обычно высокую. Выглядит ярко на мудборде, но кажется утомительным в реальном интерфейсе. Хорошие палитры агрессивно варьируют насыщенность, а правила пропорций, такие как правило 60-30-10, не позволяют самым ярким оттенкам доминировать в кадре.
Отсутствующая середина. Один светлый нейтральный цвет, один темный нейтральный цвет, ничего между ними. Реальные интерфейсы находятся посередине шкалы. Палитра всего с двумя нейтральными цветами выглядит плоской, независимо от того, насколько хороша базовая цветовая схема.
Исправьте процесс, и ошибки перестанут появляться.
Часто задаваемые вопросы
Сколько цветов должна содержать фирменная цветовая палитра?
Якорных цветов меньше, чем вы думаете, нейтральных цветов больше, чем вы думаете. Большинство брендов, занимающихся доставкой, имеют 1 якорный цвет, 9-12 нейтральных ступеней, 3-5 семантических семейств, парные цвета состояний и параллельный набор для темного режима. Количество оттенков невелико. Количество ступеней велико.
Нужна ли мне отдельная палитра для темного режима?
Не отдельная палитра. Параллельное разрешение той же палитры. Роли остаются идентичными, меняются только исходные шестнадцатеричные значения для каждой темы. Если дизайнер вручную перерисовывает темный режим с нуля, палитра не была создана как система.
Могу ли я использовать генератор палитр для создания фирменной палитры?
Генератор может задать якорный цвет и приблизительное направление нейтральных цветов. Он не может создать систему. Каждая цветовая палитра в этой статье была настроена вручную: нейтральные оттенки были скорректированы по теплоте или холоду, чтобы соответствовать якорю, скорректированы семантические семейства, значения темного режима настроены индивидуально, цвета состояний подбирались шаг за шагом.
Создавайте систему, а не образцы
Цветовая палитра бренда — это не пять цветов на мудборде. Это многоуровневая система с ролями, шкалой нейтральных оттенков, семантическими сигналами, цветами состояний и планом темного режима, построенная в определенном порядке.
Notion, Linear, Stripe, Supabase и Shopify победили не благодаря образцам. Они победили, рассматривая палитру как инфраструктуру: один якорь, полная шкала нейтральных оттенков, семантический уровень, имеющий значение, парный слой состояний, темный режим, разработанный с первого дня.
Создавайте слои, выполняйте 6-шаговый порядок и перестаньте выбирать цвета бренда, как будто вы оформляете комнату.
Want a brand color palette built for everything past the logo? Brainy builds palettes with a real neutral scale, dark mode, and semantic tokens baked in.
Get Started
