Minimalny zestaw roboczy
W teorii możesz mieć „nieskończenie dużo” kolorów. W praktyce większość systemów UI świetnie działa na dość prostym zestawie.
Typowa, zdrowa paleta UI może wyglądać tak:
- 1 kolor bazowy / brandowy (z jego odcieniami),
- 1–2 kolory akcentów (np. CTA, stany aktywne),
- 1 kolor sygnałowy „success” (np. zielony),
- 1 kolor „warning/error” (żółty / czerwony),
- neutralna skala szarości (tła, ramki, tekst).
W brandingowych poradnikach często pojawia się też układ:
~ 6 kolorów: 1 dominujący, 4 akcenty, 1 kolor tekstu (czerń / ciemny szary).
Często stosuje się też zasadę 60–30–10:
- 60% – kolor dominujący, bazowy – stanowi tło i nadaje ton całej przestrzeni. Zwykle neutralny.
- 30% – kolor uzupełniający, drugoplanowy – są to główne komponenty, karty, nawigacja.
- 10% – kolor akcentu – najbardziej wyrazista lub kontrastowa barwa. Przyciąga wzrok i ożywia całość. Stosowany w przyciskach CTA, ważnych interakcjach.
Jest to prosty sposób, aby projekt nie wyglądał jak tęcza, tylko jak przemyślany system.
Kontrast i dostępność
Tu kończy się „ładnie”, a zaczyna „użytecznie (i zgodnie ze standardami)”. Dwa kluczowe tematy:
- Kontrast tekstu do tła
- Wytyczne WCAG sugerują min. 4.5:1 kontrastu dla zwykłego tekstu (i 3:1 dla dużych nagłówków).
- Ciemny tekst na jasnym tle albo jasny na bardzo ciemnym to najbezpieczniejszy wybór.
- Możesz to sprawdzić np. narzędziem WebAIM Contrast Checker.
- Daltonizm i wrażliwość na kontrast
- Niektóre kombinacje są problematyczne: zielony–czerwony, zielony–brązowy, niebieski–fioletowy, niebieski–szary itd.
- Krytycznych informacji nigdy nie przekazuj samym kolorem: dodaj ikonę, tekst, wzór (np. paski na słupku wykresu).
- Tam, gdzie kolor jest ważny (np. statusy), użyj różnic w jasności i kształcie, nie tylko w odcieniu.
Jeśli projekt ma być inkluzywny, warto przetestować swoje ekrany w symulatorach daltonizmu i na urządzeniach z różnymi ustawieniami jasności.
Jak wybrać paletę krok po kroku
Teoria teorią, ale jak z tego zrobić realny workflow? Oto proces, który dobrze sprawdza się w projektach UI/brandingowych.
Krok 1: Zacznij od ludzi, nie od kolorów
Zanim odpalisz Adobe Color odpowiedz sobie na pytania:
- Kim są użytkownicy (wiek, kontekst, branża, urządzenia)?
- Jakie mają oczekiwania względem produktu (bezpieczeństwo, fun, prestiż)?
- Jak komunikują się konkurenci – i czego chcesz uniknąć (np. kolejny niebieski fintech)?
Kolor bez kontekstu „dla kogo” bardzo łatwo robi się losowy.
Krok 2: Zbuduj prosty moodboard
- Określ 2–4 słowa‑klucze dla marki (np. „nowoczesny, spokojny, zaufany, przyjazny”),
- zbierz obrazy, wycinki UI, fotografie, tekstury, które to oddają,
- dopiero na ich bazie zacznij wybierać kolory dominujące.
To pozwala podjąć decyzje kolorystyczne w oparciu o wrażenie, a nie o „podoba mi się niebieski”.
Krok 3: Wybierz kolor bazowy (brandowy)
- Z moodboardu wybierz jeden odcień, który najlepiej niesie Twoje słowa‑klucze.
- Zdecyduj, czy ma być bardziej ciepły czy chłodny, jaskrawy czy stonowany.
- Wygeneruj z niego skalę: od najjaśniejszych tintów po mocniejsze cienie (przydadzą się jako tła, hover, border, focus).
Możesz to zrobić ręcznie w Figma / Photoshopie lub automatycznie np. w Adobe Color.
Krok 4: Dobierz harmonijny układ
- Sprawdź, jaki schemat najlepiej pasuje: monochromatyczny (gdy chcesz minimalizmu), dopełniający (gdy potrzebujesz mocnego CTA), analogiczny (gdy ma być spokojnie).
- Na tym etapie warto „przeklikać się” przez różne reguły w generatorach palet – szybko zobaczysz, co ma sens w Twoim kontekście.
Krok 5: Zbuduj zestaw funkcjonalny
Z zamkniętymi oczami powinieneś umieć odpowiedzieć:
- Jaki kolor ma główny CTA (i jego stany hover/pressed/disabled)?
- Jak wyglądają stany sukcesu, ostrzeżeń, błędów?
- Jakie kolory są zarezerwowane dla brandu, a jakie dla funkcji (np. czerwony tylko na errory, nie na linki)?
Warto od razu stworzyć mały „system”: przycisk, link, alert, karta, formularz – i przetestować, czy paleta działa w realnych komponentach, a nie tylko na ładnym „swatchu”.
Krok 6: Sprawdź kontrast i dostępność
- Przepuść kluczowe kombinacje (tekst na tle, ikony, przyciski) przez checker kontrastu.
- Sprawdź, czy komunikaty „przejdź dalej”, „błąd”, „sukces” są czytelne bez koloru (np. samą ikoną i tekstem).
Jeśli coś nie przechodzi – lepiej od razu lekko „podkręcić” wartość / nasycenie, niż później poprawiać cały produkt.
Krok 7: Zbierz feedback i iteruj
Kolor jest mocno subiektywny dlatego warto go przetestować. Możesz do tego wykorzystać:
- szybką ankietę / test preferencji w grupie docelowej,
- A/B test prostego ekranu (np. inny kolor CTA),
- rozmowy z realnymi użytkownikami („co czujesz, patrząc na ten ekran?”).
W wielu wypadkach drobne korekty odcienia lub nasycenia robią większą różnicę niż pełne „przemalowanie” brandu.
Najczęstsze błędy kolorystyczne w UI i jak ich uniknąć
Na koniec kilka pułapek, w które bardzo łatwo wpaść – zwłaszcza, gdy zna się teorię, ale kusi, żeby „zaszaleć”.
Za mały (lub za duży) kontrast
- Jasnoszary tekst na białym tle jest „ładny” tylko na Dribbble – w realnym UI zabija czytelność.
- Z drugiej strony jaskrawy żółty tekst na czerni może męczyć oczy bardziej niż niskokontrastowy szary.
Lekarstwo: trzymać się rekomendowanych wartości kontrastu, testować na zwykłych monitorach/telefonach i z różnymi poziomami jasności.
Zbyt dużo kolorów
Każdy komponent w innym kolorze = brak hierarchii i informacyjny chaos.
Lekarstwo: ogranicz liczbę „prawdziwych” kolorów, resztę załatwiaj różnicą wartości (jasność) i nasycenia w ramach jednej rodziny.
Ignorowanie konwencji
Jeśli:
- czerwony używasz na „akceptuj”, a zielony na „usuń”,
- linki są jasno‑szare, a zwykły tekst granatowy,
to UI będzie „walczyć” z przyzwyczajeniami użytkowników.
Lekarstwo: tam, gdzie to nie gryzie się z brandingiem, trzymaj się podstawowych konwencji (np. czerwony = błąd/ostrzeżenie, zielony = OK, niebieski = link / akcja).
Brak spójności w czasie
- Inny odcień niebieskiego w każdym nowym widoku.
- Zielenie i czerwienie „na oko”, bez żadnego systemu.
Lekarstwo: wrzuć paletę do systemu projektowego (Design System), korzystaj z tokenów kolorów, opisuj ich funkcję, a nie tylko wartość (color-success-500, nie #28A745).
Na koniec: kolor to narzędzie, nie religia
Teoria barw potrafi wciągnąć jak czarna dziura: koła, schematy, reguły, psychologia, modele… Łatwo się w tym zgubić. W praktyce warto pamiętać o trzech prostych zasadach:
- Kolor ma służyć treści i funkcji. Najpierw zastanów się, co użytkownik ma zrobić / zrozumieć, dopiero potem, jak to „pomalować”.
- Mniej, ale konsekwentnie. Lepiej mieć trzy dobrze zdefiniowane kolory używane konsekwentnie niż 15 przypadkowych odcieni niebieskiego.
- Testuj na ludziach, nie tylko na sobie. Ty widzisz każdy niuans, użytkownik często tylko „czuje, że coś jest czytelne albo nie”.
Jeśli ogarniesz koło barw, kilka schematów harmonii, podstawy psychologii koloru i zasady dostępności, masz w ręku zestaw, który wystarczy na lata sensownego projektowania – czy to UI, czy grafiki marketingowe, czy własne portfolio. Reszta to już świadoma praktyka i odrobina odwagi w eksperymentowaniu.
Dodaj komentarz