Психология цвета в веб-дизайне: как оттенки влияют на поведение пользователей

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

Как мозг воспринимает цвет

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

Наше восприятие цвета формируется двумя факторами. Первый — эволюционный. Миллионы лет красный цвет сигнализировал об опасности (кровь, огонь, ядовитые ягоды), поэтому мы до сих пор реагируем на него острее, чем на другие оттенки. Зелёный ассоциировался с безопасностью — там, где зелень, есть вода и пища.

Брендинг для кафе-пекарни. Источник: Brenden

Второй фактор — культурный. И вот тут начинаются нюансы. Белый цвет в западной культуре символизирует чистоту и невинность (свадебные платья, медицинские халаты). А в Китае, Японии и некоторых африканских странах белый — цвет траура. Красный на Западе это страсть и опасность, в Китае уже удача и процветание.

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

Что говорит каждый цвет?

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

Синий: доверие и надёжность

Синий — абсолютный чемпион среди корпоративных цветов. Facebook, Twitter (до прихода Илона Маска), LinkedIn, PayPal, Samsung, IBM — список можно продолжать долго. И это не совпадение.

Синий в интерфейсе PayPal

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

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

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

Красный: энергия, срочность, страсть

Красный один из самых «громких» цветов. Он буквально кричит: «Обрати на меня внимание!» И мозг слушается. Красный мы замечаем первым в любом визуальном ряду.

Красный в интерфейсе Netflix

Netflix, YouTube, Coca-Cola, Nintendo — бренды, которые хотят вызывать сильные эмоции и ассоциироваться с энергией, выбирают красный. А ещё этот цвет незаменим на распродажах: «-50%», «Только сегодня!», «Осталось 2 штуки!»,  все эти плашки почти всегда красные.

Почему это работает? Красный создаёт ощущение срочности и стимулирует импульсивные действия. Исследования Design Oddy и проведенные A/B тесты показывают, что контрастные красные и оранжевые CTA‑кнопки показали двузначный рост кликов по сравнению с менее заметными цветами, но универсального правила “красный всегда продаёт” нет: эффект зависит от контраста, окружения и текста кнопки. Поэтому байку про продающий красный, можно не слушать. Смотрите на контекст использования и обоснование цвета.

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

Зелёный: природа, здоровье, рост

Ассоциации очевидны: природа, свежесть, экологичность, здоровье.

Зелёный в интерфейсе Spotify

Starbucks, Spotify, WhatsApp, Android — бренды, которые хотят казаться дружелюбными, «своими» и экологически ответственными. Интересный кейс: компания Heinz в 2000-х выпустила кетчуп в зелёной упаковке вместо традиционной красной,  и за 7 месяцев продала более 10 миллионов бутылок, заработав 23 миллиона долларов. 

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

• Когда использовать: эко-бренды, здоровье и wellness, финансы (рост, прибыль), органические продукты.

Оранжевый: дружелюбие и энтузиазм

Оранжевый, по сути, тот же красный, но мелее жесткий. Он сохраняет энергию и привлекает внимание, но при этом не такой агрессивный и более располагающий. Я как ментор наших студентов в Академии, отдаю первое место оранжевому цвету. Честное слово, я не понимаю почему, но начинающие дизайнеры очень любят именно этот цвет, и формирует палитры своих проектов с его присутствием. Но в этом нет ничего плохого, если выбор цвета обоснован.

Оранжевый в интерфейсе incident.io

Fanta, Nickelodeon, SoundCloud, Amazon — бренды используют оранжевый, когда хотят казаться весёлыми, креативными и доступными. Этот цвет отлично работает для детской аудитории и развлекательных продуктов.

• Когда использовать: детские товары, образовательные платформы, CTA-кнопки (как альтернатива красному), креативные индустрии.

Жёлтый: оптимизм и предупреждение

Жёлтый один из самых ярких цветов в спектре. Он бросается в глаза, поэтому используется в дорожных знаках, такси и предупреждающих надписях.

Жёлтый в интерфейсе IKEA

IKEA, McDonald’s, Snapchat, National Geographic — бренды, которые хотят излучать позитив, энергию и дружелюбие. Жёлтый ассоциируется с солнцем, теплом и радостью.

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

Фиолетовый: роскошь и креативность

Фиолетовый, редкий гость в природе, поэтому исторически ассоциировался с королевской властью (краситель был очень дорогим). Сегодня он символизирует роскошь, креативность и инновации.

Фиолетовый в интерфейсе Twitch

Milka, Twitch, Yahoo, Hallmark — бренды, которые хотят выделяться и ассоциироваться с чем-то особенным.

• Когда использовать: beauty-индустрия, креативные агентства, премиальные продукты, футуристичные продукты.

Чёрный: премиальность и элегантность

