Dobra tabela kolorów w projekcie strony nie jest dekoracją, tylko narzędziem do porządkowania hierarchii, stanów interfejsu i dostępności. W praktyce chodzi o to, żeby szybko odróżnić format zapisu, dobrać bezpieczne kody do tła, tekstu i przycisków oraz nie zepsuć czytelności na mobile. Pokażę, które zestawienia barw sprawdzają się w UI, jak czytać zapisy HEX, RGB i HSL oraz gdzie najczęściej popełnia się błąd.
Najważniejsze zasady doboru kolorów w interfejsie
- Najpierw neutralna baza, potem kolor akcji i dopiero na końcu ozdobne akcenty.
- HEX jest wygodny do handoffu i tokenów, RGB lub RGBA przydaje się przy przezroczystości, a HSL ułatwia tworzenie jaśniejszych i ciemniejszych wariantów.
- Bezpieczny próg kontrastu to 4.5:1 dla zwykłego tekstu i 3:1 dla dużych nagłówków oraz wybranych elementów UI.
- Jeden mocny kolor CTA i kilka barw semantycznych zwykle działają lepiej niż rozbudowana, krzykliwa paleta.
- Kolor nie powinien być jedynym nośnikiem informacji, bo status trzeba dać się odczytać także po etykiecie, ikonie albo kształcie.
Jak czytać zapisy kolorów w CSS
Jeśli projektuję interfejs, nie zaczynam od samego odcienia, tylko od formatu zapisu. HEX jest najwygodniejszy w przekazie do devów, RGB i RGBA dobrze pokazują składowe oraz przezroczystość, a HSL ułatwia szybkie rozjaśnianie lub przyciemnianie tej samej barwy. W nowoczesnych systemach pojawia się też currentColor, który pozwala podporządkować obrys, ikonę czy separator aktualnemu kolorowi tekstu.
| Format | Przykład | Kiedy używać | Dlaczego to ma sens |
|---|---|---|---|
| HEX | #2563EB |
Gdy tworzysz tokeny, style komponentów lub przekazujesz kolory do CSS | Krótki, czytelny zapis i standard, który większość zespołów rozumie od razu |
| RGB / RGBA | rgb(37 99 235 / 0.7) |
Gdy potrzebujesz przezroczystości albo nakładek | Łatwiej kontrolować alpha i budować overlaye, modale czy delikatne podświetlenia |
| HSL / HSLA | hsl(221 83% 53%) |
Gdy chcesz tworzyć jaśniejsze i ciemniejsze warianty tej samej barwy | Wygodne przy skalowaniu palety bez ręcznego zgadywania kolejnych odcieni |
| Nazwane kolory |
blue, black, lightseagreen
|
Do szybkich prototypów i prostych demonstracji | Szybko się je zapisuje, ale słabo nadają się do porządnego systemu design tokens |
| OKLCH | oklch(...) |
Gdy budujesz bardziej dopracowaną skalę tonalną | Pomaga tworzyć spójniejsze przejścia wizualne, choć nie każdy projekt tego potrzebuje |
Jeśli mam uprościć wybór, to zwykle zaczynam od HEX, a potem przechodzę do HSL albo tokenów semantycznych, kiedy paleta ma się skalować na większy produkt. Kiedy format jest już jasny, można przejść do tego, które barwy naprawdę warto mieć w zestawie dla strony.
Gotowe zestawienie barw do projektowania stron
Poniżej daję zestaw, który najczęściej traktuję jako bazę startową. Nie jest to paleta do wklejenia bezmyślnie w każdy projekt, ale bezpieczny układ dla strony firmowej, e-commerce albo produktu SaaS, gdzie liczą się czytelność i spójna hierarchia.
| Rola w UI | Kod HEX | Najlepsze zastosowanie | Na co uważać |
|---|---|---|---|
| Tło główne | #FFFFFF |
Strony contentowe, dashboardy, formularze | Na długich treściach czysta biel bywa zbyt ostra, więc czasem lepiej zejść o krok niżej |
| Tło sekcji | #F8FAFC |
Bloki, sekcje, karty i delikatne wyróżnienia | To nie może wyglądać jak osobny kolor brandowy, ma tylko budować głębię |
| Tekst główny | #0F172A |
Nagłówki, akapity, treści najważniejsze | Ciężka czerń wygląda agresywnie, a ten odcień jest spokojniejszy dla oka |
| Tekst pomocniczy | #475569 |
Opisy, meta dane, podpisy, hinty | Jeśli zejdziesz za nisko z jasnością, treść przestanie być pomocnicza i stanie się ledwo widoczna |
| Obramowania | #E2E8F0 |
Separatory, pola formularzy, karty | Obramowanie ma porządkować, a nie rysować ciężką kratownicę na stronie |
| Główny przycisk | #2563EB |
CTA, główna akcja, najważniejsze linki | Jeśli każdy link ma ten kolor, przycisk przestaje wyróżniać działanie |
| Hover i aktywny stan CTA | #1D4ED8 |
Stan po najechaniu, kliknięciu i fokusie | Różnica ma być widoczna, ale nie na tyle duża, żeby wyglądało to jak inny komponent |
| Sukces | #059669 |
Potwierdzenia, poprawnie wysłane formularze, pozytywne statusy | Nie mieszaj tego z kolorem akcji, bo komunikat stanie się niejednoznaczny |
| Ostrzeżenie | #F59E0B |
Alerty, uwagi, statusy wymagające czujności | Amber działa dobrze, ale potrzebuje dobrej czytelności tekstu na tle |
| Błąd | #DC2626 |
Walidacja formularza, komunikaty krytyczne, negatywne stany | Nie używaj go do zwykłych akcentów, bo zbagatelizujesz realny komunikat o błędzie |
| Stan wyłączony | #CBD5E1 |
Przyciski nieaktywne, pola zablokowane, elementy pomocnicze | Disabled ma być czytelny jako stan, ale nie może wyglądać jak uszkodzony komponent |
| Info | #0EA5E9 |
Wskazówki, komunikaty informacyjne, neutralne podbicia | To bezpieczny wybór, jeśli nie chcesz dokładać kolejnego ciężkiego akcentu |
W praktyce trzymam się zasady, że jedna barwa odpowiada za działania, a reszta wspiera ją albo opisuje stan. Jeśli wszystko jest akcentem, nic nie jest akcentem. To prowadzi do pytania, jak podzielić paletę na role użytkowe, a nie ozdobne.
Jak dobrać paletę do UX zamiast dekoracji
Kolor w UI powinien prowadzić użytkownika, a nie udowadniać, że projektant zna 12 odcieni niebieskiego. Ja zwykle zaczynam od roli, nie od barwy: tło, powierzchnia, tekst, granica, stan pozytywny, stan ostrzegawczy, stan błędu i dopiero na końcu kolor marki. Popularne proporcje 60-30-10 traktuję tylko jako skrót myślowy, bo w interfejsie lepiej działa prostsza zasada: większość powierzchni neutralna, jeden wyraźny kolor działania i kilka barw semantycznych.
- Ustal 1 kolor akcji. CTA ma być wyraźny, ale nie krzykliwy. Jeśli ma konwertować, nie może konkurować z pięcioma innymi saturacjami.
- Ogranicz liczbę mocnych akcentów. W jednym projekcie zwykle wystarczy 1 główny kolor i 2 lub 3 kolory semantyczne.
- Zbuduj hierarchię powierzchni. Tło, karty i sekcje powinny różnić się subtelnie, a nie walczyć ze sobą o uwagę.
-
Myśl w tokenach semantycznych.
--color-primaryi--color-textsą trwalsze niż nazwy odcieni oparte wyłącznie na numeracji. - Testuj na realnym layoucie. Sam swatch w Figma nie pokazuje, jak kolor zachowa się obok zdjęć, ikon, formularzy i dłuższych akapitów.
Jeśli paleta ma naprawdę pomagać, musi też przejść próbę dostępności. I tu zaczyna się część, w której wiele projektów odpada już na pierwszym kontrastowym teście.
Kontrast i dostępność, bez których paleta się rozsypuje
Najładniejsza paleta przegrywa, jeśli tekst zlewa się z tłem. W praktyce pilnuję minimum 4.5:1 dla zwykłego tekstu i 3:1 dla dużych nagłówków oraz wybranych elementów UI, bo to najprostszy filtr, który od razu odsiewa problemy. Przy elementach, które są częścią samego interfejsu, a nie treści, warto myśleć równie rygorystycznie, zwłaszcza gdy projekt ma działać na małych ekranach.
| Sytuacja | Minimalny kontrast | Co to daje |
|---|---|---|
| Zwykły tekst | 4.5:1 |
Bezpieczna czytelność dla akapitów, opisów i interfejsów tekstowych |
| Duży tekst | 3:1 |
Wystarczy dla większych nagłówków i mocniej eksponowanych komunikatów |
| Ikony i ważne elementy UI | 3:1 |
Pomaga odczytać kontrolki, stan przycisków i kluczowe symbole |
| Poziom AAA | 7:1 |
Wyższy standard, który bywa dobrym celem dla najbardziej wrażliwych fragmentów projektu |
Kolor nie powinien być jedynym nośnikiem informacji. Jeśli status formularza pokazujesz wyłącznie czerwienią i zielenią, część osób odczyta to błędnie, nawet przy poprawnym kontraście. Dlatego statusy łączę z etykietą, ikoną albo zmianą kształtu. Gdy projekt ma jasny i ciemny motyw, warto też zadeklarować color-scheme: light dark;, bo przeglądarka lepiej dopasowuje własne elementy interfejsu do motywu strony.
Najczęstsze kłopoty nie biorą się z samej palety, tylko z wdrożenia. To zwykle kilka powtarzalnych błędów, których da się uniknąć bez dodatkowego budżetu.
Najczęstsze błędy przy budowaniu palety
- Za dużo kolorów akcji. Każdy dodatkowy akcent rozmywa uwagę i obniża skuteczność CTA.
- Zbyt jasne szarości dla tekstu pomocniczego. Na monitorze wyglądają lekko, na telefonie stają się ledwo czytelne.
- Czysta czerń i czysta biel wszędzie. Dają wysoki kontrast, ale często wyglądają zbyt ostro przy dłuższym czytaniu.
- Brak stanów hover, focus, active i disabled. Interfejs traci przewidywalność, a użytkownik musi zgadywać, co kliknął.
- Test tylko w jednej skali i jednym motywie. Paleta, która działa w Figma, potrafi polec na realnym layoucie albo w dark mode.
Jeśli unikasz tych pułapek, następny krok jest prosty: zamienić zestaw barw na system, który da się rozwijać bez chaosu. Tu właśnie wchodzą tokeny i komponenty.
Jak przenieść paletę do tokenów i komponentów
Tu zaczyna się najbardziej praktyczna część. W 2026 najlepiej sprawdza się podejście oparte na tokenach projektowych, czyli zmiennych opisujących rolę koloru, a nie jego nazwę. Dzięki temu późniejszy rebranding albo dołożenie dark mode nie rozwala całej strony.
-
Zdefiniuj 8-12 tokenów bazowych. Na start zwykle wystarczą:
bg,surface,text,muted,border,primary,success,warningidanger. -
Nadaj im sens, nie odcień.
--color-text-mutedjest bardziej użyteczne niż--gray-500, bo opisuje funkcję w interfejsie. - Opisz stany komponentów. Przyciski, linki i alerty powinny mieć osobne kolory dla hover, active, focus i disabled.
-
Oddziel tryby jasny i ciemny. Osobne tokeny dla motywu i
color-schemeoszczędzają ręcznych wyjątków oraz poprawiają spójność. - Sprawdź całość na realnych treściach. Długi nagłówek, formularz i karta produktu pokażą więcej niż pojedynczy swatch.
Jeśli zaczynasz od prostego układu, czyli neutralne tła, jeden mocny kolor akcji i trzy barwy semantyczne, interfejs zwykle zyskuje więcej niż po dokładaniu kolejnych odcieni. To najkrótsza droga od ładnej palety do strony, która naprawdę prowadzi użytkownika.
