Harmonia kolorów w projektowaniu interfejsów — co naprawdę oznacza

Większość „brzydkich” interfejsów, które poproszono mnie o naprawienie, wcale nie ma problemu z kolorem w sposób, jaki ludzie zakładają. Poszczególne kolory są w porządku. Zepsuta jest relacja między nimi — przyciski, linki, wykresy i plakietki dobrano każde z osobna, a nic na ekranie nie współgra ze sobą. Właśnie tym współgraniem jest w istocie harmonia kolorów. To nie nastrój ani klimat; to zestaw mierzalnych relacji kątowych na kole barw, a gdy już potrafisz te relacje dostrzec, w dziesięć minut zbudujesz paletę, która inaczej zajęłaby tydzień przesuwania wartości hex, aż coś przestanie wyglądać źle.

To jest praktyczny przewodnik po harmonii kolorów w projektowaniu UI — jak każdy schemat zbudowany jest na kole, po jakie konkretne kody hex bym sięgnął i jakie błędy widuję (i sam popełniałem) wciąż na nowo.

Czym naprawdę jest harmonia kolorów

Harmonia kolorów to zasada, zgodnie z którą kolory powiązane stałymi odległościami geometrycznymi na kole barw wyglądają razem celowo. Koło to 360 stopni odcienia. Każda klasyczna zasada harmonii — dopełniająca, analogiczna, triadyczna i pozostałe — to po prostu przepis na wybieranie punktów na tym okręgu pod określonymi kątami. Wybierz odcień bazowy, zastosuj kąt, a otrzymasz kolory, które oko odczytuje jako należące do tej samej rodziny, a nie jako przypadek.

Powód, dla którego ma to znaczenie dla interfejsów — bardziej niż dla obrazu — jest taki, że UI ma dla koloru zadania. Nie używasz palety dekoracyjnie — przypisujesz role. Model, którego używam w każdym projekcie, to dominujący, uzupełniający, akcentowy:

• Dominujący to twój trzon — powierzchnie, duże wypełnienia, kolor, na którym oko ląduje najczęściej. Często zbliżony do neutralnego wariant wywiedziony z koloru podstawowego, a nie sam nasycony kolor podstawowy.
• Uzupełniający go wspiera — tła sekcji, przyciski drugorzędne, stany hover.
• Akcent to ten głośny — podstawowe CTA, aktywna zakładka, kropka powiadomienia. Powinien być rzadki. Im rzadszy, tym lepiej działa.

Proporcja, którą trzymam w głowie, to mniej więcej 60/30/10. Harmonia mówi ci, które kolory mają wstęp do pokoju; podział na dominujący/uzupełniający/akcentowy mówi ci, ile każdego z nich użyć. Kto pomija drugą połowę, kończy z trzema idealnie harmonijnymi kolorami krzyczącymi z tą samą głośnością, co jest własnym rodzajem brzydoty.

Jeśli chcesz pominąć arytmetykę, generator palety kolorów buduje każdy z tych schematów z jednego kodu hex i podaje wartości HSL oraz RGB — ale warto rozumieć tę konstrukcję, żeby wiedzieć, któremu wynikowi zaufać.

Dopełniające: dwa kolory, 180 stopni od siebie

Pary dopełniające leżą dokładnie po przeciwnych stronach koła. Weź odcień bazowy i dodaj 180 stopni. Niebieski #2563EB przy pomarańczowym #EA580C to podręcznikowy przykład, a podręcznikowy, bo działa: maksymalny kontrast odcienia, który sprawia, że akcent niemal wibruje na tle.

Ta wibracja to dokładnie powód, dla którego schematy dopełniające są pułapką w UI. Dwa w pełni nasycone dopełnienia umieszczone obok siebie walczą. Połóż jaskrawoczerwony tekst na jaskrawozielonym tle, a oczy nie mogą się ustatkować — krawędź zdaje się migotać. Lekarstwem jest nigdy nie używać obu w pełnej sile. Niech jeden będzie dużą dominującą powierzchnią, mocno odbarwioną lub przyciemnioną, a dopełnienie zachowaj jako mały, nasycony akcent.