Чёрный, это классика, которая никогда не выходит из моды. Apple, Chanel, Nike, Prada — премиальные бренды выбирают чёрный, потому что он транслирует элегантность, силу и эксклюзивность.

Черный в интерфейсе Apple

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

Важно: не используй чистый чёрный #000000. Он выглядит слишком резко и неестественно. В реальности почти ничего не бывает абсолютно чёрным, ни уголь, ни экран смартфона. Используй смягчённые оттенки вроде #111111 или #1a1a1a.

Белый: чистота и простор

Белый — это воздух в дизайне. Он создаёт ощущение простора, чистоты и профессионализма. Google, Apple, Airbnb используют обилие белого пространства, чтобы контент «дышал» и фокусировал внимание на главном.

Белый в интерфейсе Gemini

Как и с чёрным, избегай чистого белого (#FFFFFF) для больших площадей — он слишком яркий и утомляет глаза. Лучше использовать чуть приглушённые оттенки: #FAFAFA, #F7F7F7.

Как подобрать цвета для своего проекта

Как применить эти знания о цветах на практике? Вот пошаговый алгоритм.

Шаг 1: Определи настроение и цель

Прежде чем открывать генератор палитр, ответь на вопросы:

• Какие эмоции должен вызывать продукт?
• Какое действие ты хочешь, чтобы пользователь совершил?
• Какие ценности транслирует бренд?

Если это банковское приложение, то нужны спокойствие и доверие (синий, зелёный). Если детский образовательный сервис, то энергия и веселье (оранжевый, жёлтый). Если премиальный fashion-бренд, попахивает элегантностью и эксклюзивностью (чёрный, белый, золотой).

Coinbase использует синий в своём интерфейсе

Шаг 2: Применяй правило 60-30-10

Это золотой стандарт цветового баланса в дизайне:

• 60% основной цвет (обычно нейтральный фон)
• 30% вторичный цвет (блоки, карточки, дополнительные элементы)
• 10% акцентный цвет (кнопки, ссылки, важные элементы)

Такое распределение создаёт визуальный баланс и помогает пользователю мгновенно понять, где основной контент, а где интерактивные элементы.

Airbnb использует подход 60-30-10

Шаг 3: Используй цветовые схемы

Не нужно изобретать велосипед, есть проверенные схемы сочетания цветов:

• Монохромная — разные оттенки одного цвета. Безопасный выбор, но может быть скучным.
• Аналоговая — соседние цвета на цветовом круге (например, синий и зелёный). Гармонично и спокойно.
• Комплементарная — противоположные цвета (красный и зелёный). Контрастно и энергично, но требует аккуратности.
• Триадная — три цвета, равномерно распределённые по кругу. Живо и динамично.

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

Цветовые схемы

Шаг 4: Проверяй контраст и доступность

Красивая палитра бесполезна, если текст на ней невозможно прочитать. Стандарт WCAG требует коэффициент контрастности не менее 4.5:1 для обычного текста.

Проверка контраста на сайте Академии

Проверить контраст можно с помощью сервиса на сайте Академии, просто вводишь два цвета и сразу видишь, проходят ли они проверку.

Инструменты для работы с цветом

Мы для этой статьи собрали несколько сервисов, которые помогут тебе в работе с цветом, а ещё больше полезных сервисов ты сможешь найти в разделе “Ресурсы” на сайте Академии.

• Coolors — быстрый и интуитивный генератор палитр. Нажимаешь пробел и получаешь случайную комбинацию. Нравится какой-то цвет,  «замораживаешь» его и генерируешь остальные. Есть плагин для Figma.
• Adobe Color — мощный инструмент от Adobe. Главная фишка, можно загрузить изображение и извлечь из него цветовую палитру. Полезно, когда нужно сделать дизайн на основе конкретного фото или референса.
• Figma Color Wheel — ресурс от самой Figma, который позволяет построить гармоничные палитры по основным схемам сочетания цветов, и, что самое приятное. Готовую палитру можно экспортировать в Figma, с уже готовыми токенами цветов.

Типичные ошибки: чего избегать

⚠️ Слишком много цветов

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

⚠️ Игнорирование контраста

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

⚠️ Чистый чёрный и белый

#000000 и #FFFFFF слишком резкие для человеческого глаза. Используй смягчённые варианты: #111111, #1A1A1A для тёмных тонов и #FAFAFA, #F5F5F5 для светлых.

⚠️ Несоответствие бренду

Яркий розовый на сайте серьёзной юридической компании вызовет когнитивный диссонанс. Цвета должны соответствовать позиционированию и ожиданиям аудитории.

⚠️ Игнорирование культурного контекста

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

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

Изучайте теорию цвета, создавайте эстетичные и удобные интерфейсы, прокачивайте свои навыки и делайте этот мир лучше, при помощи дизайна!