Paleta RGB w web designie - jak dobrać barwy i kontrast

Dobra kolorystyka strony nie zaczyna się od przypadkowych odcieni, tylko od decyzji, które elementy mają prowadzić wzrok, a które mają zostać w tle. W projektowaniu interfejsów paleta RGB działa dobrze wtedy, gdy traktuję ją jak narzędzie porządkowania UI, a nie zbiór ładnych kodów. W tym tekście pokazuję, jak rozumieć ten model, kiedy naprawdę pomaga, jak dobrać spójne barwy do layoutu i jak nie zepsuć kontrastu na etapie wdrożenia.

Czym jest zestaw kolorów RGB w projektowaniu stron

RGB to model addytywny, czyli taki, w którym kolor powstaje przez dodawanie światła czerwonego, zielonego i niebieskiego. Na ekranie wartości zwykle zapisuje się w skali 0-255 dla każdego kanału: od pełnego braku światła do maksymalnego natężenia. W praktyce oznacza to, że komputer, telefon i monitor nie „malują” koloru farbą, tylko mieszają światło, dlatego RGB jest naturalnym językiem dla stron internetowych.

Najprościej myśleć o nim tak: czarny to brak światła, biały to pełne zsumowanie kanałów, a wszystkie odcienie pośrodku to różne proporcje czerwieni, zieleni i niebieskiego. To ważne, bo w web designie nie projektuję kolorów abstrakcyjnie. Projektuję je pod konkretny ekran, konkretną typografię i konkretne warunki czytania.

Jeśli ktoś pyta mnie, czy sam model RGB „wystarcza”, odpowiadam tak: do projektowania ekranowego tak, ale do sensownego systemu wizualnego potrzebujesz jeszcze roli każdego koloru. I właśnie dlatego od definicji warto przejść do sytuacji, w których ten model faktycznie daje przewagę.

Kiedy ten zapis jest najlepszym wyborem

RGB najlepiej sprawdza się wszędzie tam, gdzie odbiorca ogląda treść na ekranie. Strony WWW, aplikacje webowe, panele administracyjne, landing page’e, newslettery renderowane w przeglądarce, a nawet mockupy dla produktu cyfrowego korzystają z niego naturalnie. To po prostu najbardziej praktyczny sposób myślenia o kolorze w środowisku ekranowym.

Ja szczególnie lubię go przy interfejsach, które potrzebują przezroczystości. Kolor z alfą przydaje się w overlayach, cieniach, przyciskach w stanie hover, delikatnych obwódkach i warstwach nakładanych na zdjęcia. W takich miejscach zapis z kanałem alfa jest po prostu wygodniejszy niż szukanie kolejnego odcienia na ślepo.

RGB ma też sens wtedy, gdy projekt żyje i zmienia się w czasie. Jeśli budujesz system komponentów, łatwo z niego wyprowadzić warianty dla stanów aktywnych, disabled, focus i error. Trzeba tylko pamiętać o ograniczeniu, które często pomija się na początku: RGB to świetny zapis dla ekranu, ale nie jest domyślnym językiem druku. Jeśli projekt ma trafić do prepressu, trzeba równolegle pilnować wersji CMYK. Kiedy ten wybór jest już świadomy, łatwiej przejść od modelu do konkretnego systemu kolorów dla strony.

Jak dobrać spójny zestaw kolorów do interfejsu

Ja zaczynam od trzech pytań: co ma być widoczne jako pierwsze, co ma wspierać główną akcję i co ma zostać w tle. Dopiero potem wybieram barwy. Taki porządek chroni przed typowym błędem początkujących, czyli dokładaniem kolejnych ładnych odcieni bez roli i bez logiki.

1. Wybieram jedną barwę przewodnią, która będzie odpowiadała za najważniejsze akcje i rozpoznawalność marki.
2. Dodaję jeden kolor wspierający, ale tylko wtedy, gdy naprawdę pomaga odróżnić sekcje, typy treści albo stany komponentów.
3. Buduję neutralną bazę z jasnych i ciemnych szarości, bo to ona utrzymuje porządek wizualny.
4. Na końcu dopisuję kolory systemowe dla sukcesu, ostrzeżenia i błędu, zamiast mieszać je z kolorem brandowym.

W praktyce dobrze działa też prosta heurystyka 60-30-10. Około 60% interfejsu zajmują neutralne tła i powierzchnie, 30% to kolory wspierające lub drugoplanowe, a około 10% zostaje na akcent i wezwania do działania. To nie jest sztywny przepis, ale bardzo użyteczny punkt startowy.

