Цветовая палитра сайта: как подобрать сочетания под бренд

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

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

Сначала определите задачу сайта и характер бренда

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

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

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

Из каких цветов состоит рабочая палитра сайта

Удобнее выбирать не абстрактные «пять красивых цветов», а назначать каждому понятную функцию. Тогда команда знает, где применять оттенок и какие сочетания допустимы.

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

Пропорции вроде 60/30/10 могут помочь при первом эскизе, но это не требование. Для текстового блога нейтрального фона может быть больше, для промостраницы с крупной фотографией — меньше. Оценивайте реальную страницу, а не только набор образцов.

Как подобрать цветовую палитру для сайта по шагам

1. Выберите базу и один главный акцент

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

Если фирменного цвета нет, соберите несколько направлений из изображений и материалов, подходящих аудитории. Сравнивайте каждое направление на одном и том же макете: заголовок, абзац, ссылка, кнопка, форма и карточка. Так будет проще заметить, какое сочетание работает в интерфейсе, а не только на доске вдохновения.

2. Добавьте нейтральные поверхности и текст

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

3. Определите соседние сочетания

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

4. Добавьте состояния и проверьте масштабирование

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

Пример палитры: условная студия консультаций

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

Роль	Значение	Применение
Основной текст	#111827	Заголовки и основной текст на светлой поверхности
Основной фон	#F8FAFC	Фон страницы и крупных текстовых блоков
Акцент	#1D4ED8	Кнопка записи с белой надписью и отдельные ссылки
Тёмный акцент	#1E3A8A	Более тёмное состояние кнопки
Светлая поверхность	#DBEAFE	Спокойная подложка для информационного блока с тёмным текстом

Для пары белого текста и кнопки #1D4ED8 контраст составляет примерно 6,7:1, а для текста #111827 на фоне #F8FAFC — примерно 17,0:1. Это результаты для указанных сплошных цветов: прозрачность, изображение на фоне и изменение оттенка дадут другой результат. Проверяйте итоговые цвета в интерфейсе, а не переносите эти числа на все версии дизайна.

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

Контраст и доступность: что проверить до запуска

Цветовое сочетание должно оставаться читаемым для людей с разным зрением и на разных устройствах. В качестве практического ориентира используйте критерии WCAG уровня AA: для обычного текста — контраст не ниже 4,5:1, для крупного — не ниже 3:1. К крупному обычно относят текст от 18 пунктов или от 14 пунктов при полужирном начертании. Границу сравнивают без округления: значение ниже порога не становится проходным из-за округления.

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

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

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

Сочетания цветов: полезные приёмы и ограничения

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

Близкие цвета на цветовом круге дают мягкий переход; контрастный дополнительный оттенок может выделить главное действие. В обоих случаях важны светлота и насыщенность, а не только положение на круге. Два разных по тону цвета могут иметь недостаточный контраст, особенно при мелком тексте.

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

Как перенести палитру в дизайн и код

Зафиксируйте цвета по ролям, а не по положению в списке. Названия вроде «текст основной», «фон поверхности» и «акцент действия» понятнее, чем «синий номер два». Для каждой роли сохраните код цвета, допустимый фон, состояние компонента и пример применения. Если проект поддерживает светлую и тёмную темы, проверьте пары в каждой из них отдельно.

В CSS такие значения удобно хранить в переменных. Например, для учебной палитры выше:

:root {
  --color-text: #111827;
  --color-surface: #f8fafc;
  --color-action: #1d4ed8;
  --color-action-hover: #1e3a8a;
  --color-action-text: #ffffff;
}

.button {
  background: var(--color-action);
  color: var(--color-action-text);
}
.button:hover { background: var(--color-action-hover); }
.button:focus-visible { outline: 3px solid #111827; outline-offset: 3px; }

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

Где чаще всего возникают ошибки

Брендовый цвет используют везде. Когда одинаково яркими становятся меню, ссылки, иконки и кнопки, посетителю сложнее понять приоритет. Оставьте акцент для действительно важных действий и проверьте его на страницах с разной плотностью контента.

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

Проверяют один цвет вместо пары. Один и тот же серый читается на белом и исчезает на светло-сером. Учитывайте наложения и прозрачность, а для текста поверх изображений проверяйте разные кадры и размеры экрана.

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

Чек-лист перед утверждением палитры

1. Определены задачи посетителя и собраны существующие материалы бренда.
2. Назначены роли фона, текста, акцента и служебных цветов; понятны состояния элементов.
3. Проверены реальные пары текста и фона, кнопки, ссылки, границы полей и индикаторы фокуса.
4. Ошибки, успех и другие состояния различимы не только по цвету.
5. Макеты просмотрены с содержательным текстом, на узком экране и при увеличении масштаба.
6. Коды и правила применения переданы команде; перечислены компоненты для повторной проверки.
7. Палитра просмотрена вместе с фотографиями, типографикой и навигацией, а не отдельно от них.

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