Kolory ciepłe vs zimne: temperatura barwowa w projektowaniu

Kilka lat temu spędziłem dwa dni, próbując zrozumieć, dlaczego zaprojektowany przeze mnie dashboard sprawiał wrażenie „taniego”, mimo że każdy kolor z osobna miał poprawny kontrast i wpisywał się w całkowicie prawidłowy schemat analogiczny. Rozwiązanie, gdy w końcu zaskoczyło, w ogóle nie polegało na nowym kolorze. Tło było zimno-niebieskoszare, a główny przycisk nieco bardziej zimnym niebieskim, więc przycisk leżał płasko na stronie, zamiast się od niej odrywać. Ociepliłem przycisk o kilka stopni odcienia i nagle zaczął wyglądać na klikalny. Nic innego się nie zmieniło. Tak właśnie działa temperatura barwowa: jest niewidoczna, dopóki nie wiesz, czego szukać, a potem widzisz ją wszędzie.

Kolory ciepłe vs zimne to nie temat dla początkujących, z którego się wyrasta. To jedna z nielicznych dźwigni w pracy z kolorem, która wpływa na percepcję przestrzeni — co wydaje się bliskie, co odległe, co sprawia wrażenie, że zbliża się ku tobie. Harmonia odcieni mówi, które kolory do siebie pasują. Temperatura mówi, jak będą się zachowywać, gdy już znajdą się na ekranie.

Która strona koła jest ciepła, a która zimna

Podziel koło barw na pół. Po jednej stronie masz czerwień, pomarańcz i żółć — kolory ciepłe, kolory ognia, słońca i krwi. Po drugiej leżą zieleń, błękit i fiolet — kolory zimne, kolory wody, lodu, nieba i cienia. To skojarzenie jest starsze niż teoria projektowania; tak ludzie odczytują swoje otoczenie od bardzo dawna i dlatego te reakcje wydają się automatyczne, a nie wyuczone.

Linia podziału nie jest twardym murem. Najciekawiej robi się w strefach przejściowych. Żółto-zielony (około 90 stopni odcienia) to rozmyta granica po stronie ciepło-zimnej, a czerwono-fioletowy/magenta (około 300 stopni) to granica po drugiej stronie. Czysta zieleń może czytać się jako ciepła lub zimna w zależności od tego, czy skłania się ku żółci, czy ku błękitowi. Kiedy więc ktoś pyta czym są kolory ciepłe, jakby istniała stała lista, uczciwa odpowiedź brzmi: ciepło to położenie na kole, a nie zbiór nazwanych próbek, a krawędzie są negocjowalne.

Jeśli chcesz to zobaczyć, a nie zapamiętać, otwórz koło w generatorze palety kolorów, chwyć dowolny odcień i przeprowadź go dookoła okręgu, obserwując wartość odcienia HSL. Wszystko mniej więcej od 0 do 60 stopni oraz od 330 do 360 czyta się jako ciepłe; długi odcinek od około 90 do 270 czyta się jako zimne. Kanał H w HSL jest dosłownie pokrętłem temperatury. (Jeśli nie jesteś pewien, co oznacza ta liczba H, wyjaśnienie hex, RGB i HSL to wszystko omawia.)

Dlaczego ciepłe wysuwają się, a zimne cofają

Oto najużyteczniejszy fakt o temperaturze i ten, na którym opieram się nieustannie: kolory ciepłe wydają się wysuwać ku obserwatorowi, a kolory zimne cofać. Umieść ciepły czerwony kwadrat i zimny niebieski kwadrat w dokładnie tym samym rozmiarze i położeniu na neutralnym tle, a czerwony będzie wyglądał na nieco bliższy i nieco większy. Niebieski się cofa.

Częściowo to skojarzenie psychologiczne — ciepłe rzeczy w przyrodzie (ogień, słońce) są źródłami energii i mają tendencję do przyciągania uwagi. Ale po części to zjawisko naprawdę optyczne. Ciepłe światło o dłuższej fali i zimne o krótszej nie ogniskują się na dokładnie tej samej głębokości w oku, co wiąże się z aberracją chromatyczną i skłania mózg do odczytywania ciepłego jako bliższego. Nie potrzebujesz fizyki, żeby tego użyć. Wystarczy, że zaufasz, iż jest to niezawodne.

Malarze pejzażyści wykorzystują to od stuleci: ciepłe tony na pierwszym planie, stopniowo coraz chłodniejsze i bardziej szare ku horyzontowi, i otrzymujesz głębię na płaskim płótnie bez ani jednej linii perspektywy. Ta sama sztuczka działa na ekranie. Chcesz, żeby element sprawiał wrażenie, jakby unosił się nad stroną? Ociepl go względem otoczenia. Chcesz, żeby panel cofnął się i przestał rywalizować? Schłódź go. To głębia, którą tworzysz bez cieni i wyniesienia — co ma znaczenie w płaskich i minimalistycznych interfejsach, gdzie cienie wyglądałyby nie na miejscu.

