WebEngine

0%
WebEngine
Брендинг

Психологія кольору в брендингу: без міфів і езотерики

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

Pavlo7 хв читання

Пошук за словами «психологія кольору» видає інфографіку, де синій означає довіру, зелений — здоров’я, а червоний — терміновість. За цією логікою Coca-Cola продає терміновість, а YouTube — небезпеку. Асоціації з кольором справді існують, але вони слабкі, залежать від культури й майже завжди програють контексту, у якому людина бачить колір. Нижче — що з цієї теми має практичну цінність, як розподілити ролі в палітрі та які цифри тут взагалі не залежать від смаку.

4.5:1

мінімальний контраст для основного тексту

3:1

для великого тексту та елементів інтерфейсу

1

акцентний колір — більше не потрібно

~8%

чоловіків не розрізняють червоне й зелене

Що з «психології кольору» витримує перевірку

Асоціації між кольором і емоцією вимірюються, але ефект малий і нестабільний: він змінюється між культурами, між віковими групами й навіть залежно від того, про який об’єкт запитують. Колір автомобіля, ліків і банківського застосунку читається по-різному, хоча відтінок той самий. Практичну користь дають лише три речі.

  • Впізнаваність. Послідовно використаний колір справді допомагає впізнавати бренд у стрічці до прочитання назви. Це працює через повторення, а не через «значення» відтінку — тому важливіше не змінювати колір, ніж вгадати правильний.
  • Відповідність категорії. Колір, який суперечить очікуванням у ніші, доводиться компенсувати рештою комунікації. Це не заборона: свідомий вихід за межі категорії — робочий інструмент диференціації, але його треба обирати навмисно.
  • Відмінність від сусідів. Якщо всі конкуренти сині, ще один синій робить вас невидимим у списку результатів пошуку. Це найпрактичніший критерій вибору з усіх.

Контекст сильніший за відтінок

Той самий червоний означає «розпродаж» на банері, «помилка» у формі, «преміум» на етикетці вина й «зупинись» на дорозі. Змінюється не колір, а рамка, у якій людина його зчитує: форма, типографіка, оточення, попередній досвід із категорією. Тому вибір палітри «за значенням» без урахування носія — це вибір навмання.

Практичний висновок простий. Замість питання «яку емоцію викликає цей колір» ставте два інших: чи відрізняє він нас від конкурентів у місцях, де нас бачать поруч із ними, і чи витримує він усі технічні умови — темну тему, друк, малі розміри, накладання на фото.

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

Палітра — це ролі, а не настрій

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

РольСкільки кольорівДе використовується
Основний, брендовий1Логотип, шапка, великі площини айдентики
Акцентний, дія1Кнопки, посилання, фокус — і більше ніде
Нейтральні3–5Текст, фони, межі, неактивні стани
Семантичні3Успіх, помилка, попередження — окремо від брендових
Розширення для темної теми4–8Ті самі ролі, перераховані під темний фон
Палітра з семи «фірмових» кольорів на практиці означає, що фірмового кольору немає.

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

Контраст: єдина частина, де немає місця смаку

Усе попереднє можна обговорювати. Контраст — ні: це число, яке рахується формулою, і воно або проходить поріг, або ні. WCAG задає мінімуми, на які орієнтуються і браузери, і аудити доступності.

Перевірка палітри перед затвердженням

  • Основний текст — контраст від 4.5:1 до свого фону
  • Великий текст від 24px (або 19px жирний) — від 3:1
  • Іконки, межі полів і стани фокуса — від 3:1
  • Сенс не передається лише кольором: поруч є підпис або іконка
  • Акцентний колір перевірений окремо на світлому й на темному фоні
  • Палітра переглянута через симулятор дейтеранопії

Помилки, які коштують переробки

  1. 1Обирати палітру за мудбордом, а не за читабельністю в продукті. Бежевий текст на кремовому фоні виглядає вишукано в макеті й провалюється на телефоні під сонцем.
  2. 2Копіювати колір лідера категорії. Схожість зчитується як вторинність, а на сторінці результатів пошуку ви просто зливаєтеся з ним в одну пляму.
  3. 3Робити акцент того ж кольору, що й основний. Кнопка перестає бути кнопкою, і сторінка втрачає точку входу в дію.
  4. 4Не закладати темну тему одразу. Колір, ідеальний на білому, часто розсипається на темному фоні, і сайт доводиться латати винятками у стилях.
  5. 5Задавати кольори лише у HEX без CMYK. Друкарня отримає приблизний відповідник, і фірмовий відтінок на візитці не збігатиметься з екраном.

Палітра — не окремий артефакт: вона живе разом зі знаком і шрифтами й описується в правилах бренду. Як зібрати повний комплект, розібрано в матеріалі про фірмовий стиль, а перевірку кольорів у знаку — на етапах розробки логотипу. Технічну сторону контрасту й вимоги до інтерфейсу детально розкрито в гіді з доступності сайту.

Часті питання про колір у брендингу

Чи правда, що синій колір викликає довіру?

Частково — асоціація існує, але ефект малий і сильно залежить від категорії та культури. Синій став домінантним у фінансах і технологіях радше через галузеву традицію, ніж через властивість самого відтінку. Практичніше обирати колір за тим, наскільки він відрізняє вас від конкурентів і чи витримує вимоги до контрасту.

Скільки кольорів має бути у палітрі бренду?

Один основний, один акцентний і три-п’ять нейтральних — цього вистачає більшості компаній. Окремо додаються три семантичні кольори для станів успіху, помилки й попередження, бо їх не можна брати з брендової палітри. Якщо «фірмових» кольорів сім, жоден із них не встигає стати впізнаваним.

Чи впливає колір кнопки на конверсію?

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

Як обрати колір, якщо у всіх конкурентів схожі палітри?

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

Що робити, якщо фірмовий колір не проходить за контрастом?

Додайте до палітри темнішу версію того самого відтінку й використовуйте її для тексту, кнопок і меж полів. Оригінальний колір залишається на великих площинах — обкладинках, банерах, шапці — де вимога 4.5:1 не застосовується. Так ви зберігаєте впізнаваність і не порушуєте вимоги доступності.

Коротко

  • Асоціації з кольором існують, але слабкі й контекстні. Послідовність важливіша за вибір «правильного» відтінку.
  • Будуйте палітру від ролей: основний, акцентний, нейтральні, семантичні плюс розширення для темної теми.
  • Контраст не обговорюється: 4.5:1 для основного тексту, 3:1 для великого тексту та елементів інтерфейсу.
  • Найкорисніший критерій вибору кольору — наскільки він відрізняє вас від конкурентів там, де вас бачать поруч.
Поділитися
  • колір
  • брендинг
  • дизайн

Схожі матеріали

Усі статті