Короткий ответ
Относитесь к фирменному цвету как к набору утверждённых эталонов, по одному на каждый носитель, а не как к одному значению, которое пересчитывают на ходу. Экрану нужен hex, краске и покрытиям — обозначение NCS или RAL, выбранное по физическим образцам; каждый материал и отделку утверждают подписанным образцом при названном освещении, а движение описывают именованными токенами. Одного листа на цвет и одной страницы о движении достаточно, чтобы любой подрядчик воспроизвёл результат.
Hex-код описывает экран, а не стену
В большинстве брендбуков цвет задан один раз, в виде hex-значения, а всё остальное считается пересчётом. Пока бренд живёт на экранах, этого хватает. Но как только цвет должен появиться в виде краски на стене магазина, порошкового покрытия на стальной вывеске или красителя в ткани униформы, hex перестаёт быть инструкцией. Маляр не может смешать шесть символов из таблицы стилей, а цех покраски и пробовать не станет.
Дальше всё предсказуемо. Каждый подрядчик переводит значение по-своему: изготовитель вывески берёт ближайший оттенок из веера, маляр просит в магазине отсканировать распечатку, типография пересчитывает цвет в краски. Каждое из этих решений можно защитить, а вместе они дают три разных красных под одним логотипом.
Выход — перестать думать об одном цвете с множеством пересчётов. Задайте одну айдентику с несколькими утверждёнными эталонами: по одному на каждый носитель, и каждый записан на языке, на котором работает его исполнитель. Краска и покрытия идут в этом разборе первыми, потому что после нанесения их труднее всего исправить, но та же логика распространяется на материалы, свет и движение.
Что цифры в номере RAL говорят производителю покрытий
RAL — немецкий цветовой стандарт, по которому заказывают множество красок и порошковых покрытий, и в разделе вопросов и ответов на его сайте точно сказано, чем занимается организация. Она определяет и стандартизирует оттенки и выпускает обязательные цветовые эталоны; лакокрасочные материалы она не производит и не продаёт. Поэтому номер RAL хорошо «путешествует». Это цель, в которую может попасть любой производитель, а не артикул одной компании.
Номера устроены по-разному. В коллекции RAL CLASSIC у оттенка четыре цифры, и RAL поясняет, что первая из них системная: 1 — жёлтые, 2 — оранжевые, 3 — красные, 4 — фиолетовые, 5 — синие, 6 — зелёные, 7 — серые, 8 — коричневые, 9 — белые и чёрные оттенки. К номеру прилагается описательное название, и RAL советует указывать то и другое вместе, чтобы снизить риск путаницы.
В RAL DESIGN SYSTEM plus цифр семь, и здесь номер уже описывает цвет. По объяснению RAL, первые три цифры задают положение на цветовом круге, следующие две — светлоту от 0 для чёрного до 100 для белого, а последние две — насыщенность, от 0 для серого и выше. Пример из ответов RAL — оттенок RAL 270 30 20: тёмно-синий с тоном 270, светлотой 30 и насыщенностью 20. Записывайте код полностью: RAL предупреждает, что 000 50 00 в этой системе — серый, а RAL 5000 в классической коллекции — насыщенный синий.
NCS записывает то, что воспринимает глаз
Естественная цветовая система, NCS, исходит из восприятия, а не из пигмента. Финский производитель красок Teknos, все краски которого колеруются по NCS, в материалах для профессионалов описывает её как логичную систему, основанную на том, как человек видит цвет, и построенную на шести элементарных цветах: белом, чёрном, жёлтом, красном, синем и зелёном. Любой другой цвет записывается через соотношение с ними, поэтому код говорит о том, как цвет выглядит, а не о том, как он получен.
Teknos объясняет запись на примере NCS S 1070-Y10R. Четыре цифры — это нюанс: 10 % черноты и 70 % хроматичности. Часть после дефиса — цветовой тон, в данном случае жёлтый с 10 % красного. То, что остаётся, если вычесть черноту и хроматичность из 100 %, — белизна цвета.
Бренду такая структура удобна по двум причинам. Палитру можно расширять упорядоченно: в тех же материалах советуют сохранять нюанс и менять тон либо сохранять тон и менять нюанс, чтобы получить цвета, которые сочетаются между собой. А само обозначение задумано как межотраслевое, понятное дизайнерам, производителям, продавцам и заказчикам. Какую систему выбрать — редко вопрос вкуса. Спросите тех, кто будет наносить цвет, с какими веерами и колеровочными системами они работают, и задавайте цвет на их языке.
Экранные значения и коды красок — родственники, а не переводы
Бесплатные конвертеры за секунду превратят любой hex в «ближайший» код RAL или NCS. Считайте результат местом, с которого стоит начать поиск, но не ответом. Экран создаёт цвет, излучая свет, а окрашенная поверхность — отражая его, поэтому их можно соотнести, но нельзя сделать одинаковыми.
Даже типографская краска на бумаге с трудом передаёт цвета покрытий. В ответах RAL сказано, что печатные цветовые карты дешевле в производстве, но не передают все оттенки RAL достоверно: образцы, изготовленные лакокрасочным способом, охватывают гораздо более широкое цветовое пространство, чем четырёхкрасочная печать. Поэтому оригинальные образцы RAL делают только лакокрасочными системами. Если для окончательного решения нельзя доверять печатной карте, монитору или PDF доверять тем более нельзя.
Поэтому физический цвет выбирайте физически. Положите настоящий веер рядом с печатными и экранными материалами бренда, найдите оттенок с тем же характером и запишите его как самостоятельное эталонное значение. Полная спецификация цвета тогда перечисляет родственников: экранное значение, обозначение краски или покрытия и полиграфический эталон. Каждый утверждён на глаз рядом с остальными, и ни один не получен из другого по формуле.
Один и тот же код выглядит по-разному на стали, штукатурке и пластике
Обозначение фиксирует цель, а не результат. Один и тот же оттенок в глянце обычно выглядит глубже, чем в матовом исполнении, меняется на фактурной поверхности и по-разному ведёт себя как краска для стен, порошковое покрытие или литой пластик. Это не ошибка подрядчика. Так поверхности обращаются со светом.
Сама RAL считает поверхность частью образца. Её пластиковые эталонные пластины, как сказано в ответах, выпускаются трёх толщин и с тремя структурами поверхности, чтобы показать цвет в разных исполнениях материала. Там же проведена граница, которую владельцам брендов стоит перенять: цветовые карты служат ориентиром и подспорьем и не являются обязательными, какое бы хорошее впечатление они ни производили, а обязательными эталонами служат регистровые карты.
Перенесите это различие на свой бренд. Для каждого материала, который несёт цвет, попросите у подрядчика образец, сделанный настоящим способом на настоящей основе и достаточно крупный, чтобы оценить его с другого конца комнаты. Утвердите образец, подпишите и поставьте дату, одну половину оставьте себе, другую — подрядчику. Тираж сравнивают именно с этой подписанной панелью, а не с кодом.
Свет тоже входит в спецификацию
Цвет утверждают при одном свете, а живут с ним при другом. Образец, выбранный под офисными потолочными панелями, увидят в свете магазинных спотов, при дневном свете из окна и под уличными фонарями вечером, и везде он будет выглядеть по-разному. Два материала, совпадающие в одном из этих условий, в следующем могут разойтись.
Практический ответ — утверждать там, где цвет будет жить. Привезите образцы на объект или в максимально похожее место и посмотрите на них в важные часы: при открытии, в полдень, вечером. Встаньте на то расстояние, с которого смотрит покупатель. Держите образец вертикально, если это стена, и горизонтально, если это столешница: от угла зависит, что поверхность возвращает глазу.
Затем запишите условия. В записи об утверждении должно быть сказано, какие лампы были включены, был ли дневной свет и с чем сравнивали образец. Фотографии полезны как свидетельство самой встречи и бесполезны как эталон цвета: каждая камера и каждый экран толкуют его по-своему. Если на новом объекте другое освещение, повторите проверку, а не считайте, что прежнее утверждение переносится само.
Движению нужны имена и значения, как и цвету
Движение — та часть айдентики, которую чаще всего описывают прилагательными. «Плавно», «уверенно» и «игриво» — это настроения, и два аниматора сделают из них разное точно так же, как два маляра смешают разный красный. Движение становится воспроизводимым, когда его задают так же, как цвет: именованными значениями, которые можно использовать повторно.
Как это выглядит в открытом документе, показывает дизайн-система IBM Carbon. В ней определены два стиля движения, productive и expressive, причём выразительный приберегают для редких важных моментов. Плавность задаётся тремя именованными типами: стандартным, входным и выходным, и каждый опубликован в виде кривой. Длительностью управляют именованные токены: на момент этой проверки их шесть, от 70 миллисекунд для микровзаимодействий вроде нажатия кнопки до 700 миллисекунд для затемнения фона.
Небольшому бренду механика IBM не нужна, но форму можно позаимствовать. Определите три-четыре именованных движения, например появление, уход и акцент, и дайте каждому значение, которое разработчик или монтажёр сможет ввести руками. Укажите, каким свойствам разрешено двигаться, а каким нет: скажем, панели сдвигаются и проявляются, а логотип никогда не подпрыгивает. Стоит перенять и правило соразмерности из Carbon: чем больше изменение расстояния или размера, тем дольше длится движение, так что одно имя может нести разные значения в разном масштабе, пока замысел неизменен.
Контраст: здесь фирменный цвет встречается с опубликованным порогом
На экранах одна сторона цвета не является делом вкуса. Руководство W3C по доступности веб-контента, WCAG, задаёт минимальный контраст 4,5:1 между текстом и фоном и 3:1 для крупного текста, под которым в пояснении понимается кегль 18 пунктов или 14 пунктов полужирным. В пояснительном документе добавлено, что это пороги: вычисленное значение 4,499:1 не соответствует 4,5:1.
Команды брендов часто считают, что на их палитру это не распространяется. Распространяется. Критерий освобождает текст, который входит в логотип или название бренда, но в пояснении W3C сказано: за пределами логотипов текст с недостаточным контрастом, вызванным фирменным стилем или брендбуком, исключением не является. Там же объясняется, что контраст рассчитывается так, что цветовой тон не играет ключевой роли. Важна разница между светлым и тёмным, поэтому яркий фирменный цвет бренда может не пройти проверку как цвет текста на белом.
Заложите ответ в систему, а не обнаруживайте его во время разработки сайта. Проверьте каждую пару «текст и фон» из палитры анализатором контраста и опубликуйте пары, прошедшие проверку. Если основной цвет не годится для основного текста, определите для шрифта более тёмного «напарника», а исходный оставьте для крупных форм и плоскостей. С движением поступите так же: руководство Carbon требует, чтобы то же сообщение всегда можно было передать статично, поэтому решите, во что превращается каждая анимация у людей, которые попросили своё устройство уменьшить движение.
Лист на каждый цвет, страница о движении: пакет для подрядчика
Всё сказанное умещается в короткий документ, по которому подрядчик может работать без совещания. У каждого цвета свой лист: название и роль, экранное значение, обозначение краски или покрытия, записанное полностью и с названием системы, полиграфический эталон, а для каждого утверждённого материала — основа, отделка и степень блеска. Добавьте номер подписанного образца, место его хранения и освещение, при котором его утвердили.
Движению отводится одна страница: именованные токены со значениями, свойства, к которым они применяются, десятисекундный ролик-образец и вариант для уменьшенного движения. Материалам — планшет с образцами, физический и подписанный, с теми же номерами, что и на листах. Подрядчик, получивший все три части, знает, что делать, с чем это будут сравнивать и кто принимает работу.
Наконец, назначьте пакету ответственного и ритм проверок. Образцы выцветают, затираются в руках и теряются, поэтому эталоны проверяют по графику и заменяют из свежей утверждённой партии. Компания, чей цвет не входит в стандартные коллекции, может пойти дальше: в ответах RAL описана услуга, при которой фирма присылает свой образец, а RAL выпускает для этого цвета регистровые карты, доступные только этой компании. Какой бы путь вы ни выбрали, принцип один. Бренд — это набор утверждённых эталонов, а коды — способ их запросить.
Практический чеклист
- Перечислите все носители, на которых появляется фирменный цвет, и дайте каждому собственное утверждённое значение, а не пересчитанное.
- Выбирайте оттенок NCS или RAL по физическому вееру рядом с печатными материалами и записывайте обозначение полностью.
- Просите у каждого подрядчика образец на настоящей основе и с настоящей отделкой, затем подпишите, датируйте и сохраните утверждённую панель.
- Утверждайте цвета на объекте в важные часы и фиксируйте условия освещения в записи об утверждении.
- Проверьте контраст каждой пары текста и фона и задайте именованные токены движения с вариантом для уменьшенного движения.
Вопросы и ответы
Можно ли точно перевести hex-цвет в RAL или NCS?
Нет. Hex описывает свет, который излучает экран, а RAL и NCS — цвета на физических поверхностях; их можно соотнести, но нельзя сделать одинаковыми. Онлайн-конвертеры предлагают ближайший оттенок, и это полезно как отправная точка. Окончательный выбор делают на глаз по физическому вееру или образцу, рядом с другими материалами бренда.
Чем система RAL отличается от NCS?
RAL обозначает стандартизированные оттенки номером: четыре цифры в классической коллекции и семь в RAL DESIGN SYSTEM plus, где цифры кодируют тон, светлоту и насыщенность. NCS записывает цвет так, как он воспринимается: через черноту, хроматичность и тон. Обе системы широко применяются для красок и покрытий. Практический выбор зависит от того, с какой из них уже работают ваши маляры, цеха покраски и производители.
Почему одна и та же краска по-разному выглядит на двух поверхностях?
Потому что код задаёт цель, а поверхность решает, как от неё вернётся свет. Степень блеска, фактура, материал основы и способ нанесения меняют внешний вид, как и освещение в помещении. Поэтому утверждённый физический образец на настоящей основе, рассмотренный при настоящем освещении, надёжнее одного обозначения.
Должны ли фирменные цвета соответствовать требованиям к контрасту?
Для текста — да. Пояснение W3C о контрасте освобождает текст, входящий в логотип или название бренда, но говорит, что остальной текст с недостаточным контрастом из-за брендбука исключением не считается. Минимум — 4,5:1 для обычного текста и 3:1 для крупного. Если основной цвет проверку не проходит, добавьте более тёмного «напарника» для шрифта, а не снижайте планку.
Как описать движение в брендбуке?
Небольшим набором именованных значений, а не прилагательными. Дайте каждому движению имя, значение, которое можно ввести в код или монтажную программу, список свойств, к которым оно применяется, и ролик-пример. Добавьте правило на случай, когда человек попросил устройство уменьшить движение. Так устроены открытые дизайн-системы вроде IBM Carbon: в них есть именованные стили, кривые плавности и токены длительности.