Психологія кольору для лендингів, що конвертуються

Колір — це перше, що обробляє відвідувач, ще до того, як прочитає слово. Він комунікує галузь, надійність і тон за мілісекунди. Він також безпосередньо впливає на читабельність тексту, що, своєю чергою, впливає на те, чи залишаться люди на сторінці.

Ця стаття пояснює, як працює система палітр PAGEnza і чому обмеження, які ми накладаємо на вибір кольору, насправді дають кращі результати, ніж надання ШІ необмеженої свободи.

Проблема запиту до ШІ «підібрати гарні кольори»

Якщо ви попросите LLM вибрати кольори для вебсайту, ви отримаєте шістнадцяткові коди. Іноді вони виглядають непогано разом. Іноді — ні. Модель не має надійного способу оцінити, чи кольори справді працюють — чи читабельний текст, чи палітра відповідає галузі, чи комбінація візуально узгоджена, а не випадково підібрана.

Ми чітко побачили цю проблему на ранніх етапах тестування. Необмежена генерація кольорів давала палітри, які варіювалися від чудових до абсолютно непридатних. Не було жодної послідовності.

Рішенням було повністю вилучити вибір кольору з рук LLM і створити алгоритмічну систему, яка гарантує певні властивості.

4-колірна система

Кожен сайт PAGEnza використовує рівно чотири названі кольори:

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

bg1 — основний фон. Зазвичай найсвітліший колір у палітрі. Використовується для основного фону сторінки та світлих секцій.

bg2 — вторинний фон. Створює візуальну різноманітність між секціями. Має відрізнятися за колірною температурою від bg1 — якщо bg1 — це теплий крем, то bg2 — це прохолодний сірий або білий з блакитним відтінком.

accent — брендовий колір. Використовується для кнопок, посилань, виділень та декоративних елементів. Зазвичай це найбільш насичений колір у палітрі.

Це обмеження — чотири названі ролі, а не довільні шістнадцяткові коди — робить систему палітр робочою. ШІ ніколи не вирішує, який колір куди йде; він лише вибирає палітру з попередньо перевіреного набору.

Як організовані палітри

Ми підтримуємо 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: сині кольори залишаються домінуючими, але є більший діапазон. Електричні сині, індиго та навіть фіолетові сприймаються як технологічні. Чисто чорні фони підходять для інструментів розробника.

Розкіш та преміум: ключовим є стриманість. Обмежений діапазон кольорів, майже чорні або темно-сині як основні кольори, золоті або платинові акценти. Високий контраст, ніколи не насичений.

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

Що клієнти можуть змінити

Після генерації клієнти можуть редагувати свій сайт у Gutenberg. Вибір кольору в редакторі показує лише чотири брендові кольори — нічого більше. Це означає:

• Вони можуть змінювати фони секцій між bg1, bg2 та поверхнями
• Вони можуть змінювати кольори кнопок і посилань між accent та ink
• Вони не можуть вводити довільний п'ятий колір, який порушить палітру

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