Jak wybrać paletę kolorów: przewodnik krok po kroku

Ani razu nie zacząłem palety od otwarcia próbnika kolorów i polowania na „ładne kolory”. To najszybsza droga do dokładnie tego problemu, który ten przewodnik ma rozwiązać: ekran pełen indywidualnie ładnych kolorów, które nie mają powodu, by być razem. Wybór palety to proces, nie chwila natchnienia, a proces jest powtarzalny. Wykonaj go w tej samej kolejności za każdym razem, a dostaniesz spójny, dostępny schemat w piętnaście minut zamiast trzech dni szarpania wartościami hex.

Dalej jest sposób pracy, którego naprawdę używam, od początku do końca, z prawdziwymi kodami hex i kompromisami na każdym kroku. Możesz przejść całość z kołem barw i sprawdzaczem kontrastu — wskażę, gdzie generator palet kolorów wykonuje arytmetykę za ciebie, ale metoda liczy się bardziej niż narzędzie.

Krok 1: Zdecyduj, skąd bierze się paleta

Zanim wybierzesz pojedynczy kolor, odpowiedz na jedno pytanie — co zakotwicza tę paletę? Są tylko cztery uczciwe odpowiedzi i zmieniają wszystko w dalszej kolejności.

• Marka. Masz już kolor logo, ustalony kolor podstawowy albo istniejącą tożsamość klienta. Paleta musi żyć wokół odcienia, którego nie wybierasz. To najczęstszy przypadek w realnym świecie i najbardziej ograniczony.
• Nastrój. Chcesz, by produkt czuł się w określony sposób — godny zaufania, energetyczny, spokojny, premium. Tu dobierasz kolory do projektu najpierw przez emocję, a odcień drugorzędnie. Aplikacja fintech pochyla się ku chłodom i powściągliwości; aplikacja edukacyjna dla dzieci ku ciepłu i nasyceniu.
• Treść. Dyktuje to sam produkt. Portfolio fotograficzne chce niemal neutralnej oprawy, by to praca dostarczała koloru. Dashboard danych potrzebuje zestawu rozróżnialnych kolorów kategorii bardziej niż klimatu.
• Kolor kotwiczący. Zakochałeś się w jednym konkretnym hexie — powiedzmy głębokim morskim #0F766E — i budujesz na zewnątrz od niego.

Większość ludzi pomija ten krok i po cichu domyślnie ląduje na „kolorze kotwiczącym”, nie przyznając się do tego, co jest w porządku, jeśli to świadomy wybór. Pułapką jest wybranie koloru nastroju emocjonalnie, a potem odkrycie, że gryzie się z twoją marką. Nazwij swój punkt startu na głos. Jeśli to nastrój, warto przeczytać psychologię koloru w brandingu, zanim się zdecydujesz, bo skojarzenia są bardziej kulturowo specyficzne, niż ludzie zakładają.

Krok 2: Wybierz jeden odcień bazowy i przypnij go

Niezależnie od punktu startu zwiń go do jednego odcienia bazowego. Jednego koloru. To ziarno, z którego wyrasta wszystko inne, a próba wybrania trzech czy czterech „głównych” kolorów naraz to dokładnie powód, dla którego palety idą źle — nie ma kręgosłupa.

Jeśli masz kolor marki, to twoja baza. Jeśli pracujesz z nastroju, wybierz odcień, który niesie uczucie: chłodne błękity i morskie dla spokoju i zaufania, ciepłe pomarańcze i czerwienie dla energii (rozróżnienie ciepłe kontra chłodne to najszybsza dźwignia nastroju, jaką masz). Następnie ustal jego HSL, bo odcień, nasycenie i jasność to trzy pokrętła, które naprawdę będziesz przekręcać przez resztę procesu. Baza w rodzaju #2563EB to mniej więcej H 217, S 91, L 60 — nasycony, średnio jasny niebieski.

Celowo myślę tu w HSL, a nie w hex, bo reguły harmonii w następnym kroku są kątowe — wszystkie polegają na obracaniu wartości H wokół 360-stopniowego koła. Jeśli hex, RGB i HSL wciąż wydają ci się wymienne, to omówienie trzech formatów warte jest dziesięciu minut; HSL to ten, który czyni budowanie palety intuicyjnym.

Krok 3: Wybierz regułę harmonii dla *tej* sytuacji

Teraz obracasz się wokół koła, by znaleźć kolory powiązane z bazą stałą geometryczną odległością. To wszystko, czym jest reguła harmonii — przepisem na wybieranie punktów na okręgu pod określonymi kątami, tak by oko czytało je jako rodzinę, a nie przypadek. Jest siedem klasycznych reguł, a uczciwa prawda jest taka, że przez większość czasu potrzebujesz tylko dwóch lub trzech z nich.

