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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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