Temperatura mieszka także wewnątrz jednego odcienia

To część, którą większość ludzi pomija, i to tu temperatura przestaje być ciekawostką, a staje się prawdziwym narzędziem. Temperatura to nie tylko ciepła strona kontra zimna strona koła. Każdy odcień ma swoją ciepłą i zimną wersję.

Czerwień to oczywisty przypadek. Czerwień skłaniająca się ku pomarańczy — powiedzmy #E63946 — to czerwień ciepła. Czerwień skłaniająca się ku magencie lub fioletowi — powiedzmy #C2185B — to czerwień zimna. Obie są niewątpliwie czerwone. Po prostu wskazują w różnych kierunkach na kole i czują się zupełnie inaczej. Ciepła to apetyt i pilność; zimna jest szlachetna jak klejnot i odrobinę formalna.

Działa to dla każdego odcienia:

• Błękity: #00B4D8 (błękit skłaniający się ku cyjanowi) to stosunkowo ciepły błękit — jasny, przyjazny, niemal tropikalny. #1D3557 (granat lekko skłaniający się ku fioletowi) to zimny, poważny błękit.
• Zielenie: #A7C957 (żółto-zielony) jest ciepły i energetyczny. #2A9D8F (turkus, skłaniający się ku błękitowi) jest zimny i spokojny.
• Szarości — najważniejszy przypadek. Neutralne nigdy nie są naprawdę neutralne. Ciepła szarość jak #8D8478 ma delikatny brązowy podton; zimna szarość jak #7A8088 ma delikatny niebieski podton. Mieszanie obu w jednym interfejsie to najczęstszy błąd temperaturowy, jaki widzę, i to dlatego niektóre skądinąd czyste projekty wydają się subtelnie „nie tak”, choć nikt nie potrafi powiedzieć dlaczego.

Praktyczny wniosek: wybierając kolor, podejmujesz dwie decyzje, nie jedną. Wybierasz odcień oraz wybierasz jego temperaturę. Monochromatyczna skala, która dryfuje w temperaturze, gdy ciemnieje, będzie wyglądać mętnie. Utrzymaj spójną temperaturę w dół skali jednego odcienia, a pozostanie czysta. (Tinty, cienie i tony to tu idea towarzysząca — temperatura jest tym, co utrzymuje skalę tonalną spójną.)

Wykorzystanie temperatury do budowania hierarchii, nastroju i głębi

Gdy już zaakceptujesz, że ciepłe wysuwają się, a zimne cofają, możesz przypisać temperaturze zadania, tak samo jak przypisujesz role w palecie.

Hierarchia. To, co ma zostać zauważone najpierw, powinno zwykle być najcieplejszą rzeczą na ekranie. Dlatego tak wiele głównych przycisków jest ciepłych — pomarańcz, czerwień, ciepły bursztyn — nawet w produktach, których kolor marki jest zimny. Ciepłe CTA dosłownie wykracza naprzód z zimnego pola. Jeśli jednak cały interfejs jest ciepły, to przestaje działać, bo nic nie może wysunąć się przed wszystko inne. Ciepło jako sygnał uwagi działa tylko wtedy, gdy jest względne i rzadkie.

