Цвет в веб-дизайне: как подобрать палитру под бренд

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

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

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

С чего начинается палитра: бренд или его отсутствие

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

Если брендбук есть

Задача — перенести фирменные цвета в цифровую среду. Это не всегда так просто, как кажется. Цвета для печати задаются в системах CMYK или Pantone, а экран работает в RGB. Насыщенный синий из брошюры на мониторе может выглядеть ядовитым, а благородный бордовый — превратиться в грязно-коричневый. Поэтому фирменные оттенки обычно приходится немного корректировать под экран, сохраняя узнаваемость.

Вторая сложность: брендбуки часто описывают только один-два основных цвета. Для сайта этого мало. Нужны оттенки для фонов, рамок, состояний кнопок, сообщений об ошибках и успехе. Их приходится достраивать, опираясь на логику фирменного стиля.

Если брендбука нет

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

• Как компания хочет восприниматься: экспертно, тепло, смело, спокойно?
• Кто основная аудитория и какие у неё ожидания?
• Какие цвета используют прямые конкуренты? Слиться с ними или выделиться?
• Есть ли ограничения: ассоциации отрасли, корпоративные цвета материнской компании, цвет вывески?

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

В интернете полно таблиц вида «красный — страсть, зелёный — природа, синий — доверие». Доля правды в них есть, но воспринимать их буквально опасно. Восприятие цвета сильно зависит от оттенка, сочетания и контекста.

Зелёный может означать экологичность у фермерского магазина, деньги у финансового сервиса и медицину у аптеки. Чёрный в сочетании с золотом говорит о роскоши, а в сочетании с кислотно-жёлтым — о молодёжной энергии. Оранжевый на сайте доставки еды вызывает аппетит, а на сайте юридической фирмы — недоумение.

Поэтому полезнее думать не категориями «какой цвет что означает», а категориями характеристик:

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

Роли цветов в интерфейсе

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

Основной цвет

Цвет бренда, который ассоциируется с компанией. Используется в логотипе, ключевых заголовках, отдельных акцентных блоках. Его не должно быть слишком много — обычно 10–20% площади страницы.

Акцентный цвет

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

Нейтральные цвета

Фон, текст, рамки, разделители, второстепенные элементы. Именно они занимают большую часть страницы — 60–80%. Обычно это набор из 5–8 оттенков серого или слегка тонированных нейтральных: от почти белого для фона до почти чёрного для основного текста. Хороший приём — добавить в серые немного основного цвета бренда, тогда палитра выглядит цельнее.

Служебные цвета

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

Как построить палитру на практике

Когда основной цвет определён, остальную систему можно выстроить последовательно.

1. Зафиксируйте основной цвет. Из логотипа, брендбука или по итогам обсуждения характера бренда.
2. Постройте шкалу оттенков. От очень светлого до очень тёмного — 8–10 ступеней. Светлые ступени пригодятся для фонов блоков и выделений, тёмные — для текста на цветном фоне и состояний наведения.
3. Выберите акцент. Самые простые схемы — дополнительный цвет (противоположный на цветовом круге) или аналоговый (соседний). Дополнительный даёт сильный контраст, аналоговый — гармонию.
4. Соберите нейтральную шкалу. Тёплые серые для тёплых брендов, холодные — для холодных. Чистый серый без оттенка часто выглядит безжизненно.
5. Добавьте служебные цвета, согласовав их насыщенность с остальной палитрой.
6. Проверьте контраст всех пар «текст — фон», которые будут использоваться.
7. Соберите тестовую страницу с реальными элементами: шапкой, кнопками, карточками, формой. На отдельных образцах цвета выглядят иначе, чем в интерфейсе.

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

Контраст и доступность

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

Существует международный стандарт доступности веб-контента WCAG, который задаёт минимальные коэффициенты контрастности:

• Для обычного текста — не менее 4,5 к 1.
• Для крупного текста (от 24 пикселей или от 19 пикселей жирным) — не менее 3 к 1.
• Для значимых графических элементов интерфейса — рамок полей, иконок — не менее 3 к 1.

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

Ещё один момент — цвет не должен быть единственным носителем смысла. Примерно 8% мужчин имеют ту или иную форму нарушения цветовосприятия. Если обязательное поле в форме отмечено только красной рамкой, часть пользователей этого не заметит. Добавьте иконку, текстовое пояснение или звёздочку.

Хорошая палитра должна работать и в чёрно-белом варианте. Если, переведя макет в оттенки серого, вы не можете отличить кнопку от фона, проблема с контрастом.

Тёмная тема: нужна ли она вашему сайту

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

Если решаете делать тёмную тему, учтите, что это не просто инверсия цветов:

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

Ошибки, которые стоят конверсии

Напоследок — перечень ошибок, которые мы регулярно исправляем при редизайне.

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

Пример из нашей практики: интернет-магазин изделий из янтаря изначально использовал на сайте ярко-оранжевый в качестве основного цвета — по ассоциации с камнем. На фоне такой палитры сами изделия терялись, потому что янтарь на фото сливался с интерфейсом. Мы перевели сайт на сдержанную гамму из тёплого молочного и графитового, оставив янтарный оттенок только для кнопок покупки. Товары стали главным цветовым акцентом страницы, и средний чек вырос — покупатели лучше рассматривали украшения.

Итог: палитра как система

Хорошо подобранные цвета не бросаются в глаза. Посетитель не думает о них, просто чувствует, что сайт выглядит аккуратно, ему понятно, куда нажимать, и текст легко читается. Чтобы этого добиться:

• Отталкивайтесь от характера бренда и аудитории, а не от личных предпочтений.
• Распределите цвета по ролям: основной, акцентный, нейтральные, служебные.
• Используйте акцентный цвет экономно, только для действий.
• Проверяйте контраст по стандартам доступности.
• Не передавайте смысл только цветом.
• Тестируйте палитру на реальных макетах с реальными фотографиями.
• Зафиксируйте систему в документе, чтобы её придерживались все, кто будет дорабатывать сайт.

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