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

РАЗДЕЛ 01Что такое психология цвета в дизайне

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

Ассоциации и внимание: две разные вещи

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

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

Где я вижу влияние цвета на заявки

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

РАЗДЕЛ 02Теория цвета в веб-дизайне: круг, системы и схемы

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

Цветовой круг Ньютона

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

Система Манселла

Альберт Манселл описал цвет тремя параметрами: тон (hue), светлота (value) и насыщенность (chroma). Для практики важна светлота. Два цвета разного тона, но одинаковой светлоты, на чёрно-белой распечатке сольются. Так же сливается текст, если его цвет по светлоте близок к фону.

Цветовые схемы для сайта

Сервис ColorScheme.ru на октябрь 2026 года предлагает шесть схем, и это хорошая шпаргалка:

Для коммерческого сайта я чаще всего советую монохромную схему или акцентированную аналогию: основная гамма спокойная, а один контрастный цвет уходит на кнопки.

РАЗДЕЛ 03Правило 60-30-10: как распределить цвета

Правило 60-30-10 пришло из дизайна интерьеров и хорошо работает на сайтах. Около 60% площади занимает основной цвет, около 30% вторичный, около 10% акцентный.

Как это выглядит на странице

Пропорции условные, никто не меряет их линейкой. Смысл в том, что акцента мало. Если акцентный цвет занимает треть страницы, он перестаёт выделяться.

Как я делаю у себя

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

РАЗДЕЛ 04Акцентный цвет: кнопки, цифры и продающий красный

Акцентный цвет это цвет действия. Им отмечают то, на что человек должен нажать или что должен запомнить. Один акцент на сайт, максимум два, если второй нужен для предупреждений.

Продающий красный: миф или нет

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

Оранжевый сайт и оранжевые акценты

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

Если хотите оранжевую кнопку с белой надписью, берите более тёмный оттенок и крупный жирный шрифт или пишите на ней тёмным.

РАЗДЕЛ 05Какой цвет вызывает доверие

Чаще всего на этот вопрос отвечают «синий». Синий действительно часто встречается у банков, страховых и IT-сервисов. Но из того, что синий популярен у банков, не следует, что синий сам по себе вызывает доверие у человека. Возможно, мы просто привыкли видеть его у солидных компаний.

Что на самом деле работает на доверие

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

Цвет и ниша

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

РАЗДЕЛ 06Какие цвета привлекают внимание в рекламе

Для рекламы логика та же, что для кнопки на сайте: замечают то, что отличается от окружения. Окружение рекламы это лента соцсети, страница сайта-площадки, выдача поиска.

Кричащие цвета: когда помогают

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

Самые привлекательные цвета для рекламы: проверяйте тестом

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

Цвет в торговом зале

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

РАЗДЕЛ 07Сочетания цветов для веб-дизайна: читаемость

Красивая палитра бесполезна, если текст не читается. Здесь у дизайна есть измеримый стандарт.

Контраст по WCAG

По критерию 1.4.3 рекомендаций WCAG (уровень AA) контраст обычного текста с фоном должен быть не ниже 4,5:1, крупного не ниже 3:1. Крупным считается текст от 18 пунктов или от 14 пунктов полужирным, это примерно 24 px и 18,5 px. Проверить контраст можно в любом онлайн-калькуляторе контраста или в инструментах разработчика браузера.

Серый текст на белом

Модный светло-серый текст часто не проходит. Серый #777777 на белом даёт 4,48:1, чуть ниже нормы. Серый #595959 на белом уже 7:1. Разница на глаз небольшая, а читать становится заметно легче, особенно с телефона на солнце.

Каким цветом лучше писать на синем фоне

Зависит от синего. Посчитал для двух популярных оттенков:

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

РАЗДЕЛ 08Палитра цветов для сайта: сервисы и цены

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

Сравнение сервисов

Цветовая гамма для сайта: как собрать за час

1. Возьмите цвет логотипа или фирменный цвет как основу.
2. В сервисе подбора постройте монохромную схему или аналогию от него.
3. Выберите один контрастный акцент для кнопок.
4. Проверьте контраст текста и надписей на кнопках.
5. Запишите HEX-коды и используйте только их.

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

Сколько стоит работа дизайнера над палитрой

Отдельно палитру редко заказывают. Её делают в составе фирменного стиля или дизайна сайта, и цена зависит от объёма работы. Если собираете сайт сами на конструкторе, палитры из сервиса и правила 60-30-10 хватит. Как собрать сайт на конструкторе, разбирал в статье про сайт на Тильде.

РАЗДЕЛ 09FAQ

Отвечает Никита Морозов

Какой цвет вызывает доверие у человека?

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

Что такое правило 60-30-10 в дизайне?

Это распределение цветов: около 60% площади основной цвет, около 30% вторичный, около 10% акцентный. Так акцент остаётся заметным, а страница не выглядит пёстрой.

Какой цвет кнопки лучше для продаж?

Тот, который сильнее всего отличается от остальной страницы. На синем сайте заметна оранжевая кнопка, на оранжевом синяя. Проверить можно A/B-тестом.

Каким цветом лучше писать на синем фоне?

На тёмно-синем белым: контраст около 8,7:1. На светло-синем тёмным: белый даёт около 3,1:1, этого хватает только для крупного текста.

Что такое акцентный цвет?

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

Чем полезен цветовой круг Ньютона?

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

Где подобрать цветовую палитру для сайта бесплатно?

В сервисах вроде ColorScheme.Ru и Coolors: у Coolors на октябрь 2026 года есть бесплатный план без ограничения по сроку. После подбора проверьте контраст текста.

РАЗДЕЛ 10С чего начать

1. Откройте свой сайт с телефона и найдите кнопку заявки за три секунды. Не нашли, значит, акцент не работает.
2. Проверьте контраст основного текста и надписей на кнопках, норма для обычного текста от 4,5:1.
3. Оставьте один акцентный цвет и уберите его со всего, что не кнопка и не главная цифра.
4. Если сомневаетесь в цвете, сделайте два варианта баннера или кнопки и сравните по цифрам.

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

Никита Морозов

Яндекс Директ, SEO, маркетинг под ключ

Веду кабинеты клиентов сам, без передачи «младшему специалисту». Тексты на сайте написаны по тому, что вижу в отчётах, а не по чужим гайдам.

9лет в нише

200+проектов

4,919 оценок на Картах

Telegram-канал Отзывы на Яндекс Картах Кейсы