Kolory w CSS: HEX, RGB, HSL i OKLCH — który zapis wybrać

HEX — szesnastkowo

#1e88e5 → R = 1e (30), G = 88 (136), B = e5 (229) #fff = #ffffff (biały) #1e88e580 = ten sam kolor z 50% krycia

Każda para cyfr szesnastkowych to natężenie jednej składowej od 00 (0) do ff (255). Zapis jest krótki i powszechny, ale trudno z niego „wyczytać” kolor. O systemie szesnastkowym przeczytasz w poradniku systemy liczbowe.

RGB — składowe światła

rgb(30 136 229) rgb(30 136 229 / 0.5) — z przezroczystością

Te same trzy liczby co w HEX, tylko dziesiętnie. Starszy zapis z przecinkami (rgba(30, 136, 229, 0.5)) nadal działa.

HSL — odcień, nasycenie, jasność

hsl(208 79% 51%) odcień 0–360° (0 czerwony, 120 zielony, 240 niebieski), nasycenie i jasność w %

HSL jest intuicyjny: żeby zrobić ciemniejszą wersję przycisku na najechanie myszą, zmniejszasz tylko jasność; żeby uzyskać kolor pastelowy — nasycenie. Wszystkie zapisy przeliczysz w konwerterze kolorów.

OKLCH — nowoczesny zapis

W HSL żółty i niebieski o tej samej „jasności” 50% wyglądają zupełnie inaczej — żółty jest dużo jaśniejszy dla oka. Przestrzeń OKLCH (jasność, chroma, odcień) jest zgodna z percepcją: kolory o tej samej jasności L naprawdę wyglądają na równie jasne. Ułatwia to budowanie palet i motywów ciemnych. Obsługują ją wszystkie współczesne przeglądarki; dla starszych podaj kolor zapasowy w HEX.

Paleta strony w praktyce

1. Wybierz kolor główny (marki) i ewentualnie jeden akcent.
2. Wygeneruj odcienie — jaśniejsze tła i ciemniejsze teksty — w generatorze palet; inspiracją może być zdjęcie (zob. kolory i palety ze zdjęć).
3. Szarości lekko „zabarwij” kolorem głównym — strona wygląda spójniej niż z czystą szarością.
4. Zapisz kolory jako zmienne CSS: --kolor-glowny: #1e88e5; — zmiana w jednym miejscu zmienia całą stronę.
5. Sprawdź kontrast tekstu i tła w kalkulatorze kontrastu — co najmniej 4,5 : 1 dla zwykłego tekstu (zob. kontrast i dostępność).

Płynne przejścia kolorów do tła nagłówka lub przycisku przygotujesz w generatorze gradientów.