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

Зачем продумывать цвет системно

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

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

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

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

Но переоценивать эти правила не стоит:

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

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

Структура палитры

Хорошая палитра сайта обычно состоит из нескольких групп.

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

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

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

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

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

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

Правило 60-30-10

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

• 60 процентов площади — доминирующий нейтральный цвет, обычно светлый фон;
• 30 процентов — вторичный цвет: фоны отдельных блоков, крупные элементы, шапка или подвал;
• 10 процентов — акцентный цвет: кнопки, ссылки, важные элементы.

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

Как подобрать палитру: пошагово

Шаг 1. Начните с бренда

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

Шаг 2. Определите характер

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

Шаг 3. Выберите схему сочетания

Цветовой круг предлагает несколько проверенных схем:

• Монохромная — оттенки одного цвета. Спокойно, элегантно, но может быть скучно.
• Аналоговая — соседние цвета на круге. Гармонично, мягко.
• Комплементарная — противоположные цвета. Контрастно, энергично, хорошо выделяет акцент.
• Триада — три цвета на равном расстоянии. Ярко, требует аккуратности.

Для большинства коммерческих сайтов хорошо работает схема: нейтральная основа плюс основной цвет плюс контрастный акцент.

Шаг 4. Соберите нейтральную шкалу

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

Шаг 5. Проверьте контраст

Каждую пару «текст — фон» проверьте на соответствие требованиям доступности. Подробнее — в следующем разделе.

Шаг 6. Протестируйте в реальном макете

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

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

Достаточный контраст — обязательное требование, а не вопрос вкуса. Стандарты доступности веб-контента рекомендуют:

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

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

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

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

Главная кнопка страницы должна быть самым заметным интерактивным элементом. Для этого:

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

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

Тёмная тема

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

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

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

1. Слишком много цветов. Каждый блок своего цвета — сайт выглядит пёстрым и несерьёзным.
2. Акцентный цвет везде. Кнопка теряется среди ярких декоративных элементов.
3. Низкий контраст текста. Светло-серый на белом, белый на жёлтом.
4. Цвет как единственный носитель смысла. Ошибки и статусы видны только по цвету.
5. Разные оттенки одного цвета. Пять «почти одинаковых» синих на разных страницах из-за отсутствия системы.
6. Ориентация на вкус руководителя. Любимый цвет директора не обязательно подходит аудитории и задаче.
7. Игнорирование фотографий. Яркие цветные фото конфликтуют с палитрой сайта. Подбирайте или обрабатывайте изображения в единой гамме.

Как зафиксировать палитру

Мы в КомРА оформляем цвета как часть дизайн-системы: каждый цвет получает понятное название по роли (например, «основной», «акцент», «фон», «текст основной», «текст второстепенный», «ошибка»), значение в HEX и правила применения. В коде эти цвета задаются переменными. Так при изменении оттенка его достаточно поправить в одном месте, а дизайнеры и разработчики говорят на одном языке.

Итог

Цвет в веб-дизайне — это система, а не набор понравившихся оттенков. Хорошая палитра строится от бренда, включает основной и акцентный цвета, шкалу нейтральных оттенков и служебные цвета для состояний. Распределяйте цвет по принципу 60-30-10, оставляйте акценту мало места, чтобы он работал, и обязательно проверяйте контраст по стандартам доступности.

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