Tinty, cienie i tony — wyjaśnienie

Pierwsza prawdziwa paleta, jaką kiedykolwiek wypuściłem, miała dokładnie pięć kolorów, a cztery z nich były tym samym niebieskim. Nie zaplanowałem tego tak — po prostu wciąż potrzebowałem „odrobinę jaśniejszej wersji tego na tło karty”, „ciemniejszej na obramowanie” i „czegoś przygaszonego na zablokowany przycisk”. To, co naprawdę robiłem, nie mając na to słownictwa, to tworzenie tintów, cieni i tonów. Gdy nauczyłem się, że te trzy słowa opisują trzy precyzyjne operacje, praca z paletą przestała być metodą prób i błędów, a stała się czymś bliższym arytmetyce.

Ten przewodnik jest o tej arytmetyce. Czym naprawdę są tinty, cienie i tony, dlaczego walor i nasycenie to dwa różne pokrętła, a nie jedno, oraz jak zamienić pojedynczy odcień w czystą skalę tonalną, na której faktycznie da się zbudować interfejs. Wszystko tutaj odwzorowuje się wprost na kontrolki HSL w generatorze palety kolorów, więc możesz podążać z prawdziwymi liczbami zamiast z przeczuciami.

Najpierw jednozdaniowe definicje, potem niuanse

Oto definicje, w okrojonej formie:

• Tint to odcień plus biel. Staje się jaśniejszy i delikatniejszy. Czerwień staje się różem.
• Cień to odcień plus czerń. Staje się ciemniejszy i głębszy. Czerwień staje się bordem.
• Ton to odcień plus szarość. Staje się przygaszony i bardziej przykurzony, niekoniecznie robiąc się dużo jaśniejszy czy ciemniejszy. Czerwień staje się ceglastą barwą lub różą.

To różnica między tintem, cieniem a tonem w jednym oddechu, i większość artykułów na tym poprzestaje. Ale najciekawsze jest to, co łączy wszystkie trzy: każde z nich redukuje chromę — czystą barwność odcienia. W pełni nasycony odcień jest najbardziej intensywny, jaki kiedykolwiek będzie. W chwili, gdy domieszasz dowolny element neutralny (biel, czerń lub szarość), wyciągasz z niego intensywność. Jest to dobrze udokumentowane w standardowym źródle o tincie, cieniu i tonie: dodanie bieli, czerni czy szarości obniża chromę koloru, choć przesuwają one jasność w różnych kierunkach.

Tak więc modelem myślowym nie jest „tint = jaśniejszy, cień = ciemniejszy, ton = przygaszony” jako trzy niezwiązane efekty. To jeden efekt — rozcieńczanie czystego odcienia neutralnym — oglądany z trzech kierunków. To przeformułowanie sprawia, że następna idea zaskakuje.

Walor i nasycenie to dwa różne pokrętła

Najużyteczniejsza rzecz, jaką możesz przyswoić, to że jasność i nasycenie są niezależne. Początkujący traktują „rozjaśnij to” i „zmniejsz intensywność” jako ten sam gest i dlatego ich palety robią się kredowe i płaskie. To nie ten sam gest. To dwa odrębne pokrętła, a tinty, cienie i tony to po prostu różne kombinacje tego, jak nimi obracasz.

Właśnie dlatego HSL to model koloru wart nauki. HSL to skrót od hue, saturation, lightness (odcień, nasycenie, jasność) i rozkłada kolor na trzy liczby, które możesz regulować pojedynczo:

• Hue to kąt na kole barw, 0–360°. Czerwień jest około 0, zieleń przy 120, niebieski przy 240. Tinty, cienie i tony zasadniczo zostawiają odcień w spokoju — nie zmieniasz tego, jaki to kolor, tylko jak czysty i jak jasny jest.
• Saturation to 0–100%. Przy 100% kolor ma pełną intensywność; przy 0% to czysta szarość bez śladu odcienia. To twoje pokrętło chromy.
• Lightness to 0–100%. Przy 0% dostajesz czerń bez względu na odcień, przy 100% dostajesz biel bez względu na odcień, a 50% to mniej więcej miejsce, gdzie żyje czysta, żywa wersja koloru.

Z tym słownictwem te trzy operacje stają się precyzyjne. Tint to głównie podnoszenie jasności ku 100%. Cień to głównie obniżanie jasności ku 0%. Ton to głównie obniżanie nasycenia ku 0% przy utrzymaniu jasności mniej więcej tam, gdzie jest. Dokumentacja MDN o notacji HSL to dobre miejsce, by potwierdzić składnię, jeśli chcesz zapisać to jako CSS.

