W CSS ten sam kolor można zapisać na co najmniej trzy różne sposoby, i każdy z nich jest wygodny do innego zadania — od designu po animację przezroczystości.
HEX: kompaktowy zapis do kopiowania
Zapis szesnastkowy w rodzaju #FF5733 koduje trzy kanały — czerwony, zielony, niebieski — po dwa znaki na każdy. To najbardziej kompaktowy format, wygodny do kopiowania z makiet projektowych, ale niemal nieczytelny dla człowieka: trudno na oko odgadnąć, jaki odcień kryje się za ciągiem cyfr.
RGB: bezpośredni dostęp do każdego kanału
rgb(255, 87, 51) zapisuje te same trzy kanały jako liczby dziesiętne od 0 do 255. To wygodne, gdy trzeba programowo zmienić pojedynczy kanał, na przykład płynnie zwiększać czerwony w animacji JavaScript.
HSL: intuicyjny dobór odcienia
HSL opisuje kolor przez odcień (hue, 0–360°), nasycenie i jasność. To najwygodniejszy format do ręcznego dobierania koloru: aby uzyskać ciemniejszą wersję tego samego odcienia, wystarczy zmniejszyć tylko jasność, bez ponownego przeliczania wszystkich trzech kanałów RGB od zera.
Kanał alfa dla przezroczystości
Formaty rgba() i hsla() dodają czwarty parametr — krycie od 0 do 1. Nowoczesny CSS pozwala też ustawić przezroczystość w HEX poprzez dwa dodatkowe znaki na końcu, np. #FF573380.
Do czego to służy
- Szybko przekonwertować kolor z makiety projektowej na potrzebny format CSS.
- Dobrać ciemniejszy lub jaśniejszy odcień tego samego koloru za pomocą HSL.
- Dodać przezroczystość do koloru bez zmiany jego bazowego odcienia.
Dlaczego kod HEX ma akurat sześć cyfr
Format #RRGGBB nie jest przypadkowy: każda para cyfr szesnastkowych zapisuje dokładnie jeden bajt (8 bitów), czyli liczbę od 0 do 255 — stąd trzy kanały RGB dają razem 24 bity, czyli klasyczne "24-bitowe kolory" znane z opisów starszych kart graficznych i monitorów z lat 90., reklamowanych jako obsługujące "16,7 miliona kolorów" (dokładnie 256×256×256). Skrócona forma zapisu, #RGB z trzema znakami zamiast sześciu, działa tylko wtedy, gdy każdy kanał da się zapisać jako powtórzenie tej samej cyfry — na przykład #3C9 to skrót od #33CC99, a nie od dowolnej innej kombinacji, co bywa źródłem pomyłek przy ręcznym skracaniu kodów kolorów w arkuszach stylów.