Что делает цвет
Цвет — самый быстрый элемент айдентики. Его замечают раньше формы и раньше слов: издалека, краем глаза, на пакете в чужой руке. Поэтому у многих дел, которые узнают без названия, узнают прежде всего цвет.
Что цвет делает для стиля? Три вещи.
Отличает. В районе, где все пекарни коричневые, зелёная пекарня заметна сразу. Выбор цвета начинают не с «какой нравится», а с обзора конкурентов из второго урока: какие цвета уже заняты и где свободно.
Задаёт характер. Тёплые приглушённые цвета читаются как уют и спокойствие, яркие насыщенные — как энергия и молодость, тёмные и сдержанные — как солидность. Это не строгие правила, а привычки восприятия, и их полезно учитывать.
Связывает носители. Один и тот же цвет на вывеске, пакете, сайте и форме сотрудников собирает их в систему, даже если сами носители очень разные.
Важно и то, чего цвет не делает. Он не спасёт слабую форму и не объяснит, чем занимается дело. Он работает только вместе с остальной системой — и только если повторяется одинаково.
Палитра и роли
Фирменный цвет редко бывает один. Обычно это палитра — небольшой набор цветов, у каждого из которых своя роль.
- Основной — цвет, по которому узнают дело. Он на вывеске, в знаке, на главных носителях.
- Дополнительный — поддерживает основной, даёт второй тон: фон упаковки, плашки, иллюстрации.
- Фон — светлый или тёмный нейтральный, на котором всё стоит. Часто это не чистый белый, а тёплый или холодный оттенок, подобранный к основному.
- Акцент — яркий цвет для самого важного: кнопки «заказать», цены, наклейки «новинка». Его мало, и поэтому он работает.
Роли важнее самих цветов. Два дела с одной и той же палитрой, но разными ролями будут выглядеть по-разному: у одного зелёный основной и песочный фон, у другого — песочный основной и зелёный акцент. Когда роли записаны, подрядчик не ошибётся, какой цвет куда ставить.
Сколько цветов нужно? Обычно хватает одного основного, одного-двух дополнительных, фона и акцента. Кроме них, сайтам и приложениям нужны служебные цвета — для ошибок, предупреждений и успеха, — но их держат спокойными и в фирменные не записывают.
Палитру проверяют на носителях: на упаковке, на сайте, на вывеске, в соцсетях. Цвета, которые хороши рядом на образце, иногда спорят на реальной вещи — особенно если между ними нет нейтрального фона.
Коды: экран и печать
Цвет в брендбуке записывают не словами «тёмно-зелёный», а кодами. Слова каждый понимает по-своему, а коды — одинаково. Кодов несколько, потому что цвет живёт в разных средах.
- RGB и HEX — для экранов: сайт, приложение, соцсети. Экран смешивает свет — красный, зелёный и синий. HEX — та же запись в шестнадцатеричном виде, вроде #2F5D3A.
- CMYK — для печати: листовки, визитки, упаковка. Печать смешивает краски — голубую, пурпурную, жёлтую и чёрную.
- Плашечные цвета (например, по каталогу Pantone) — готовая смешанная краска с номером. Её используют, когда цвет должен совпадать точно на разных тиражах и материалах.
Главная ловушка: экран и бумага выглядят по-разному. Экран светится, бумага отражает свет, и яркие экранные цвета часто нельзя повторить краской. Насыщенный зелёный на мониторе в печати может стать тусклым и болотным. Поэтому коды подбирают для каждой среды отдельно, а не переводят автоматически одной кнопкой.
Материал тоже меняет цвет. Один и тот же код на белой мелованной бумаге, на крафте, на ткани и на пластике даст четыре разных оттенка. Крафт делает всё темнее и теплее, ткань — мягче. Для важных носителей пробу делают на их собственном материале.
В брендбук записывают все коды рядом: HEX для экрана, CMYK для печати, номер плашки, если он есть. Тогда любой подрядчик возьмёт нужный, не пересчитывая по-своему.
Контраст и доступность
Последнее, о чём нельзя забывать, — контраст. Цвет, который красив в пятне, может быть нечитаем как цвет текста или как фон под текстом.
Контраст считают отношением яркостей двух цветов: от 1 (цвета одинаковой яркости) до 21 (чёрное на белом). Для обычного текста нужен контраст не меньше 4,5, для крупного — не меньше 3. Эти числа взяты из международных рекомендаций по доступности сайтов, но годятся и для печати: текст с меньшим контрастом плохо читается на солнце, на старом телефоне, у человека в очках.
Отсюда практическое следствие: в палитре должна быть пара для текста — цвет, который хорошо читается на фоне, и фон, на котором хорошо читается текст. Песочный, пастельный или светло-серый цвет прекрасен для плашек и заливок, но текст им не набирают.
Второе следствие: не передавать смысл одним цветом. Примерно каждый двенадцатый мужчина различает цвета хуже большинства — чаще всего путает красный и зелёный. Если «в наличии» отмечено зелёной точкой, а «нет в наличии» — красной, часть покупателей их не различит. Рядом с цветом ставят слово, значок или форму.
Проверьте контраст до того, как палитра попадёт в брендбук. Исправить его на этапе палитры — значит сдвинуть оттенок. Исправлять потом — значит переделывать носители.