W praktyce więc: dominujący to stonowana, niebiesko zabarwiona powierzchnia jak #1E293B, tekst zasadniczy jest niemal biały, a dopełnienie pojawia się tylko na przycisku podstawowym jako #F97316. To schemat dopełniający, ale nigdy nie opisałbyś go jako „kłócący się niebieski i pomarańczowy”, bo nigdy nie nadałeś im równej powierzchni. Stripe i Linear opierają się na tego rodzaju pojedynczym akcencie o wysokim kontraście na tle spokojnego, niemal monochromatycznego pola.

Analogiczne: sąsiedzi na kole

Kolory analogiczne mieszczą się w zakresie mniej więcej 30 stopni od siebie — trzy sąsiadujące wycinki koła, jak #0EA5E9, #0E7490, #0D9488 (od błękitu nieba przez cyjan po morską zieleń). Ponieważ dzielą wspólny odcień bazowy, niemal niemożliwe jest, by je zepsuć. Cały schemat sprawia wrażenie jednego oddychającego koloru.

To jednocześnie siła i słabość. Palety analogiczne są spokojne, spójne, sprawiają wrażenie premium — świetne dla produktów bogatych w treść, dashboardów, wszędzie tam, gdzie chcesz, by oprawa się usunęła. Problemem jest kontrast: jeśli każdy kolor to kuzyn, nic się nie wyróżnia, a twoje wezwanie do działania tonie. Mój standardowy ruch to zbudować interfejs analogicznie, a potem pożyczyć jeden kolor z przeciwnej strony koła wyłącznie na akcent. Teraz masz analogiczny spokój plus jedno dopełniające uderzenie — co jest, nieprzypadkowo, ideą podziału dopełniającego opisanego niżej.

Triadyczne: trzy kolory, 120 stopni od siebie

Schematy triadyczne wykorzystują trzy odcienie rozstawione dokładnie co 120 stopni, tworzące na kole trójkąt równoboczny. Klasyką jest czerwony–żółty–niebieski, ale bardziej nowoczesna, przyjazna UI triada to coś w stylu #6366F1 (indygo), #10B981 (szmaragd), #F59E0B (bursztyn).

Triadyczny jest zarazem żywy i wyważony, co brzmi idealnie, dopóki nie spróbujesz użyć wszystkich trzech kolorów w równym stopniu i nie wyprodukujesz czegoś, co wygląda jak zabawka dla dzieci. Dyscyplina, której wymaga triada, to brutalne przypisanie ról. Wybierz jeden z trzech jako kolor dominujący marki, zdegraduj drugi do roli wspierającej/uzupełniającej, a trzeciego używaj tylko jako oszczędnego akcentu. Wiele palet produktowych, których nigdy nie nazwałbyś „triadycznymi”, w istocie nimi jest — marka w indygo, stan sukcesu w szmaragdzie, stan ostrzeżenia w bursztynie to triada wykonująca pracę semantyczną. To harmonia triadyczna ukryta na widoku, i najmądrzejszy sposób jej użycia: niech te trzy kolory mapują się na trzy znaczenia, a nie na trzy dekoracje.

Podział dopełniający: ten, po który sięgam najczęściej

Podział dopełniający bierze kolor bazowy, znajduje jego dopełnienie, a potem używa dwóch kolorów sąsiadujących z tym dopełnieniem zamiast samego dopełnienia. Zamiast więc niebieskiego kontra czysty pomarańcz, sparowałbyś niebieski #2563EB z #F97316 i #EAB308 — dwoma odcieniami flankującymi pomarańcz.

To moja domyślna rekomendacja dla każdego, kto buduje swoją pierwszą poważną paletę UI. Dostajesz większość kontrastu schematu dopełniającego — twój akcent wciąż wybija się na tle dominującej bazy — ale napięcie jest łagodniejsze i dostajesz drugi akcent gratis, co jest naprawdę użyteczne: jeden na akcje podstawowe, drugi na wyróżnienia lub drugorzędny nacisk. Jest bardziej wybaczający niż czysty dopełniający i bardziej powściągliwy niż triadyczny. Jeśli masz nauczyć się jednej zasady poza dopełniającą, naucz się właśnie tej.

Tetradyczne i kwadratowe: schematy czterokolorowe dla odważnych