Oto jak naprawdę wybieram, według sytuacji, a nie wyliczania definicji:

• Strona marketingowa, landing page albo cokolwiek, co potrzebuje pewnego wezwania do działania: zacznij od dopełniającej (baza plus jej przeciwieństwo o 180 stopni) albo, lepiej, dopełniającej dzielonej (dwa odcienie flankujące to przeciwieństwo). Dopełniająca daje maksymalny kontrast dla przycisku, który musi się wybić; dopełniająca dzielona daje większość tego wybicia przy mniejszym zmęczeniu oczu i drugi akcent za darmo.
• Aplikacja z dużą ilością treści, dashboard albo doświadczenie czytania: idź w analogiczną — dwa lub trzy sąsiedztwa w obrębie około 30 stopni, jak #0EA5E9 przez #0D9488. Jest spokojna i niemal niemożliwa do zepsucia. Ceną jest kontrast, więc zwykle pożyczysz jeden przeciwny odcień wyłącznie na CTA.
• **Potrzebujesz kolorów, które niosą odrębne *znaczenia* (sukces, ostrzeżenie, błąd; albo kategorie wykresu): triadyczna (trzy odcienie 120 stopni od siebie) albo kwadratowa** (cztery przy 90 stopniach). Indygo #6366F1, szmaragd #10B981, bursztyn #F59E0B to triada wykonująca pracę semantyczną.
• Produkt jednomarkowy, który ma sprawiać wrażenie bezsprzecznie „jednego koloru”: monochromatyczna — jeden odcień rozszerzony przez jasność i nasycenie.

Moja domyślna rekomendacja dla pierwszej poważnej palety to dopełniająca dzielona, dokładnie z powodów opisanych w tym porównaniu z triadyczną: jest bardziej wybaczająca niż czysta dopełniająca i bardziej okiełznana niż schemat trzech odcieni. Jeśli chcesz pełnej geometrii każdej reguły, zrozumienie harmonii kolorów w projektowaniu UI rozkłada wszystkie siedem. Ustaw koło na wybraną regułę, a generator natychmiast wypluje powiązane kody hex — ale teraz wiesz, dlaczego pojawiły się te konkretne kolory.

Krok 4: Przydziel proporcje, zanim przydzielisz kolory

To krok, który oddziela palety, które działają, od palet, które jedynie „pasują”, i ten, który niemal każdy pomija. Harmonia mówi ci, które kolory są dopuszczone w pokoju. Nie mówi nic o tym, ile każdego użyć — a trzy idealnie harmonijne kolory użyte w równych ilościach to własny rodzaj brzydoty, wyważona kłótnia, w której każdy krzyczy z tą samą głośnością.

Przydziel role, używając mniej więcej podziału 60/30/10:

• Dominujący (~60%) to twój kręgosłup — powierzchnie strony, duże wypełnienia, kolor, na którym oko ląduje najczęściej. Co kluczowe, to zwykle nie twój nasycony odcień bazowy. To niemal neutralny wyprowadzony z niego: zabarwiona złamana biel w rodzaju #F8FAFC dla trybu jasnego albo wyciszona ciemność jak #1E293B.
• Drugorzędny (~30%) wspiera go — tła sekcji, karty, drugorzędne przyciski, stany najechania. Niesie więcej twojego rzeczywistego odcienia.
• Akcent (~10%, a najlepiej znacznie mniej) to ten głośny — podstawowy przycisk, aktywna zakładka, kropka powiadomienia. Tu mieszka twój nasycony kolor bazowy albo jego dopełnienie. Im rzadszy go uczynisz, tym ciężej pracuje.

Najczęstszy błąd, jaki widzę, to używanie harmonijnych odcieni przy pełnym nasyceniu na dużych obszarach. Twój bazowy #2563EB jest cudowny na przycisku i męczący jako tło całej strony. Duże powierzchnie chcą wyciszonej, rozjaśnionej wersji; czysty odcień jest zarezerwowany dla 10%. Jeśli chcesz proporcji wyjaśnionych dogłębnie, reguła 60/30/10 idzie dalej, ale nagłówek jest prosty: wybierz kolory, a potem bezlitośnie zdecyduj, jak mało tego głośnego ci ujdzie na sucho.

Krok 5: Sprawdź kontrast — harmonia nie gwarantuje czytelności

Oto fakt, który ludzi zaskakuje: koło barw nie mówi nic o kontraście. Dwa kolory mogą być idealnie harmonijne i całkowicie nieczytelne razem. Harmonia i dostępność to niezależne problemy i musisz rozwiązać oba.

