Первое впечатление от сайта человек формирует за доли секунды, и цвет играет в этом едва ли не главную роль. Ещё до того как посетитель прочитает заголовок, палитра уже сообщает ему что-то о компании: серьёзная она или дружелюбная, современная или консервативная, дорогая или доступная.
Зачем сайту продуманная палитра
Цвет на сайте решает сразу несколько задач. Во-первых, он формирует эмоциональное впечатление — то самое ощущение «нравится или нет», которое человек не всегда может объяснить словами. Во-вторых, цвет структурирует интерфейс: кнопки одного оттенка, ссылки другого, фон третьего — всё это помогает глазу быстро находить нужные элементы. В-третьих, палитра работает на узнаваемость бренда: если цвета сайта совпадают с фирменными цветами компании, посетитель быстрее свяжет сайт с уже знакомой вывеской, упаковкой или рекламой.
Когда палитра выбрана случайно — «нравится этот синий» — сайт может выглядеть красиво на первый взгляд, но плохо решать практические задачи: кнопки теряются на фоне, текст плохо читается, важные блоки не выделяются среди остальных.
Что означают основные цвета
Восприятие цвета частично универсально, частично зависит от культуры и контекста. Тем не менее есть устойчивые ассоциации, на которые опираются дизайнеры при выборе палитры для разных сфер бизнеса.
Синий
Доверие, стабильность, профессионализм. Часто используется в финансовой сфере, медицине, IT — везде, где важно ощущение надёжности.
Зелёный
Природа, здоровье, рост. Хорошо подходит экологичным брендам, медицинским и образовательным проектам, финансовым сервисам, где акцент делают на стабильности дохода.
Красный
Энергия, срочность, внимание. Эффективен для акцентов — кнопок, акций, — но утомляет, если использовать как фоновый цвет большой площади.
Жёлтый и оранжевый
Оптимизм, доступность, дружелюбие. Хорошо работают в сегменте услуг для дома, детских товаров, кафе и небольшого бизнеса.
Чёрный и тёмно-серый
Строгость, премиальность, минимализм. Часто выбирают для дорогих товаров, дизайнерских услуг, ювелирных изделий.
Белый
Чистота, простота, воздух. Не столько самостоятельный цвет, сколько фон, который даёт остальным элементам «дышать».
Важно понимать: это не строгие правила, а тенденции. Хороший дизайн опирается не только на ассоциации, но и на то, чем реально занимается компания и кто её клиенты.
Из чего складывается рабочая палитра
Для большинства сайтов достаточно палитры из нескольких ролей, а не десятка произвольных оттенков.
Основные роли цвета в интерфейсе
- Основной (брендовый) цвет — используется в логотипе, шапке, ключевых акцентах
- Дополнительный цвет — оттеняет основной, используется реже, для вторичных элементов
- Акцентный цвет — для кнопок призыва к действию и важных уведомлений, должен выделяться на фоне остальных
- Нейтральные цвета — оттенки серого и белого для фона, текста, разделителей
- Цвета состояний — обычно зелёный для успеха, красный для ошибки, жёлтый для предупреждения
Когда в макете больше семи-восьми различных оттенков без ясной роли каждого, сайт начинает выглядеть хаотично, даже если по отдельности цвета красивые.
Контраст важнее моды на оттенки
Можно выбрать модный цвет сезона и всё равно получить сайт, на котором неудобно читать текст. Причина — недостаточный контраст между текстом и фоном. Светло-серый текст на белом фоне смотрится стильно на макете в Figma, но в реальности, особенно на экране смартфона при солнечном свете, читается с трудом.
Есть рекомендации по минимальному контрасту для доступности сайта — они разработаны, чтобы текст могли комфортно читать в том числе люди с ослабленным зрением. Проверить контраст можно специальными инструментами еще на этапе проектирования макета в Figma, до того как вёрстка уйдёт в разработку.
Если сайт создаётся для широкой аудитории — например, для сферы услуг или медицины, — стоит закладывать более высокий контраст, чем кажется нужным «на глаз». Это тема, которую мы подробно разбираем в статье о доступности сайта.
Как выбрать палитру для своего проекта
- Определите фирменные цвета. Если у компании уже есть логотип и брендбук, палитра сайта должна отталкиваться от них, а не выбираться отдельно.
- Изучите палитры конкурентов в нише. Это не для копирования, а чтобы понять, какие цветовые решения приняты в отрасли и стоит ли от них отличаться.
- Соберите палитру из ролей, а не оттенков. Сначала определите основной, акцентный и нейтральные цвета, а не «десять красивых цветов, которые нравятся».
- Проверьте контраст текста и фона. Особенно у кнопок и ссылок — они должны быть заметны с первого взгляда.
- Протестируйте палитру на реальном контенте. Цвета, которые хорошо смотрелись на макете с иллюстрациями, могут иначе восприниматься с реальными фотографиями и текстами.
Цвет и конверсия
Отдельная тема — цвет кнопок призыва к действию. Распространённый миф — что существует «идеальный цвет кнопки», который всегда повышает конверсию. На практике важнее не конкретный оттенок, а контраст кнопки с остальным интерфейсом: если акцентный цвет используется только для кнопок и ключевых элементов, а не разбросан по всей странице, кнопка сама будет притягивать взгляд, каким бы цветом она ни была.
Проверить, как реально ведут себя посетители с разными вариантами цвета, помогает настройка веб-аналитики: карта кликов в Яндекс Метрике покажет, замечают ли пользователи кнопку и как часто до неё доходят.
Тёмная и светлая тема
Отдельный вопрос, который всё чаще возникает при обсуждении палитры, — нужна ли сайту тёмная тема оформления. Для одних проектов, особенно технических сервисов и приложений с долгим временем использования, тёмная тема снижает нагрузку на глаза и выглядит современно. Для большинства бизнес-сайтов — визиток, каталогов услуг, интернет-магазинов — светлая тема остаётся более понятной и привычной аудитории, а тёмная скорее добавляет сложности в поддержке: приходится дублировать все цветовые решения и следить, чтобы контраст оставался достаточным в обоих вариантах.
Если тёмная тема всё же нужна, важно не просто «инвертировать» цвета автоматически, а заново продумать палитру: то, что хорошо читается на белом фоне, на тёмном может потерять контраст или начать «мерцать» из-за слишком яркого акцентного цвета.
Частые ошибки в работе с цветом
Слишком много ярких цветов одновременно
Когда акцентный цвет используется и для кнопок, и для заголовков, и для иконок, и для фона блоков, посетитель перестаёт понимать, что действительно важно, а что просто декоративный элемент. Акцентный цвет работает только тогда, когда он редкий.
Игнорирование фирменного стиля
Если у компании уже есть узнаваемые цвета — на вывеске, в рекламе, на упаковке, — а сайт сделан в совершенно другой палитре, это разрывает восприятие бренда. Посетитель, который видел рекламу компании, может не узнать её же сайт.
Одинаковый цвет для разных по важности действий
Если кнопка «оформить заказ» и кнопка «узнать подробнее» выглядят одинаково, пользователю сложнее понять, какое действие приоритетное. Более важному действию стоит отдавать более заметный, акцентный цвет.
Выбор палитры без учёта контента
Палитра, продуманная только под макет с иллюстрациями, может плохо сочетаться с реальными фотографиями товаров или сотрудников. Стоит заранее прикинуть, как цвета будут смотреться с настоящими фото, а не только с заглушками.
Коротко
Палитра сайта — это не про моду, а про то, чтобы посетитель быстро понимал, где что находится, и чувствовал доверие к компании ещё до чтения текста. Хорошая палитра строится из ролей — основной, акцентный, нейтральные цвета, — учитывает контраст и фирменный стиль компании. Если нужна помощь с подбором палитры и дизайном сайта в целом, посмотрите нашу услугу редизайн сайта или напишите через контакты — обсудим задачу и предложим варианты.
