Generator palet kolorów

Dlaczego dobra paleta kolorów dźwiga cały projekt

Wybierz złe kolory, a ludzie to poczują, zanim zdążą to nazwać. Strona wygląda tanio, logo jest mętne, wykres zamienia się w szum. Wybierz właściwe, a praca po prostu gra: sprawia wrażenie przemyślanej, spokojnej, łatwej do przeglądania. Kolor robi dużo cichej roboty — nadaje nastrój, prowadzi wzrok, podpowiada, co jest najważniejsze. Paleta to więc nie dekoracja przyklejana na koniec. To decyzja podjęta wcześnie, na której opiera się niemal wszystko inne.

Dobra wiadomość jest taka, że nie potrzebujesz dyplomu ze sztuk pięknych, żeby trafić w solidny schemat. Potrzebujesz garści reguł z teorii koloru i szybkiego sposobu na testowanie pomysłów. Właśnie do tego służy generator: pozwala przejrzeć dziesiątki kombinacji w czasie, który kiedyś zajmowało dopieszczanie jednej.

Teoria koloru bez żargonu

Większość harmonii wywodzi się z jednego prostego pomysłu: gdzie kolory leżą na kole barw względem siebie. Naucz się czterech wzorców, a będziesz w stanie odczytać lub zbudować niemal dowolny schemat.

• Komplementarny używa dwóch kolorów leżących dokładnie naprzeciw siebie, jak niebieski i pomarańczowy. Jest energetyczny i świetnie przyciąga uwagę, choć zbyt duże ilości obu walczą o skupienie wzroku, więc niech jeden dominuje, a drugi pełni rolę akcentu.
• Analogiczny używa trzech kolorów leżących obok siebie, jak czerwony, pomarańczowy i żółty. Jest niskokontrastowy, spokojny i to właśnie taki rodzaj harmonii widać w naturze. Przyjemny dla oka, choć może być konieczne dodanie gdzieś kontrastu, żeby całość nie stała się płaska.
• Triadyczny używa trzech kolorów równomiernie rozłożonych na kole barw, jak czerwony, żółty i niebieski. Jasny i zrównoważony, działa najlepiej, gdy jeden kolor dominuje, a dwa pozostałe go wspierają.
• Monochromatyczny trzyma się jednego odcienia i zmienia jego jasność oraz nasycenie. To najbardziej niezawodny schemat ze wszystkich — czysty i spójny, dobry punkt wyjścia, gdy nic innego nie wydaje się właściwe.

Losowy generator jest fajny do inspiracji, ale prawdziwa wartość tkwi w trybach harmonii. Utrzymują kolory w matematycznych zależnościach, więc wyglądają, jakby do siebie należały, jeszcze przed jakimikolwiek poprawkami.

HEX, RGB i HSL w prostych słowach

Każdy kopiowany kolor dostępny jest w kilku notacjach — wszystkie opisują to samo inaczej.

HEX to sześcioznakowy kod, który widzisz najczęściej, na przykład #3A7BD5. To po prostu czerwony, zielony i niebieski spakowane w jeden ciąg, po dwa znaki każdy. Jest zwięzły i to właśnie go wklejasz do CSS lub narzędzia do projektowania.

RGB wymienia te same trzy kanały jako liczby od 0 do 255, na przykład rgb(58, 123, 213). Ten sam kolor, łatwiejszy do odczytania, przydatny gdy potrzebujesz kanału alfa do przezroczystości.

HSL opisuje kolor tak, jak ludzie faktycznie o nim myślą: odcień (który kolor, 0 do 360 stopni na kole barw), nasycenie (jak żywy) i jasność (jak jasny). To najłatwiejszy format do ręcznego modyfikowania, bo zmiana jasności lub nasycenia robi dokładnie to, czego się spodziewasz, bez zgadywania. Jeśli kiedykolwiek będziesz potrzebować konwersji między formatami, szybkie narzędzie HEX do RGB sprawi, że to będzie bezbolesne.

Nie zapomnij o kontraście i dostępności

Paleta może wyglądać pięknie i nadal zawieść w chwili, gdy ktoś spróbuje przeczytać na niej tekst. Kontrast to miejsce, gdzie piękno spotyka się z użytecznością. Wytyczne Web Content Accessibility Guidelines wyznaczają wyraźną poprzeczkę: normalny tekst treści powinien osiągać współczynnik kontrastu co najmniej 4,5:1 względem tła, a duży tekst co najmniej 3:1. To nie biurokracja — to różnica między czytelnikiem, który swobodnie przeglądnie stronę, a tym, który mrużąc oczy, rezygnuje i wychodzi.

Praktyczne podejście to testowanie par pierwszoplanowych i drugoplanowych kolorów w trakcie budowania, a nie po wszystkim. Jasnoszary na białym może wyglądać elegancko w makiecie i stać się niewidoczny na telefonie w świetle dziennym. Gdy para zawodzi kontrast, zazwyczaj wystarczy przesunąć jeden kolor w kierunku ciemniejszego lub jaśniejszego — nie trzeba wyrzucać całego schematu. Trzymaj jasne kolory akcentu dla przycisków, linków i wyróżnień zamiast dla długich fragmentów tekstu, a unikniesz większości problemów z kontrastem, zanim się pojawią.

Praktyczny przepływ pracy

Oto flow, który sprawdza się w różnych projektach. Zacznij od jednego kotwicznego koloru, co do którego masz pewność — często to kolor marki lub odcień pasujący do nastroju, który chcesz osiągnąć. Zablokuj go, a potem pozwól generatorowi zbudować wokół niego harmonię. Przejdź przez komplementarny, analogiczny i triadyczny, aż coś zaskoczy, i nie przemyślaj pierwszego przejścia — szukasz kierunku, nie ostatecznej odpowiedzi.

Gdy masz kandydata, przypisz mu role. Wybierz dominujący kolor dla teł i dużych obszarów, pomocniczy dla struktury i jeden wyrazisty akcent dla elementów, które mają się wyróżniać. Luźny podział 60-30-10, dominujący do pomocniczego do akcentu, utrzymuje równowagę bez sztywności. Potem sprawdź kontrast dla każdej pary tekstowej, skopiuj kody szesnastkowe i gotowe. Zachowaj te, które zadziałają, bo paleta, którą udało Ci się trafić w jednym projekcie, często staje się zarodkiem kolejnego. Kiedy będziesz gotowy do dalszego budowania, reszta naszej kolekcji wszystkich generatorów zajmie się pozostałymi elementami.

Najczęściej zadawane pytania