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

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

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

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

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

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

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

Как перенести фирменные цвета на экран

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

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

Для экрана цвета записывают в HEX или RGB. Если в брендбуке есть только печатные значения, экранные подбирают заново и сверяют глазами на нескольких мониторах и телефонах: прямой перевод из печатной модели часто даёт тусклый или кислотный цвет. Как цвет вписывается в остальные элементы стиля, разобрано в статье из каких элементов состоит фирменный стиль.

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

Сколько цветов нужно сайту?

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

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

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

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

Яркий цвет на странице работает, пока его мало. Акцент, которым покрашено всё, перестаёт быть акцентом.

Какой контраст требует WCAG для текста и кнопок?

Контраст — отношение яркости цвета текста к яркости фона, и WCAG задаёт для него минимальные значения. В России те же требования повторяет ГОСТ Р 52872-2019, разработанный на основе WCAG 2.1. Основному тексту по критерию 1.4.3 нужно не меньше 4.5:1, крупному тексту — не меньше 3:1. Крупным считается текст от 18 пунктов или от 14 пунктов полужирным.

Уровень AA — обычная цель для коммерческого сайта. AAA строже: основному тексту нужно 7:1, и под это требование многие фирменные цвета не подходят вовсе.

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

Факт. По критерию WCAG 1.4.11 кнопкам, полям ввода, иконкам и графикам нужен контраст с фоном не меньше 3 к 1 — это касается и рамки поля формы.

Почему цвет не может быть единственным сигналом

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

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

Как закладывать это в палитру:

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

Оттенки и состояния: от одного цвета к шкале

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

Удобный способ думать о шкале подсказывает Material Design. В нём у каждого цвета есть парная роль для текста и иконок поверх него: on-primary используют поверх primary, on-primary-container — поверх primary-container. Пара цветов подбирается так, чтобы контраст внутри неё проходил требования доступности.

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

Генерировать шкалу вручную не обязательно. Документация Android советует собирать цветовую схему из исходных цветов бренда инструментом Material Theme Builder: он строит тональные палитры и сразу выдаёт роли для светлой и тёмной темы.

Для каждой роли в палитре утверждают пару: цвет фона и цвет текста поверх него. Так контраст проверяется один раз, а не в каждом новом блоке.

Нужна ли сайту тёмная тема?

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

Если решили делать, учитывайте настройки посетителя. Медиазапрос prefers-color-scheme определяет, выбрал ли пользователь светлую или тёмную тему в системе или браузере, и сайт может переключиться сам.

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

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

Как записать палитру, чтобы её одинаково поняли дизайнер и разработчик?

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

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

:root {
  --color-brand: #1f5fbf;
  --color-accent: #e8590c;
  --color-text: #1d2330;
  --color-text-muted: #5b6475;
  --color-bg: #ffffff;
  --color-surface: #f3f5f8;
  --color-error: #c92a2a;
}

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

Как проверить палитру перед вёрсткой

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

Если пара не проходит, меняйте светлоту, а не тон: тот же синий, но темнее, обычно решает задачу и сохраняет узнаваемость бренда.

С чего начать, если палитры ещё нет

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

Если фирменного стиля нет или его цвета не работают на экране, палитру сайта лучше собирать вместе со стилем. В разработке фирменного стиля мы собираем палитру с кодами для экрана и печати — HEX, RGB, CMYK и Pantone, — чтобы цвет совпадал на сайте и в типографии. О том, как цвет сочетается со стилем сайта целиком, читайте в разборе направлений веб-дизайна.

Источники

• ГОСТ Р 52872-2019 «Интернет-ресурсы и другая информация, представленная в электронно-цифровой форме. Приложения для стационарных и мобильных устройств, иные пользовательские интерфейсы. Требования доступности для людей с инвалидностью и других лиц с ограничениями жизнедеятельности» — Росстандарт
• Use of color — MDN Web Docs — Mozilla
• Web Content Accessibility Guidelines (WCAG) 2.2 — W3C
• Color and contrast accessibility — Google, web.dev
• Material Design 3 in Compose — Google, Android Developers
• prefers-color-scheme — MDN Web Docs — Mozilla