Jeden precyzyjny przypis, bo myli ludzi. „L” w HSL to jasność (lightness), a nie „walor” czy „jaskrawość”. Istnieje siostrzany model, HSB/HSV, gdzie trzeci kanał to walor (value), i zachowuje się on inaczej — w HSB 100% waloru przy pełnym nasyceniu daje żywy czysty kolor, podczas gdy w HSL 100% jasności zawsze daje biel. Jeśli kiedykolwiek wyciągnąłeś kolor z Photoshopa (który używa HSB) i wyglądał nie tak w CSS (który używa HSL), to ta rozbieżność jest przyczyną. Do budowania skal tonalnych HSL jest przyjaźniejszym modelem właśnie dlatego, że jasność biegnie czysto od czerni do bieli.

Jak rozjaśnić lub przyciemnić kolor, nie psując go

Teraz część praktyczna, bo jest dobry i zły sposób, by to zrobić.

Naiwny sposób na rozjaśnienie koloru to przeciągnąć jasność w górę i uznać sprawę za zamkniętą. Problem w tym, że gdy kolor zbliża się do bieli, utrzymywanie stałego nasycenia sprawia, że wygląda na cienki i wyprany — bladą, anemiczną wersję samego siebie. Lekarstwo, po które doświadczeni projektanci sięgają niemal odruchowo: podnosząc jasność, jednocześnie odrobinę podbij nasycenie, a czasem przesuń odcień o kilka stopni. Jasne tinty często wyglądają bogaciej z nieco większym nasyceniem niż ton średni, a nie z mniejszym.

Przyciemnianie ma lustrzaną pułapkę. Obniż jasność ku 0, zostawiając nasycenie w spokoju, a ciemne kolory zrobią się mętne i martwe — płaska, bez życia niemal-czerń. Dobre ciemne cienie zwykle chcą zwiększonego nasycenia w miarę ciemnienia i często niewielkiego przesunięcia odcienia ku niebieskiemu lub czerwonemu, by sprawiały wrażenie zamierzonych, a nie jakby ktoś po prostu zgasił światło. To największa pojedyncza przyczyna, dla której skale budowane ręcznie wyglądają żywiej niż te generowane przez naiwną interpolację do czerni.

Uczciwa odpowiedź na pytanie jak rozjaśnić lub przyciemnić kolor brzmi więc: przesuwaj jasność jako działanie główne, ale nie zamrażaj pozostałych dwóch kanałów. Odczyt HSL w narzędziu sprawia, że łatwo to wyczuć — zmień jedną liczbę, obserwuj próbkę, a szybko nauczysz się, ile nasycenia potrzebuje dany odcień na każdym krańcu skali.

Budowanie czystej skali monochromatycznej z jednego odcienia

Tu wszystko staje się użyteczne. Monochromatyczna skala kolorów to pojedynczy odcień rozwinięty w pełną drabinę tintów, cieni i tonów — i jest szkieletem właściwie każdego realnego interfejsu. Gdy w generatorze palety kolorów wybierzesz regułę monochromatyczną, to właśnie tę strukturę generuje: jeden odcień, wiele kroków jasności.

Pozwól, że zbuduję jedną ręcznie, byś zobaczył logikę. Zacznij od bazowego niebieskiego przy odcieniu 217, w miarę pełnym nasyceniu, średniej jasności — nazwijmy go #2563EB. Teraz wygeneruj rampę, przeprowadzając jasność od bardzo jasnej do bardzo ciemnej, utrzymując odcień przy 217 i podnosząc nasycenie na obu krańcach:

• #EFF4FE — najjaśniejszy tint. Ledwie wyczuwalna niebieskawa biel. Tło strony lub sekcji.
• #DBE6FD — miękki tint do subtelnych wypełnień i naprzemiennego paskowania.
• #B9CDFB — jasny tint do obramowań i separatorów.
• #7DA2F6 — krok średnio-jasny, dobry do poświat najechania i drugorzędnych wypełnień.
• #2563EB — baza. Twój główny kolor marki, ten, z którego zrobione są przyciski.
• #1D4FC4 — jeden krok w dół. Naturalny stan najechania dla tego głównego przycisku.
• #163C96 — głębszy cień na stany aktywne/wciśnięte i mocne obramowania.
• #0F2A6B — ciemny cień na nagłówki na jasnych tłach lub powierzchnie w trybie ciemnym.
• #0A1C45 — najciemniejszy cień. Niemal-czerń, wciąż bezsprzecznie niebieska.

Zauważ, co ta drabina ci daje. Każdy stan interaktywny, którego potrzebuje przycisk — spoczynek, najechanie, aktywny — wypada z tego samego odcienia, trzy kroki jasności od siebie. Nie wymyślasz nowych kolorów; schodzisz w dół skali. Dlatego właśnie kodowane są jako numerowane tokeny (blue-50 do blue-900) w systemach projektowych. Jeśli chcesz głębiej wejść w zamianę takiej rampy w wielokrotnego użytku zmienne, tworzenie skalowalnych tokenów kolorów podejmuje dokładnie tam, gdzie to się kończy.

Kilka wypracowanych w bólach zasad dla samej skali:

• Rozsuwaj kroki jasności na tyle szeroko, by dało się je odróżnić. Najczęstsza awaria monochromatyczna to kroki leżące zbyt blisko — #2563EB obok #2C68EC to funkcjonalnie ten sam kolor, a twoje UI traci hierarchię. Sąsiednie kroki powinny być widocznie różne na pierwszy rzut oka.
• Kroki nie muszą być równo rozłożone. Ludzkie oko jest wrażliwsze na różnice wśród jasnych kolorów, więc jasny kraniec rampy zwykle chce ciaśniejszych przyrostów jasności, a ciemny może przyjąć większe skoki. Równe rozłożenie w jasności często wygląda dla oka nierówno.
• Trzymaj jeden spójny odcień, ale dopuszczaj drobne dryfy. Stopień czy dwa przesunięcia odcienia między krokami jest w porządku i często wygląda lepiej; dwudziestostopniowy wahnięcie oznacza, że opuściłeś terytorium monochromatyczne.

Gdzie tony zarabiają na siebie w UI

Tinty i cienie wykonują ciężką pracę w rampie UI, ale tony — przygaszone, zmieszane z szarością wersje — rozwiązują konkretny problem, którego czyste tinty i cienie rozwiązać nie potrafią: stany, które powinny się cofnąć.

Najbardziej oczywisty to zablokowane kontrolki. Zablokowany przycisk nie powinien być jaśniejszym niebieskim (to czyta się jako inny stan aktywny) — powinien być stonowanym niebieskim, odsyconym ku szarości, by jasno sygnalizował „w tej chwili niedostępne”. Weź swój #2563EB i mocno ściągnij nasycenie ku szarości, utrzymując umiarkowaną jasność, a dostaniesz coś w rodzaju #9AA6BF: wciąż lekko niebieski, oczywiście bezczynny. To ton robiący dokładnie to, czego tinty i cienie nie potrafią.

Tony to także sposób na budowanie wyrafinowanych, niekrzyczących powierzchni. Czysto szary neutralny może wydawać się zimny i oderwany od twojej marki. Stonowany neutralny — szarość z domieszką kilku procent odcienia twojej marki — sprawia, że tła i obramowania wydają się należeć do tej samej rodziny co twój kolor akcentowy. To sztuczka stojąca za wieloma paletami, które sprawiają wrażenie drogich: „szarości” wcale nie są szare, to mocno stonowane wersje głównego odcienia. To także centralny element dobrych palet trybu ciemnego, gdzie płaskie, czysto czarne powierzchnie wyglądają ostro, a lekko stonowane ciemne powierzchnie czytają się jako zamierzone.

Błędy, na których wciąż łapię samego siebie

• Mylenie tintu z tonem. Nie są wymienne. Tint czerwieni to róż (jaśniejszy, wciąż dość czysty). Ton czerwieni to przyprószona róża (przygaszona, o podobnej jasności). Sięgaj po tint, gdy chcesz jaśniej; sięgaj po ton, gdy chcesz ciszej. Wybranie złego to powód, dla którego „złagodzony” kolor czasem wciąż wydaje się głośny.
• Budowanie całej skali przy jednym nasyceniu. Zamroź nasycenie w całej rampie, a jasny kraniec zblednie, a ciemny się zabłoci. Niech nasycenie oddycha — w górę na krańcach, często najspokojniej pośrodku.
• Zapominanie, że istnieje kontrast. Piękna rampa monochromatyczna nie mówi ci nic o tym, czy tekst na niej jest czytelny. Kroki jasności oddalone o trzy mogą wciąż oblać współczynniki kontrastu WCAG dla tekstu podstawowego. Buduj skalę dla spójności, a potem sprawdzaj faktyczne pary tekst-na-powierzchni sprawdzaczem kontrastu. Spójność i czytelność to odrębne problemy, a narzędzie sprawdza za ciebie ten drugi.
• Traktowanie monochromatycznego jako mety. Tinty i cienie jednego odcienia dają ci spokojny, jednolity system — ale czasem potrzebujesz akcentu skądinąd z koła. Baza monochromatyczna plus jeden dopełniający akcent to jedna z najbardziej niezawodnych palet, jakie istnieją, i tu właśnie zrozumienie harmonii koloru się opłaca.

Całość sprowadza się do tego: odcień to tylko punkt startowy. Tinty, cienie i tony to trzy sposoby, na jakie rozciągasz ten jeden punkt startowy w pełną działającą paletę — jaśniej z bielą, ciemniej z czernią, ciszej z szarością — a HSL daje ci pokrętła, by robić to z rozmysłem, a nie przypadkiem. Wybierz odcień, który lubisz, otwórz regułę monochromatyczną i przeprowadź suwak jasności od krańca do krańca. Zanim zbudujesz ręcznie jedną dobrą dziewięciokrokową rampę, już nigdy nie spojrzysz na „zestaw kolorów” tak samo. To prawie zawsze jeden kolor w dziewięciu strojach.