Колір здається об’єктивною властивістю предмета, але мозок сприймає його лише в контексті. Той самий відтінок може виглядати теплішим, холоднішим, світлішим або насиченішим залежно від оточення. Для дизайнера це інструмент, а для користувача — причина, чому зображення на сайті, упаковці та в реальності інколи відрізняються.
Чому фон змінює відтінок предмета
Наш зір постійно порівнює сусідні ділянки. Сірий квадрат на білому фоні здається темнішим, ніж такий самий квадрат на чорному. Червоний поруч із зеленим виглядає інтенсивніше, а спокійний бежевий біля холодного синього набуває теплого відтінку. Це називають одночасним контрастом.
У вебдизайні ефект помітний на кнопках, картках товарів і фотографіях. Якщо змінити фон блоку, колір бренду може сприйматися інакше, хоча його код залишився тим самим. Тому палітру перевіряють не в ізольованому зразку, а на реальних екранах із текстом, фото й сусідніми елементами.
Як освітлення впливає на сприйняття
Предмети відбивають світло, а його спектр залежить від джерела. Тепла лампа робить білу поверхню жовтуватою, холодне офісне освітлення додає синього, а сонячне світло змінюється протягом дня. Мозок намагається компенсувати ці зміни, але камера й дисплей можуть показати їх значно сильніше.
Саме тому колір товару на фото варто перевіряти на кількох пристроях. Важливі знімки роблять за нейтрального освітлення, а біля фотографії додають зрозумілий опис матеріалу й відтінку. Для інтерфейсів також перевіряють темну тему, режим зниженої яскравості та контрастність тексту.
Де знайти більше цікавого про дизайн
Колірні ілюзії показують, що хороший дизайн — це не просто вибір красивих кодів. Він враховує фон, освітлення, розмір елемента, особливості дисплея й навіть очікування людини. Наприклад, червоний індикатор читається як попередження швидше, ніж нейтральний, а приглушена палітра може створювати відчуття преміальності.
Більше несподіваних прикладів про візуальне сприйняття, технології та повсякденні явища можна знайти на сайті Цікаво. Спостереження за такими ефектами допомагає краще оцінювати макети й розуміти, чому одна палітра працює в презентації, але втрачає виразність у реальному інтерфейсі.
Практична порада проста: тестуйте колір у контексті. Перевіряйте макет на різних екранах, у світлій і темній темі, поруч із фотографіями та в умовах різної яскравості. Так рішення залишатиметься переконливим не лише в графічному редакторі.