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

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

Цвет — это функция, а не только настроение

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

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

Если держать в голове эту иерархию, многие споры снимаются сами собой. Вопрос «нравится ли вам этот зелёный» превращается в вопрос «выделяется ли кнопка заказа на фоне остальных элементов» — и на него можно ответить объективно.

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

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

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

Нейтральные цвета важнее, чем кажется

На хорошо сделанном сайте 70–80% площади занимают нейтральные цвета. Чистый чёрный текст на чистом белом фоне создаёт излишне жёсткий контраст и утомляет на длинных страницах, поэтому текст обычно делают очень тёмно-серым, а фон — белым или чуть тёплым. Хороший приём — слегка подкрасить серые в сторону основного цвета: холодные серые для синего бренда, тёплые для оранжевого. Палитра становится цельной, хотя посетитель этого не осознаёт.

Правило 60-30-10 и дозировка акцентов

Классическое правило из дизайна интерьеров хорошо работает и на сайтах: около 60% площади — доминирующий цвет (обычно светлый нейтральный фон), 30% — вторичный (тёмный текст, плашки, подвал, второстепенные блоки), 10% — акцент. Пропорции условные, смысл в том, что акцента должно быть мало. Если акцентным цветом окрашены заголовки, иконки, рамки, плашки и кнопки, он перестаёт быть акцентом.

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

Контраст и читаемость

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

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

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

Как мы собираем палитру: порядок работы

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

1. Разбираем брендбук

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

2. Проверяем фирменный цвет на пригодность

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

3. Назначаем роли

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

4. Строим шкалы оттенков

   Для основного, акцентного и нейтрального цветов генерируем по 8–10 ступеней от светлого к тёмному с равномерным шагом яркости.

5. Проверяем на реальных экранах

   Собираем ключевые страницы и смотрим их на разных мониторах, телефонах, при ярком освещении и в режиме оттенков серого.

6. Фиксируем в виде переменных

   Каждый цвет получает имя по роли, а не по оттенку: не «синий-500», а «акцент» или «фон-плашки». Это упрощает будущие изменения.

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

Тёмная тема и другие особые случаи

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

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

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

Цвет в разных отраслях

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

Частые ошибки

Напоследок — список того, что мы чаще всего исправляем при работе с чужими макетами и сайтами. Слишком много акцентных цветов: каждому разделу свой цвет, в итоге ничего не выделяется. Светло-серый текст ради «воздушности», который невозможно прочитать на телефоне. Ссылки, неотличимые от обычного текста по цвету. Кнопки одного назначения разного цвета на разных страницах. Градиенты и полупрозрачные слои поверх фотографий, под которыми текст теряется. Красный цвет, использованный и для скидок, и для ошибок, — посетитель путается, где хорошая новость, а где проблема.

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

Итог

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