Przepuść każde zestawienie tekst-na-tle i element-interfejsu przez sprawdzacz kontrastu. Cele, prosto od W3C, nie podlegają negocjacji, jeśli zależy ci na użytkownikach:

• 4.5:1 minimum dla zwykłego tekstu treści na tle.
• 3:1 dla dużego tekstu (z grubsza 18pt albo 14pt pogrubione) i dla reszty.
• 3:1 dla elementów interfejsu i istotnych grafik — obrysów przycisków, obramowań formularzy, ikon — względem sąsiadujących kolorów.

To wartości progowe, więc nie zaokrąglaj w górę: obliczone 4.49:1 nie spełnia progu 4.5:1. Sprawdzacz WCAG w generatorze sygnalizuje to na żywo, gdy parujesz kolory, co jest momentem na odkrycie, że twoja piękna kombinacja akcent-na-drugorzędnym jest nieczytelna — a nie po tym, jak ją wdrożysz. Pełny obraz AA kontra AAA i skąd biorą się współczynniki znajdziesz w wyjaśnieniu współczynników kontrastu WCAG oraz w kanonicznym kryterium sukcesu WCAG 1.4.3.

Jeszcze jedno sprawdzenie, które nic nie kosztuje: nie pozwól, by kolor był jedyną rzeczą niosącą znaczenie. Mniej więcej 1 na 12 mężczyzn ma jakąś formę zaburzeń widzenia barw, najczęściej czerwono-zielonych, więc czerwony błąd i zielony sukces różniące się tylko odcieniem są niewidoczne dla realnej części twojej publiczności. Łącz kolor z ikoną, etykietą albo pozycją. Podejście przyjazne osobom z daltonizmem to głównie redundancja, a nie unikanie kolorów.

Krok 6: Przetestuj w realnym kontekście, potem iteruj

Próbki kłamią. Paleta, która wygląda na wyważoną jako pięć prostokątów obok siebie, zachowuje się całkowicie inaczej, gdy stanie się realnym układem — bo powierzchnia, sąsiedztwo i ilość białej przestrzeni zmieniają to, jak kolory się czytają. Klasyczny przykład: akcent, który wygląda łagodnie jako mały żeton, staje się przytłaczający jako baner na całą szerokość, a para, która przeszła kontrast jako duże bloki, zawodzi, gdy tekst ma 14px.

Więc zanim się zdecydujesz, wrzuć paletę w coś, co przypomina rzeczywisty produkt — przycisk, kartę, nagłówek, akapit prawdziwego tekstu. Spójrz na to na tanim ekranie telefonu w świetle dziennym, nie tylko na skalibrowanym monitorze. Potem iteruj, dostrajając nasycenie i jasność, niemal nigdy odcień. Jeśli coś wydaje się nie tak, twoja harmonia jest zwykle w porządku; to proporcje albo wartości tonalne potrzebują pracy. Pociągnij dominujący jaśniej, zbij nasycenie z powierzchni, pogłęb akcent, aż kontrast przejdzie.

Jeśli budujesz zarówno dla trybu jasnego, jak i ciemnego, zaplanuj to teraz, a nie odwracaj później — tryb ciemny to nie „ta sama paleta odwrócona”, a palety kolorów do trybu ciemnego wyjaśniają, dlaczego wyciszanie akcentów do ciemnych teł ma znaczenie. A w chwili, gdy twoja paleta przerośnie garstkę próbek, awansuj każdy kolor do porządnej skali tonalnej i nazwij je według roli, co jest całym założeniem skalowalnych tokenów kolorów.

Wersja w skrócie

Wybór palety to sześć decyzji w kolejności, nie jedno trafione zgadnięcie. Nazwij swój punkt startu. Zredukuj go do jednego odcienia bazowego. Obróć koło regułą harmonii pasującą do zadania — dopełniającą dzieloną, jeśli nie jesteś pewien. Przydziel proporcje 60/30/10, zanim zakochasz się w jakimkolwiek kolorze. Sprawdź kontrast względem liczb WCAG, bo koło tego nie zrobi. Potem przetestuj w realnym układzie i dostrój jasność, a nie odcień.

Wykonaj to w kolejności, a problem „jak dobrać kolory, które do siebie pasują” w większości się rozpływa — nie dlatego, że dopisało ci szczęście w guście, ale dlatego, że każdy kolor w zestawie zasłużył na swoje miejsce relacją, rolą i stosunkiem. To różnica między paletą a stosem kolorów, które akurat są ładne.