Заказчики часто приносят нам брендбук с одним-двумя фирменными цветами и просят «сделать сайт в наших цветах». Звучит просто, но на деле фирменный цвет, придуманный для логотипа, вывески или упаковки, почти никогда не годится для интерфейса без доработки. Ярко-красный, который отлично смотрится на билборде, на кнопках, ссылках, фонах и иконках превращает страницу в тревожный сигнал.
Палитра сайта — это система, в которой у каждого цвета есть своя роль. Ниже рассказываем, как мы её собираем: от анализа бренда до проверки контраста и тёмной темы.
Цвет — это функция, а не украшение
Первое, о чём мы договариваемся с заказчиком: цвет на сайте не только передаёт настроение бренда, но и управляет вниманием. Кнопка ярче окружения — на неё нажимают. Красная подпись под полем — человек понимает, что ошибся. Серый текст — второстепенная информация. Если цвета расставлены хаотично, посетитель не понимает, что важно, а что нет.
Поэтому мы раскладываем палитру по ролям:
- Основной (брендовый) цвет — узнаваемость, ключевые элементы, иногда кнопки.
- Акцентный цвет — то, что должно привлекать внимание: главные кнопки, бейджи, выделения.
- Нейтральные цвета — фоны, текст, рамки, разделители. Это самая большая часть интерфейса.
- Служебные цвета — успех, ошибка, предупреждение, информация.
Бывает, что основной и акцентный цвет совпадают. Бывает, что брендовый цвет вообще не используется в интерактивных элементах, а живёт только в логотипе и иллюстрациях. Решение зависит от самого цвета и от задач сайта.
Правило пропорций
В дизайне интерьеров есть известное соотношение 60/30/10: шестьдесят процентов пространства занимает основной цвет, тридцать — дополнительный, десять — акцент. В интерфейсах пропорции другие, но принцип тот же. Нейтральных цветов должно быть много, брендовых — умеренно, акцентных — мало.
Если акцентом окрашено всё, он перестаёт быть акцентом. Мы видели сайты, где оранжевым были залиты шапка, кнопки, иконки, заголовки и половина фонов. В результате главная кнопка «Оставить заявку» ничем не выделялась, и люди её не находили. После того как мы перевели большинство элементов в нейтральную гамму и оставили оранжевый только для целевых действий, кликов по кнопке стало заметно больше.
Как расширить фирменный цвет до палитры
Один фирменный цвет — это одна точка. Для интерфейса нужна шкала: от очень светлого оттенка для фонов до очень тёмного для текста и состояний наведения. Мы строим такую шкалу из девяти-десяти ступеней.
- Определяем, где на шкале находится исходный фирменный цвет. Обычно это середина.
- Получаем светлые оттенки, повышая светлоту и немного снижая насыщенность. Они нужны для фонов карточек, выделенных строк, подложек.
- Получаем тёмные оттенки, понижая светлоту и слегка сдвигая тон. Они пригодятся для состояний наведения и нажатия, а также для текста на светлом брендовом фоне.
- Проверяем, что все ступени выглядят как один цвет, а не как случайный набор.
Важная тонкость: при простом затемнении многие цвета становятся грязными. Жёлтый превращается в болотный, оранжевый — в коричневый. Поэтому при построении шкалы мы немного корректируем тон, а не только светлоту. Удобнее всего работать в цветовых моделях, где светлота отделена от тона и насыщенности: так шкала получается визуально равномерной.
Нейтральные цвета решают больше, чем кажется
Чёрный текст на белом фоне — самый контрастный и не всегда самый комфортный вариант. Абсолютно чёрный на ярком белом утомляет глаза при долгом чтении. Мы обычно используем очень тёмный серый для текста и чуть смягчённый белый или светло-серый для фонов.
Ещё один приём — подмешивать в нейтральные цвета немного брендового оттенка. Если фирменный цвет синий, серые становятся едва заметно холодными. Если тёплый терракотовый — серые слегка тёплые. Посетитель не осознаёт этого, но палитра выглядит цельной, а не собранной из разных наборов.
Сколько оттенков серого нужно
Как правило, достаточно восьми-десяти: два-три для фонов, два для рамок и разделителей, три-четыре для текста разной важности. Больше — и дизайнеры начинают путаться, какой серый где использовать, а в макетах появляются почти одинаковые оттенки.
Контраст и доступность
Красивая палитра бесполезна, если текст на ней невозможно прочитать. Для проверки используется коэффициент контрастности между цветом текста и фона. Общепринятый минимум для основного текста — 4,5 к 1, для крупных заголовков — 3 к 1. Это не перестраховка: при ярком солнце на экране телефона светло-серый текст на белом просто исчезает.
| Сочетание | Типичная проблема | Что делаем |
|---|---|---|
| Белый текст на жёлтом или салатовом | Контраст ниже допустимого | Тёмный текст на светлом брендовом фоне |
| Светло-серый текст на белом | Плохо читается на телефоне | Затемняем серый до нужного контраста |
| Красный и зелёный как единственное различие | Не различают люди с особенностями цветовосприятия | Добавляем иконки и подписи |
| Текст поверх фотографии | Контраст меняется по площади картинки | Полупрозрачная подложка или затемнение |
Отдельно о цвете как единственном носителе смысла. Если ошибка в форме обозначена только красной рамкой, часть пользователей её не заметит. Всегда дублируем цвет текстом или иконкой.
Когда фирменный цвет не подходит для интерфейса
Бывают случаи, когда брендовый цвет приходится сознательно отодвигать на второй план. Мы сталкивались с такими ситуациями:
Слишком светлый цвет. Нежно-голубой или пастельно-розовый не обеспечивает контраста для белого текста на кнопке. Решение — использовать более тёмный оттенок из шкалы для интерактивных элементов, а исходный цвет оставить для фонов и иллюстраций.
Цвет, совпадающий со служебным. Если фирменный цвет красный, его сложно использовать для кнопок: красный в интерфейсах ассоциируется с ошибками и удалением. Мы выбираем для действий нейтральный тёмный или дополнительный цвет, а красный оставляем в логотипе, акцентных линиях и крупной графике. Цвет ошибки при этом немного сдвигаем, чтобы его не путали с брендом.
Слишком много фирменных цветов. Некоторые брендбуки предлагают пять-шесть равноправных цветов. Для сайта это перебор. Мы выбираем один ведущий, остальные используем в иллюстрациях, инфографике или для разделения направлений бизнеса.
Тёмная тема и другие режимы
Всё больше пользователей включают тёмный режим в системе, и сайты, которые это поддерживают, выглядят аккуратнее. Но тёмная тема — не инверсия цветов. Чистый чёрный фон с белым текстом слишком контрастен, а насыщенные брендовые цвета на тёмном фоне начинают «светиться» и резать глаза.
Для тёмной темы мы берём тёмно-серый фон с лёгким оттенком бренда, светло-серый текст и немного снижаем насыщенность акцентов. Шкалу цветов, которую строили ранее, переиспользуем: ступени, которые на светлом фоне служили для текста, на тёмном становятся фонами, и наоборот. Если палитра изначально построена системно, тёмная тема делается быстро.
Как проверить палитру до запуска
Палитру нельзя утверждать по квадратикам с образцами. Цвет меняется в зависимости от площади, соседних цветов и контекста. Поэтому мы проверяем её на реальных экранах:
- Собираем две-три типовые страницы с настоящим контентом.
- Смотрим их на разных мониторах и телефонах, в том числе недорогих.
- Проверяем контраст всех текстовых сочетаний.
- Смотрим на страницу в оттенках серого: если иерархия пропадает, значит, она держится только на цвете.
- Проверяем вид при ярком освещении, выйдя с телефоном на улицу или к окну.
Вывод
Цвет бренда — отправная точка, а не готовое решение. Чтобы он заработал на сайте, его нужно превратить в систему: распределить роли, построить шкалу оттенков, собрать нейтральные цвета, проверить контраст и предусмотреть служебные состояния. Акцентов должно быть мало, нейтральных оттенков — много, а цвет никогда не должен быть единственным способом передать смысл.
Палитру мы собираем в рамках разработки дизайна и сразу оформляем её как набор переменных, которые затем переходят в вёрстку. Если ваш сайт кажется пёстрым или, наоборот, блёклым, часто достаточно пересобрать именно цветовую систему, не переделывая структуру.
