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

Цвет — это первое, что воспринимает посетитель, еще до того, как прочитает слово. Он мгновенно передает информацию об отрасли, вызывает доверие и задает тон. Он также напрямую влияет на читаемость текста, а значит, на то, останутся ли люди на странице.

В этой статье объясняется, как работает система палитр PAGEnza и почему ограничения, которые мы накладываем на выбор цвета, на самом деле дают лучшие результаты, чем предоставление ИИ неограниченной свободы.

Проблема с просьбой к ИИ «выбрать красивые цвета»

Если вы попросите LLM выбрать цвета для веб-сайта, вы получите HEX-коды. Иногда они хорошо сочетаются. Иногда — нет. У модели нет надежного способа оценить, работают ли цвета на самом деле — читаем ли текст, соответствует ли палитра отрасли, является ли сочетание визуально целостным, а не случайно подобранным.

Мы ясно увидели эту проблему на ранних этапах тестирования. Неограниченная генерация цветов давала палитры от превосходных до совершенно непригодных. Не было никакой последовательности.

Решением было полностью изъять выбор цвета из ведения LLM и создать алгоритмическую систему, гарантирующую определенные свойства.

4-цветная система

Каждый сайт PAGEnza использует ровно четыре именованных цвета:

ink — основной цвет текста. Всегда темный (высокий контраст яркости с фоном). Используется для заголовков, основного текста и элементов интерфейса, которые должны быть читаемыми.

bg1 — основной фон. Обычно самый светлый цвет в палитре. Используется для основного фона страницы и светлых секций.

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

accent — фирменный цвет. Используется для кнопок, ссылок, выделений и декоративных элементов. Обычно самый насыщенный цвет в палитре.

Это ограничение — четыре именованных роли, а не произвольные HEX-коды — и делает систему палитр рабочей. ИИ никогда не решает, какой цвет куда поместить; он только выбирает палитру из предварительно проверенного набора.

Как организованы палитры

Мы поддерживаем более 20 групп палитр, каждая из которых построена вокруг архетипа:

• Смелые: высококонтрастные, насыщенные акценты — технологии, SaaS, финтех
• Мягкие: приглушенные, ненасыщенные — велнес, коучинг, креативные услуги
• Роскошные: почти черные фоны с металлическими или драгоценными акцентами — премиальные услуги, элитный ритейл
• Землистые: теплые нейтральные тона с акцентами терракоты или шалфея — еда, экологичность, ремесла
• Темные: палитры, ориентированные на темный режим — разработчики, агентства, гейминг
• Нейтральные: безопасные, профессиональные — юриспруденция, финансы, здравоохранение

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

Контрастность WCAG: ограничение, улучшающее дизайн

WCAG AA требует, чтобы обычный текст имел коэффициент контрастности не менее 4,5:1 к фону. Крупный текст требует 3:1. Интерактивные элементы требуют 3:1 к соседним цветам.

Каждая палитра в нашей системе проверяется на соответствие этим коэффициентам перед включением. В частности:

• ink должен обеспечивать контрастность ≥4,5:1 к bg1, bg2 и любому фону, где появляется текст
• accent должен обеспечивать контрастность ≥3,0:1 к bg1 и bg2 (для использования в качестве фона кнопок)
• Валидация использует реальные расчеты яркости — L = 0.2126R + 0.7152G + 0.0722B после коррекции гаммы — а не приближения.

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

Контраст цветовых температур между секциями

Одна деталь, которую легко упустить: bg1 и bg2 должны иметь контрастные цветовые температуры. Если оба фона теплые, чередующиеся секции выглядят монотонно — страница выглядит как одно непрерывное пятно, а не отдельные области контента.

Правило в нашей системе: если bg1 имеет теплый оттенок (в направлении оранжевого/желтого или теплый нейтральный, как кремовый), то bg2 должен быть холодным (в направлении синего/серого). Если bg1 — холодный белый, то bg2 может быть теплым не совсем белым.

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

Логика выбора цвета для конкретных отраслей

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

Здравоохранение и велнес: синие и зеленые цвета сигнализируют о доверии и спокойствии. Насыщенные красные и оранжевые в этом контексте воспринимаются как тревожные.

Юриспруденция и финансы: темные темно-синие, угольные, консервативные серые. Яркие акценты допустимы, но должны быть сдержанными. Игривые палитры подрывают доверие.

Еда и гостеприимство: теплые тона — терракотовый, янтарный, кремовый — активируют ассоциации с аппетитом. Холодные клинические палитры кажутся неуместными.

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

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

Выбор архетипа в Design Mandate сопоставляет отрасль + тип бизнеса с соответствующей группой палитр, поэтому коуч по велнесу не получит ту же палитру, что и юридическая фирма, даже если обе описаны как «профессиональные».

Что клиенты могут изменить

После генерации клиенты могут редактировать свой сайт в Gutenberg. Выбор цвета в редакторе показывает только четыре фирменных цвета — ничего больше. Это означает:

• Они могут менять фоны секций между bg1, bg2 и поверхностями.
• Они могут менять цвета кнопок и ссылок между accent и ink.
• Они не могут вводить произвольный пятый цвет, который нарушит палитру.

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