Jeśli projektuję stronę contentową, zwykle nie wychodzę poza 5-7 kolorów bazowych. Więcej barw bardzo szybko zaczyna kosztować spójność, a nie wnosi wartości. Gdy taki układ masz już opisany rolami, zapis w CSS staje się prosty i przewidywalny.

Jak zapisać kolory w CSS i dlaczego format ma znaczenie

MDN opisuje funkcję rgb() jako zapis w przestrzeni sRGB, czyli dokładnie takiej, jakiej potrzebujesz w typowej stronie internetowej. W praktyce wybór formatu to nie tylko kwestia składni, ale też wygody pracy zespołu, dokumentacji i późniejszego rozwijania systemu design tokens.

:root {
  --bg: rgb(248 250 252);
  --text: rgb(17 24 39);
  --primary: rgb(37 99 235);
  --primary-soft: rgb(37 99 235 / 0.12);
}

W tym zapisie dobrze widać, że kolor nie jest jedynie ozdobą. Staje się zmienną systemową, którą można rozsądnie wykorzystywać w różnych komponentach. Jeśli jednak sam zapis ma działać w praktyce, nie wystarczy go zdefiniować. Trzeba jeszcze zadbać o czytelność i kontrast.

Jak nie zepsuć czytelności i kontrastu

Jak przypomina W3C, dla zwykłego tekstu bezpiecznym minimum jest kontrast 4,5:1, a dla dużego tekstu 3:1. Dla mnie to nie jest formalność, tylko jedna z najważniejszych granic jakości w projekcie. Strona może mieć świetną kompozycję, ale jeśli użytkownik musi mrużyć oczy, projekt przegrywa.

Najczęstszy błąd widzę wtedy, gdy kolor jest wybierany „na oko” bez testu na realnym tle. To kończy się pastelowym tekstem na jasnoszarym panelu, przyciskiem, który wygląda dobrze tylko w makiecie, albo komunikatem błędu, którego prawie nie widać. W praktyce sprawdzam zawsze kilka rzeczy:

• czy tekst ma odpowiedni kontrast wobec tła, a nie tylko „ładnie wygląda”;
• czy linki i przyciski da się odróżnić bez zgadywania;
• czy stan hover nie obniża czytelności zamiast ją wzmacniać;
• czy komunikat sukcesu, ostrzeżenia i błędu nie polega wyłącznie na kolorze;
• czy na zdjęciach i gradientach działa warstwa przyciemniająca albo rozjaśniająca.

W mojej praktyce świetnie działa zasada, żeby kolor nie był jedynym nośnikiem informacji. Ikona, etykieta, obramowanie lub zmiana kształtu często robią większą różnicę niż dokładanie kolejnego odcienia. Dopiero teraz warto spojrzeć na przykładowe układy dla różnych typów stron.

Przykładowe układy kolorów dla popularnych typów stron

Nie chodzi o kopiowanie gotowca, tylko o szybkie zrozumienie, jak rozkładać kolory według funkcji. Dobrze ustawiony zestaw od razu pokazuje, co jest tłem, co prowadzi wzrok, a co ma sygnalizować stan albo akcję.

W każdym z tych przypadków ważniejsza od samego odcienia jest rola, jaką pełni. Jeden kolor może być bardzo dobry, ale jeśli zaczyna grać jednocześnie na przycisku, linku, badge’u i nagłówku, system szybko się rozjeżdża. Dlatego przed wdrożeniem warto zrobić ostatni, bardzo praktyczny przegląd.

Zanim opublikujesz stronę, sprawdź jeszcze te cztery rzeczy

• Otwórz stronę z prawdziwą treścią, bo placeholdery często ukrywają problem z kontrastem.
• Sprawdź interfejs na małym ekranie, gdzie jasność i nasycenie wyglądają inaczej niż na monitorze.
• Przetestuj osobno stany hover, focus, disabled, success i error.
• Upewnij się, że kolory są zapisane jako zmienne lub tokeny, a nie rozrzucone po plikach bez porządku.

Jeśli potraktujesz kolory jak system ról, a nie dekorację, strona będzie wyglądała spokojniej, czytelniej i bardziej profesjonalnie. Właśnie na tym polega dobra kolorystyka w web designie: ma prowadzić użytkownika, a nie walczyć o uwagę z treścią.