психология
цвета.

цвет считывается раньше текста и задаёт ощущение от компании. разбираем, как собрать палитру, почему миф про красную кнопку не работает и что проверить до запуска.

Что изучает психология цвета

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

Важная оговорка: это не законы, а закономерности, и работают они в контексте. Тот же красный в интерфейсе банка читается как ошибка, а на распродаже — как выгода. Значение цвету придаёт ситуация, а не сам цвет.

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

Как цвет работает на сайте

Первая задача — первое впечатление. Палитра считывается раньше текста и сразу задаёт ощущение: дорого или дёшево, современно или устарело, серьёзно или несерьёзно.

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

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

Цвет кнопки и конверсия

Вокруг цвета кнопок много мифов. «Лучшего цвета» не существует: работает не оттенок сам по себе, а контраст с окружением. Кнопка заметна, когда этот цвет больше нигде на экране не используется.

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

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

Как подобрать палитру

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

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

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

Что учесть до запуска

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

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

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

Доступность и контраст

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

Контраст текста и фона проверяется автоматическими инструментами, и делать это нужно до вёрстки, а не после жалоб. Отдельно проверяют состояния: неактивная кнопка, текст на цветном фоне, подписи в формах.

Ещё одно правило — не передавать смысл только цветом. Ошибку в форме подсвечивают и цветом, и текстом, иначе часть посетителей просто её не увидит.

Частые вопросы

Сколько цветов должно быть в палитре?

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

Можно ли взять цвета конкурента?

Не стоит. Смысл палитры в том, чтобы вас отличали. Полезнее посмотреть, какие цвета в нише заняты, и выбрать свободный.

Правда ли, что красная кнопка конвертирует лучше зелёной?

Универсального правила нет. Значение имеет контраст с фоном и уникальность акцента на странице, а конкретный оттенок проверяется тестом.

Нужно ли менять палитру при редизайне?

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

Что делать дальше

Откройте любую страницу сайта и посчитайте, сколько разных цветов на ней используется. Если больше пяти — начните с сокращения палитры и с того, чтобы акцентный цвет остался только на кнопках.

Мы собираем палитры и фирменный стиль — это дизайн и брендирование. Дальше пригодятся разборы, как сделать призыв к действию на сайте и как проводить A/B-тестирование.


HERO Заголовок:  психология цвета.
изображение
готовы
к росту?
изображение
блог