Палитра сайта — это не «любимые цвета директора», а рабочий инструмент: она ведёт взгляд к кнопке, отделяет важное от фона и делает бренд узнаваемым. Рассказываем, как собрать её по шагам и проверить до вёрстки.
Почему цвет на сайте — это не вопрос вкуса
В логотипе цвет живёт на маленькой площади и почти всегда на белом фоне. На сайте всё иначе: тот же оттенок оказывается на кнопках, плашках, иконках, в графиках и уведомлениях, его видят на дешёвом офисном мониторе и на телефоне под солнцем. Поэтому фирменный цвет из брендбука редко удаётся перенести в интерфейс «как есть» — его приходится адаптировать, дополнять и ограничивать.
У цвета в интерфейсе три задачи. Первая — иерархия: пользователь за доли секунды понимает, что на странице главное, а что второстепенное. Вторая — функция: цвет сообщает о состоянии элемента (активен, выбран, ошибка, успех). Третья — узнаваемость: посетитель, который видел ваш сайт неделю назад, должен почувствовать «это они» ещё до того, как прочитает название. Если палитра решает только третью задачу, сайт получается красивым, но неудобным. Если только первые две — удобным, но безликим.
Из чего состоит палитра интерфейса
Рабочая палитра сайта почти всегда больше, чем цвета в брендбуке. Мы раскладываем её на пять групп — так проще договориться с заказчиком и не забыть ни одного состояния.
| Группа | Что входит | Сколько оттенков обычно нужно |
|---|---|---|
| Основной (акцентный) | Кнопки целевых действий, активные ссылки, ключевые иконки | 1 базовый + 3–4 производных для наведения, нажатия, фона |
| Дополнительный | Вторичные акценты, бейджи, выделение в таблицах | 1–2 базовых + производные |
| Нейтральные | Текст, фоны, рамки, разделители, неактивные элементы | 8–10 ступеней серого (часто с лёгким оттенком бренда) |
| Системные | Ошибка, предупреждение, успех, информация | 4 цвета × 2–3 оттенка |
| Данные | Графики, диаграммы, карты, схемы | 5–8 различимых цветов |
Самая недооценённая группа — нейтральные. На типичной странице корпоративного сайта 70–80% площади занимают фоны и текст, и именно от них зависит, выглядит ли сайт «дорого» или «самодельно». Чисто серые оттенки часто кажутся мёртвыми рядом с насыщенным брендовым цветом; добавление 2–4% тона основного цвета в серые делает интерфейс цельным, хотя сознательно этого никто не замечает.
Пошагово: как мы собираем палитру под бренд
Шаг 1. Разбираем исходные цвета
Берём всё, что у компании уже есть: брендбук, логотип, упаковку, презентации, вывески. Часто выясняется, что «фирменный синий» существует в трёх-четырёх вариантах, потому что разные подрядчики снимали его на глаз. Задача первого шага — выбрать эталон и зафиксировать его в цифровом виде (HEX и RGB для экрана), а не в пантоне для печати.
Шаг 2. Проверяем цвет на роль акцента
Не каждый фирменный цвет годится для кнопок. Бледно-салатовый или песочный могут прекрасно работать в логотипе, но белый текст на них не читается, а тёмный выглядит тяжело. Если основной цвет бренда не проходит проверку контраста, мы оставляем его для крупных плашек и иллюстраций, а для кнопок подбираем более тёмную ступень того же тона. Узнаваемость сохраняется, читаемость появляется.
Шаг 3. Строим шкалу оттенков
Для каждого базового цвета делаем шкалу из 9–10 ступеней — от почти белого до почти чёрного. Строить её удобнее не в привычной модели HSL, а в перцептивных моделях вроде OKLCH: там одинаковый шаг светлоты действительно выглядит одинаковым для глаза, и жёлтый не «проваливается» в грязно-оливковый на тёмных ступенях. Из шкалы потом берутся фоны карточек (светлые ступени), состояния кнопок (средние) и текст на цветных плашках (тёмные).
Шаг 4. Добавляем системные цвета
Красный для ошибок, зелёный для успеха, жёлтый или оранжевый для предупреждений. Здесь важно не столкнуться с брендом: если фирменный цвет компании красный, красная ошибка в форме будет выглядеть как обычный акцент. В таких случаях сдвигаем системный красный в сторону малинового или усиливаем его иконкой и текстом, чтобы сообщение считывалось не только цветом.
Шаг 5. Проверяем на реальных экранах
Палитра, утверждённая на откалиброванном мониторе дизайнера, может выглядеть иначе на ноутбуке менеджера закупок. Мы всегда смотрим ключевые экраны на трёх-четырёх устройствах: офисный монитор, бюджетный ноутбук, iPhone и недорогой Android. Особенно коварны светлые серые: разделитель, который отлично виден на макете, на дешёвой матрице просто исчезает.
Правило пропорций и почему акцента должно быть мало
Классическое правило 60–30–10 (60% — доминирующий нейтральный фон, 30% — вспомогательный цвет, 10% — акцент) в вебе работает как ориентир, а не закон. На практике для B2B-сайтов акцентного цвета бывает даже меньше — 5–7% площади экрана. Причина простая: акцент должен указывать на действие. Если основным цветом залиты шапка, подвал, плашки преимуществ и половина иконок, кнопка «Запросить прайс» теряется среди них.
Характерный случай из практики: дистрибьютор строительных материалов пришёл с жалобой на низкую конверсию каталога. На сайте фирменным оранжевым были оформлены шапка, все заголовки, рамки карточек и кнопка «В заявку». В карте кликов было видно, что посетители кликают по заголовкам разделов, принимая их за кнопки. После того как оранжевый оставили только для целевых действий, а заголовки перевели в тёмно-серый, доля добавлений в заявку из карточки выросла заметно — примерно на четверть за первый месяц сравнения.
Совет студии: прежде чем утверждать палитру, откройте макет главной страницы, сделайте его чёрно-белым и прищурьтесь. Если вы по-прежнему видите, куда нажимать и что тут главное, — иерархия построена правильно, и цвет её только усилит. Если без цвета всё сливается, проблема не в палитре, а в композиции.
Контраст и доступность: цифры, которые стоит знать
Для проверки читаемости используется коэффициент контраста между текстом и фоном. Ориентиры такие: не менее 4,5:1 для основного текста, не менее 3:1 для крупного текста (от 24 px или от 18,5 px жирным) и для значимых графических элементов вроде границ полей ввода и иконок-кнопок. Чистый чёрный на белом даёт 21:1, светло-серый #999 на белом — всего около 2,8:1, то есть уже не проходит порог для обычного текста.
Самые частые нарушения, которые мы находим при аудите чужих сайтов:
- серый текст-подсказка внутри поля ввода, который невозможно прочитать на солнце;
- белый текст на жёлтой или светло-зелёной кнопке;
- текст поверх фотографии без затемняющей подложки;
- состояние ошибки, обозначенное только красной рамкой, без текста и иконки;
- ссылки внутри абзаца, отличающиеся от текста только цветом с низким контрастом.
Около 8% мужчин в той или иной форме плохо различают красный и зелёный. Для сайта это означает простое правило: цвет никогда не должен быть единственным носителем смысла. Статус «в наличии / под заказ» в каталоге обозначаем не только зелёным и красным, но и текстом или иконкой.
Тёмная тема и другие контексты
Всё больше посетителей включают тёмное оформление системы, а часть B2B-интерфейсов (личные кабинеты, дилерские порталы) пользователи держат открытыми весь рабочий день. Если планируется тёмная тема, палитру нужно проектировать с учётом этого с самого начала, а не инвертировать цвета в последний момент.
Несколько практических моментов. Фон тёмной темы лучше делать не чисто чёрным, а тёмно-серым с оттенком бренда — чистый чёрный с ярким белым текстом утомляет глаза. Насыщенные акценты на тёмном фоне кажутся «кислотными», поэтому их светлоту приходится поднимать, а насыщенность — снижать. Тени на тёмном фоне почти не видны, поэтому глубину передают светлотой слоёв: чем выше элемент, тем он светлее.
Отдельный контекст — печать и документы. Если с сайта скачивают коммерческие предложения или спецификации в PDF, их оформление должно опираться на ту же палитру, иначе клиент видит двух разных «брендов» на экране и на бумаге.
Как зафиксировать палитру, чтобы она не расползлась
Хорошая палитра умирает не при запуске сайта, а через год, когда контент-менеджер добавляет «чуть более яркую» плашку для акции, а подрядчик по рекламе рисует баннеры в своём понимании фирменного цвета. Чтобы этого не произошло, цвета нужно зафиксировать как систему.
- Даём каждому цвету не описательное имя («синий»), а функциональное: «акцент», «акцент-наведение», «фон-вторичный», «текст-приглушённый», «ошибка».
- Переносим эти имена в код как переменные (токены), чтобы смена оттенка в одном месте меняла его на всём сайте.
- Описываем в коротком руководстве, какой цвет для чего разрешено использовать и какие сочетания запрещены.
- Настраиваем визуальный редактор CMS так, чтобы контент-менеджер выбирал цвет из утверждённого набора, а не из произвольной пипетки.
Этот подход — часть более широкой работы над визуальным языком проекта, которую мы ведём при разработке дизайна сайта: цвет, типографика, сетка и компоненты описываются вместе, чтобы сайт оставался цельным при любом объёме контента.
Чек-лист: палитра готова к вёрстке, если…
- основной цвет бренда зафиксирован в HEX/RGB и утверждён как эталон;
- для кнопок выбран оттенок с контрастом не ниже 4,5:1 к тексту на ней;
- для каждого базового цвета построена шкала из 9–10 ступеней;
- нейтральные серые подобраны с лёгким оттенком бренда, их 8–10 ступеней;
- системные цвета (ошибка, успех, предупреждение, информация) не конфликтуют с фирменными;
- акцентный цвет занимает не больше 10% площади типового экрана;
- смысловые состояния дублируются текстом или иконкой, а не только цветом;
- ключевые экраны проверены на 3–4 реальных устройствах;
- для тёмной темы (если она нужна) цвета спроектированы отдельно, а не инвертированы;
- цвета названы функционально и описаны как переменные для разработчиков.
Если по всем пунктам стоит галочка, палитра выдержит и запуск, и годы наполнения сайта. Если нет — лучше потратить на её доработку ещё неделю на этапе дизайна, чем потом переделывать вёрстку десятков страниц.
