Теплі та холодні кольори: як використовувати колірну температуру в дизайні

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

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

Який бік кола теплий, а який холодний

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

Розділова лінія — не глуха стіна. Найцікавіше — у перехідних зонах. Жовто-зелений (близько 90 градусів відтінку) — це розмита межа з теплого боку до холодного, а червоно-фіолетовий/пурпурний (близько 300 градусів) — межа з іншого боку. Чистий зелений може читатися як теплий або холодний залежно від того, схиляється він до жовтого чи синього. Тож коли люди питають, що таке теплі кольори, ніби існує фіксований список, чесна відповідь така: теплота — це позиція на колі, а не набір названих зразків, і краї цієї позиції завжди можна оскаржити.

Якщо ви хочете побачити це, а не запам'ятати, відкрийте коло в генераторі колірної палітри, візьміть будь-який відтінок і проведіть його по колу, спостерігаючи за значенням відтінку HSL. Усе приблизно від 0 до 60 градусів і від 330 до 360 читається як тепле; довга смуга приблизно від 90 до 270 читається як холодна. Канал H у HSL — це, буквально, регулятор температури. (Якщо ви не зовсім упевнені, що означає це число H, пояснення hex, RGB і HSL це розкриває.)

Чому тепле виступає, а холодне відступає

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

Частково це психологічна асоціація — теплі речі в природі (вогонь, сонце) є джерелами енергії й схильні вимагати уваги. Але частково це по-справжньому оптика. Тепле світло з довшою довжиною хвилі та холодне світло з коротшою фокусуються не точно на однаковій глибині в оці — явище, пов'язане з хроматичною аберацією, — що підштовхує мозок зчитувати тепле як ближче. Вам не потрібна фізика, щоб цим користуватися. Вам лише потрібно довіряти, що це надійно.

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

Температура живе й усередині одного відтінку

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

Червоний — очевидний випадок. Червоний, що схиляється до помаранчевого, скажімо #E63946, — це теплий червоний. Червоний, що схиляється до пурпурного чи фіолетового, скажімо #C2185B, — це холодний червоний. Обидва безпомилково червоні. Вони просто вказують у різних напрямках на колі й відчуваються цілком по-різному. Теплий — це апетит і терміновість; холодний — самоцвітний і трохи офіційний.

Це працює для кожного відтінку:

• Сині: #00B4D8 (синій із нахилом до блакитного) — відносно теплий синій: яскравий, дружній, майже тропічний. #1D3557 (темно-синій із легким нахилом до фіолетового) — холодний, серйозний синій.
• Зелені: #A7C957 (жовто-зелений) теплий і енергійний. #2A9D8F (бірюзовий, із нахилом до синього) холодний і спокійний.
• Сірі — найважливіший випадок. Нейтральні ніколи не бувають по-справжньому нейтральними. Теплий сірий, як-от #8D8478, має ледь помітний коричневий підтон; холодний сірий, як-от #7A8088, має ледь помітний синій підтон. Змішування цих двох в одному інтерфейсі — найпоширеніша температурна помилка, яку я бачу, і саме тому деякі загалом чисті дизайни здаються ледь помітно «не такими», хоча ніхто не може сказати чому.

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

Як використовувати температуру для побудови ієрархії, настрою та глибини

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

Ієрархія. Те, що ви хочете помітити першим, зазвичай має бути найтеплішим на екрані. Саме тому так багато основних кнопок теплі — помаранчеві, червоні, теплі бурштинові — навіть у продуктів, чий колір бренду холодний. Тепла CTA буквально виступає вперед із холодного поля. Утім, якщо весь ваш інтерфейс теплий, це перестає працювати, бо ніщо не може виступити поперед усього іншого. Теплота як сигнал уваги функціонує лише тоді, коли вона відносна й рідкісна.

Настрій. Температура — це найшвидший регулятор настрою, який у вас є. Велнес-застосунок, банківський дашборд, продукт для медитації — холодні палітри (#457B9D, #2A9D8F, м'які сині й бірюзові) сигналізують про спокій, довіру, компетентність, стриманість. Застосунок для доставки їжі, дитячий бренд, фітнес-продукт, банер термінового розпродажу — теплі палітри (#FF6B35, #F4A261, #E63946) сигналізують про енергію, апетит, терміновість, дружелюбність. Жодна не краща. Вони націлені на різні відчуття. Це тісно перегукується з психологією кольору в брендингу, де температура часто виконує більше емоційної роботи, ніж конкретний відтінок.

Глибина. У макеті на основі карток спробуйте зробити тло сторінки трохи холоднішим за картки, а картки — трохи холоднішими за активну/наведену картку. Ви нашаровуєте температуру: холодне ззаду, тепліше спереду. Око зчитує тепліші поверхні як ближчі, і ви отримуєте відчуття шарування, що здається фізичним навіть за мінімальної тіні. Це особливо приємна техніка для палітр темної теми, де важкі тіні читаються погано і потрібні інші підказки, щоб відділити підняті поверхні від тла.

Як збалансувати тепле й холодне в одній палітрі

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

Метод домінантної температури. Оберіть одну температуру за основу й дозвольте іншій з'являтися лише як акцент. Переважно холодний інтерфейс — холодні сірі, холодний синій бренд, холодні поверхні — з єдиним теплим акцентом для основної дії — це, мабуть, найнадійніше, найпрофесійніше поєднання в усьому UI-дизайні. Воно спокійне там, де має бути спокійним, і гаряче саме там, де ви хочете кліку. Це температурна версія правила 60-30-10: приблизно 70–90 відсотків однієї температури, решта — іншої. Опирайтеся спокусі піти на 50/50. Збалансований поділ теплого й холодного читається як нерішучість, а не як баланс.

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

Одне застереження, що не має жодного стосунку до температури і повністю стосується випуску реальних продуктів: тепло-холодна пара може виглядати розкішно й усе одно провалити перевірку на доступність. Температурний контраст — це не контраст за яскравістю. Теплий жовтий і холодний світло-блакитний можуть кардинально відрізнятися за відтінком і температурою, перебуваючи майже на однаковій світлості — а це означає, що текст одного на тлі іншого може бути нечитабельним. Завжди прораховуйте реальні числа; вбудована WCAG-перевірка контрасту існує саме для цього, а настанови W3C щодо контрасту — авторитет щодо порогів (4.5:1 для основного тексту). Гарне й читабельне — це окремі задачі; розв'язуйте обидві.

Повторюваний спосіб працювати з температурою

Ось метод, який я б передав молодшому дизайнерові, стисло:

• Спершу визначте відчуття. Цей продукт має відчуватися спокійним і надійним чи енергійним і терміновим? Ця відповідь обирає вашу домінантну температуру ще до того, як ви торкнетеся бодай одного зразка.
• Будуйте основу в цій температурі. Поверхні, нейтральні та колір бренду — усі однієї температури. Особливо перевіряйте свої сірі — обирайте або теплі сірі, або холодні й ніколи не змішуйте дві родини.
• Додавайте протилежну температуру лише як акцент. Найгарячіше або найхолодніше на екрані має бути тим, що ви найбільше хочете помітити, і його має бути дуже мало.
• Використовуйте температуру для глибини, а не лише для декору. Холодніші поверхні занурюються, тепліші підіймаються. Нашаровуйте їх свідомо в багатошарових макетах.
• Перевіряйте контраст окремо. Температурний контраст відчувається як контраст, але ним не є. Вимірюйте яскравість окремо, щоразу.

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