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

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

Что на самом деле делает цвет на сайте

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

• Узнаваемость. Цвет — один из самых запоминающихся элементов бренда. Человек может забыть название компании, но помнить, что у неё был «зелёный сайт».
• Настроение. Тёплые оттенки воспринимаются как дружелюбные и энергичные, холодные — как спокойные и надёжные, приглушённые — как сдержанные и дорогие.
• Иерархия. Яркий цвет притягивает взгляд, нейтральный отступает на второй план. Распределяя цвет, дизайнер решает, что человек увидит первым.
• Функция. Цвет показывает, что кликабельно, что выбрано, где ошибка, где успешное действие. Это язык интерфейса, и он должен быть последовательным.

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

Психология цвета: что работает, а что миф

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

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

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

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

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

С чего начать выбор палитры

Мы никогда не начинаем с цветового круга. Сначала — контекст.

1. Фирменный стиль. Если у компании есть логотип и фирменные цвета, палитра сайта строится от них. Но не всегда напрямую: цвет, хорошо смотрящийся на вывеске, может оказаться слишком ярким или неконтрастным на экране. Тогда подбираем экранные версии.
2. Позиционирование. Как компания хочет восприниматься: массовая или премиальная, традиционная или инновационная, строгая или дружелюбная. От этого зависят насыщенность и температура палитры.
3. Конкуренты. Смотрим, какие цвета используют конкуренты, и решаем, соблюдать конвенцию или выделяться.
4. Контент. Если на сайте будет много фотографий, палитра должна с ними сочетаться и не спорить. Яркие фотографии товаров требуют сдержанного интерфейса.
5. Аудитория. Возраст, условия использования, устройства. Для старшей аудитории важнее контраст, для молодой допустима большая смелость.

Если фирменного стиля нет или он устарел, мы рекомендуем начать с его разработки. В рамках услуги фирменного стиля палитра создаётся сразу с учётом экрана, печати и вывесок, и потом не приходится подгонять одно под другое.

Контраст и доступность

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

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

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

Акцентный цвет и кнопки

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

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

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

Тёмная тема и другие сценарии

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

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

Сезонные и акционные цвета

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

Типичные ошибки

• Слишком много цветов. Каждый раздел своего цвета, каждая иконка своего оттенка. Сайт выглядит пёстро и несолидно.
• Акцент везде. Фирменный яркий цвет на заголовках, иконках, плашках и кнопках. Ничего не выделяется.
• Низкий контраст ради «воздушности». Серый текст на светло-сером фоне. Красиво на макете, нечитаемо в жизни.
• Чистые насыщенные цвета. Ярко-красный, ярко-синий, ярко-зелёный из стандартной палитры. Выглядят грубо и дёшево; почти всегда лучше слегка приглушённые оттенки.
• Нет системы. Оттенки подобраны на глаз для каждого блока, и через полгода на сайте двенадцать почти одинаковых синих.

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

Вывод

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