Tetradyczny (czasem zwany podwójnie dopełniającym) wykorzystuje dwie pary dopełniające — cztery kolory tworzące na kole prostokąt. Kwadratowy to szczególny przypadek, w którym te cztery kolory są równomiernie rozstawione co 90 stopni.

Będę szczery: harmonie czterokolorowe rzadko są właściwą odpowiedzią dla skupionego interfejsu. Cztery odcienie porównywalnej siły to mnóstwo konkurujących sygnałów, a ich zrównoważenie to prawdziwa robota. Tam, gdzie zasługują na swoje miejsce, jest wizualizacja danych — wykresy, tagi, wielokategoriowe dashboardy — gdzie naprawdę potrzebujesz czterech lub więcej rozróżnialnych, równo ważonych kolorów, które wciąż sprawiają wrażenie zestawu. Dla takich zastosowań schemat kwadratowy jak #3B82F6, #22C55E, #EF4444, #A855F7 daje cztery wyraźnie odróżnialne kategorie. Przy pracy nad marką i układem traktuj tetradyczny jako „wybierz dwa z tych czterech do faktycznego użycia, a resztę trzymaj w rezerwie”.

Monochromatyczne: jeden odcień, wiele zadań

Monochromatyczny nie jest właściwie relacją na kole — to pojedynczy odcień rozwinięty w pełną gamę tonalną przez zmienianie jasności i nasycenia. Jeden niebieski staje się #EFF6FF, #BFDBFE, #3B82F6, #1D4ED8, #1E3A8A: tła, obramowania, wypełnienia, tekst — wszystko z jednego rodzica.

Każdy poważny system projektowy jest w swoim rdzeniu monochromatyczny, nawet gdy marka używa kilku odcieni, bo potrzebujesz skali od 9 do 11 stopni na kolor, żeby obsłużyć powierzchnie, hovery, stany wyłączone i tryb ciemny. Monochromatyczny jest niezawodny pod względem spójności i niebezpiecznie łatwy do spłaszczenia — jeśli każdy stopień jest zbyt bliski jasnością, UI traci hierarchię. Rozłóż skalę szeroko i sprawdź, czy sąsiednie stopnie są faktycznie rozróżnialne.

Błędy, które pojawiają się wciąż na nowo

• Używanie odcieni harmonijnych w pełnym nasyceniu na dużych powierzchniach. Harmonia wybiera odcienie; nie nakazuje używać ich w 100%. Duże powierzchnie niemal zawsze chcą odbarwionej lub zabarwionej wersji harmonijnego odcienia, nie czystej.
• Traktowanie harmonii jako całości zadania. Harmonijna paleta bez proporcji dominujący/uzupełniający/akcentowy to po prostu zrównoważona kłótnia, w której wszyscy krzyczą. Przypisz role i powierzchnie.
• Całkowite zapominanie o dostępności. Koło nic nie mówi o kontraście. Dwa harmonijne kolory mogą być razem zupełnie nieczytelne. Tekst zasadniczy potrzebuje współczynnika kontrastu 4,5:1 względem tła (3:1 dla tekstu dużego), a komponenty UI i grafika potrzebują co najmniej 3:1 względem sąsiednich kolorów, zgodnie z wytycznymi kontrastu WCAG 2.1. Harmonia i kontrast to niezależne problemy — rozwiąż oba.
• Pozwalanie, by „harmonijne” przebiło „znaczące”. Twoje stany sukcesu, ostrzeżenia i błędu niosą znaczenie. Zielone-na-start i czerwone-na-stop czasem łamią zasadę harmonii — i to jest w porządku. Komunikacja zawsze bije geometrię.

Jeśli masz wynieść z tego jedno: harmonia to łatwiejsza połowa. Koło poda ci kolory, które wyglądają na powiązane, w jakieś trzydzieści sekund. Rzemiosło to wszystko, co potem — decydowanie, który kolor jest dominujący, jak mało akcentu możesz sobie pozwolić, i czy ktokolwiek ze słabym wzrokiem faktycznie odczyta wynik. Zacznij od podziału dopełniającego, trzymaj akcent rzadko, sprawdzaj współczynniki kontrastu, a wyprzedzisz większość interfejsów wypuszczanych dzisiaj.