Nastrój. Temperatura to najszybsza regulacja nastroju, jaką masz. Aplikacja wellness, dashboard bankowy, produkt do medytacji — zimne palety (#457B9D, #2A9D8F, miękkie błękity i turkusy) sygnalizują spokój, zaufanie, kompetencję, powściągliwość. Aplikacja do zamawiania jedzenia, marka dla dzieci, produkt fitness, baner wyprzedaży błyskawicznej — ciepłe palety (#FF6B35, #F4A261, #E63946) sygnalizują energię, apetyt, pilność, przyjazność. Żadna nie jest lepsza. Celują w różne uczucia. Łączy się to ściśle z psychologią koloru w brandingu, gdzie temperatura często wykonuje więcej pracy emocjonalnej niż sam odcień.

Głębia. W układzie opartym na kartach spróbuj uczynić tło strony nieco chłodniejszym od kart, a karty nieco chłodniejszymi od aktywnej/najechanej karty. Układasz temperaturę warstwami: zimne z tyłu, cieplejsze z przodu. Oko odczytuje cieplejsze powierzchnie jako bliższe i uzyskujesz poczucie warstwowości, które wydaje się fizyczne nawet przy minimalnym cieniu. To szczególnie ładna technika dla palet trybu ciemnego, gdzie ciężkie cienie nie czytają się dobrze i potrzebujesz innych wskazówek, by oddzielić wyniesione powierzchnie od tła.

Jak zrównoważyć ciepło i chłód w jednej palecie

Paleta wyłącznie ciepła sprawia wrażenie agresywnej i z czasem męczącej — oko nie ma odpoczynku. Paleta wyłącznie zimna może wydawać się sterylna, odległa, wręcz nieprzyjazna. Te dobre niemal zawsze niosą obie temperatury, ale w przemyślanej proporcji. Dwie metody, których faktycznie używam:

Metoda temperatury dominującej. Wybierz jedną temperaturę jako fundament i pozwól drugiej pojawiać się wyłącznie jako akcent. Przeważnie zimny interfejs — zimne szarości, zimny niebieski kolor marki, zimne powierzchnie — z jednym ciepłym akcentem dla głównej akcji to prawdopodobnie najbardziej niezawodna, profesjonalnie wyglądająca kombinacja w całym projektowaniu UI. Jest spokojna tam, gdzie powinna być spokojna, i gorąca dokładnie tam, gdzie chcesz kliknięcia. To temperaturowa wersja reguły 60-30-10: mniej więcej 70 do 90 procent jednej temperatury, reszta druga. Oprzyj się pokusie pójścia w 50/50. Zrównoważony podział ciepła i chłodu czyta się jako niezdecydowanie, a nie równowaga.

Skrót przez schemat rozszczepiony dopełniający. Ponieważ ciepłe i zimne leżą po przeciwnych stronach koła, każda relacja dopełniająca lub rozszczepiona dopełniająca automatycznie daje parę ciepło-zimną. Zimny niebieski jako baza z ciepłym pomarańczowym dopełnieniem to ten kanoniczny przykład — to jednocześnie kontrast temperaturowy i kontrast odcienia, i właśnie dlatego jest tak mocny. Jeśli chcesz tej mocy z odrobinę mniejszym napięciem, palety rozszczepione dopełniające podadzą ci dwa ciepłe akcenty flankujące dopełnienie zamiast jednego. Koło wykonuje za ciebie matematykę temperatury.

Jedna przestroga, która nie ma nic wspólnego z temperaturą, a wszystko z wypuszczaniem realnych produktów: para ciepło-zimna może wyglądać przepięknie i wciąż oblać test dostępności. Kontrast temperaturowy to nie kontrast luminancji. Ciepła żółć i zimny jasny błękit mogą drastycznie różnić się odcieniem i temperaturą, leżąc przy tym na niemal identycznej jasności — co oznacza, że tekst jednym na tle drugiego może być nieczytelny. Zawsze przeliczaj faktyczne liczby; wbudowany sprawdzacz kontrastu WCAG istnieje dokładnie po to, a wytyczne W3C dotyczące kontrastu są źródłem progów (4.5:1 dla tekstu podstawowego). Ładne i czytelne to odrębne problemy; rozwiąż oba.

Powtarzalny sposób pracy z temperaturą

Oto metoda, którą przekazałbym młodszemu projektantowi, w skrócie:

• Najpierw zdecyduj o uczuciu. Czy ten produkt ma sprawiać wrażenie spokojnego i godnego zaufania, czy energetycznego i pilnego? Ta odpowiedź wybiera twoją dominującą temperaturę, zanim dotkniesz choćby jednej próbki.
• Zbuduj fundament w tej temperaturze. Powierzchnie, neutralne i kolor marki — wszystkie dzielą jedną temperaturę. Szczególnie sprawdź szarości — wybierz ciepłe szarości albo zimne szarości i nigdy nie mieszaj obu rodzin.
• Dodaj przeciwną temperaturę tylko jako akcent. Najgorętsza lub najchłodniejsza rzecz na ekranie powinna być tym, co najbardziej chcesz, by zostało zauważone, i powinno jej być bardzo mało.
• Używaj temperatury do głębi, nie tylko do dekoracji. Chłodniejsze powierzchnie opadają, cieplejsze unoszą się. Układaj je warstwami z rozmysłem w wielowarstwowych layoutach.
• Weryfikuj kontrast niezależnie. Kontrast temperaturowy sprawia wrażenie kontrastu, ale nim nie jest. Mierz luminancję osobno, za każdym razem.

Temperatura barwowa to jedna z tych umiejętności, które gdy raz wejdą ci w oko, już ich nie wyłączysz — zaczniesz dostrzegać ciepłe CTA w każdej zimnej aplikacji i odrobinę zbyt ciepłą szarość, która sprawia, że czyjaś strona wygląda na przybrudzoną. To dostrzeganie jest całym sednem. Odcień daje ci paletę, która jest powiązana; temperatura daje ci paletę, która się zachowuje, która ma przód i tył, energię i spokój. Ustaw temperaturę prawidłowo, a zaskakująco wiele problemów typu „nie wiem, po prostu coś wygląda nie tak” rozwiąże się po cichu samo.