Kody kolorów HEX, RGB i HSL — wyjaśnienie

Jeśli kiedykolwiek otworzyłeś plik projektowy, skopiowałeś #3B82F6 i zastanawiałeś się, dlaczego ten sam niebieski pojawia się również jako rgb(59, 130, 246) oraz hsl(217, 91%, 60%), to natknąłeś się na trzy formaty kolorów, którymi każdy projektant stron i programista front-endu musi w końcu swobodnie władać. Wszystkie opisują dokładnie ten sam piksel. Po prostu opisują go w różnych językach, a każdy z tych języków sprawdza się w innym zadaniu.

Wdrażałem systemy projektowe, w których wybór niewłaściwego formatu kosztował godziny. Podaj programiście ścianę kodów hex na stan hover przycisku, a dostaniesz zgadywankę. Podaj mu skalę HSL, a zależność między kolorami będzie oczywista. To nie będzie więc suche przepisywanie specyfikacji, lecz raczej praktyczny model myślowy, który sam chciałbym był dostać na początku: co tak naprawdę koduje każdy format i kiedy po niego sięgać.

HEX: format, który kopiujesz, a nie ten, w którym rozumujesz

Kod koloru hex to po prostu RGB w innym przebraniu. #RRGGBB to sześć cyfr szesnastkowych podzielonych na trzy pary — czerwień, zieleń, niebieski — a każda para to jeden bajt. System szesnastkowy (o podstawie 16) biegnie od 0 do 9, a potem od A do F, więc dwie cyfry hex obejmują zakres od 00 do FF, czyli od 0 do 255 w systemie dziesiętnym. To dokładnie jeden 8-bitowy kanał na kolor. Trzy kanały, trzy bajty i znajome 16 777 216 możliwych kolorów (256 × 256 × 256).

Właśnie dlatego cyfr jest sześć: po jednym bajcie na R, G i B. Weźmy #3B82F6. Podziel: 3B, 82, F6. Przelicz każdą parę z hex na system dziesiętny — 3B to 59, 82 to 130, F6 to 246 — i właśnie ręcznie wykonałeś konwersję hex na RGB. To rgb(59, 130, 246). Ten sam kolor, żadnej magii.

Istnieje też skrót: #RGB rozwija się przez podwojenie każdej cyfry, więc #F00 staje się #FF0000 (czysta czerwień), a #0AF staje się #00AAFF. Działa tylko wtedy, gdy każdy kanał składa się akurat z powtórzonej cyfry, dlatego widujesz go głównie przy okrągłych wartościach, takich jak #FFF, #000 czy #333. Przydatny w pisanym ręcznie CSS, bezużyteczny dla dowolnych odcieni niebieskiego, które marka faktycznie wprowadza.

Hex obsługuje też przezroczystość, co zaskakuje wiele osób. CSS Color Module Level 4 dodał ośmiocyfrowy hex, #RRGGBBAA, gdzie ostatnia para to alfa: 00 to pełna przezroczystość, FF to pełne krycie. Zatem #3B82F680 to ten sam niebieski przy mniej więcej 50% krycia. Istnieje również czterocyfrowy skrót (#RGBA), gdzie obowiązują te same zasady co w stylu #3B8, a każda cyfra ulega podwojeniu. Jest obsługiwany w każdej aktualnej głównej przeglądarce; pomija go jedynie wiekowy Internet Explorer — wtedy zastępczo użyjesz rgba().

Siłą heksa jest to, że jest zwięzły i jednoznaczny — jeden token, łatwy do skopiowania, łatwy do wklejenia w narzędziu projektowym czy w zmiennej CSS. Jego słabością jest to, że twojemu mózgowi mówi prawie nic. Czy #3B82F6 jest jaśniejszy, czy ciemniejszy niż #2563EB? Po prostu nie da się tego stwierdzić, czytając te kody. To właśnie klif, z którego hex spada.

RGB: jak naprawdę myśli ekran

RGB to addytywny model koloru, na którym pracuje twój monitor. Każdy piksel to trzy maleńkie światełka — czerwone, zielone, niebieskie — a wartości mówią, jak jasno świeci każde z nich, od 0 do 255. Wszystkie trzy na 0 to czerń (każde światło zgaszone). Wszystkie trzy na 255 to biel (każde światło bije pełną mocą). Podkręć czerwień i zieleń, zostaw niebieski wyłączony, a dostaniesz żółty — co wydaje się odwrotne, jeśli dorastałeś, mieszając farby, gdzie czerwień i zieleń dają błoto. Ekrany dodają światło; farby je odejmują. To sedno koloru addytywnego i warto to zapamiętać, bo wyjaśnia mnóstwo momentów typu „dlaczego ten kolor tak robi”.

W CSS zapiszesz rgb(59 130 246) (nowoczesna składnia rozdzielona spacjami) lub rgb(59, 130, 246) (starsza, z przecinkami); obie są w porządku. Alfę dodasz ukośnikiem — rgb(59 130 246 / 50%) — co po cichu zastąpiło dawną osobną funkcję rgba(), choć rgba() wciąż działa wszędzie.

RGB jest bardziej czytelne niż hex, bo liczby są dziesiętne, a kanały jawne. Gdy widzisz rgb(250, 250, 250), od razu wiesz, że to niemal biel, bo wszystkie trzy wartości są wyśrubowane wysoko. Dzieli jednak z heksem jego prawdziwą wadę: jest fatalne do regulowania koloru. Aby przyciemnić rgb(59, 130, 246) o 10%, nie możesz po prostu poprawić jednej liczby — musisz przesunąć wszystkie trzy kanały zgodnie, a trafienie w odpowiednie proporcje ręcznie to syzyfowa praca. Co prowadzi nas do formatu, który faktycznie to rozwiązuje.

HSL: ten, w którym powinieneś rozumować

HSL — barwa (hue), nasycenie (saturation), jasność (lightness) — to format, w którym wykonuję niemal całe swoje myślenie, i ten, który generator palet kolorów pokazuje dla każdego koloru, jaki tworzy, obok RGB. Zamiast opisywać kolor przez to, ile trzech świateł zmieszać, opisuje go tak, jak zrobiłby to człowiek.

• Barwa (Hue) to kąt na kole barw, od 0 do 360 stopni. 0 (i 360) to czerwień, 120 to zieleń, 240 to niebieski. Obracaj kąt, a wędrujesz wokół tęczy.
• Nasycenie (Saturation) to to, jak żywy jest kolor, od 0% do 100%. Przy 0% dostajesz szarość niezależnie od barwy; przy 100% jest tak intensywny, jak pozwala ekran.
• Jasność (Lightness) to to, jak jasny lub ciemny, od 0% do 100%. 0% to zawsze czerń, 100% to zawsze biel, a 50% to „czysta” wersja barwy.

Nasz niebieski to hsl(217, 91%, 60%). A teraz patrz, co HSL czyni banalnym. Chcesz ciemniejszego odcienia na stan wciśniętego przycisku? Obniż jasność: hsl(217, 91%, 45%). Jaśniejszy tint na tło hover? Podnieś ją: hsl(217, 91%, 92%). Stłumiona, bardziej przykurzona wersja na nieaktywną kontrolkę? Ściągnij nasycenie: hsl(217, 40%, 60%). Barwa ani drgnęła, więc przez cały czas niezawodnie czyta się to jako tę samą rodzinę niebieskiego. Spróbuj uzyskać cokolwiek z tego, edytując kanały RGB, a zrozumiesz, po co istnieje HSL.

Właśnie dlatego HSL jest naturalnym językiem budowania skal oraz jaśniejszych i ciemniejszych odcieni. Zablokuj barwę, przemaszeruj jasnością w krokach — 95%, 85%, 70%, 55%, 40%, 25% — a masz spójny ciąg od bladego tintu na tło aż po głęboki kolor tekstu, wszystkie w sposób udowodniony ze sobą powiązane. To kręgosłup tego, jak buduję skalowalne tokeny kolorów dla systemu projektowego, i mechanizm stojący za tintami, shade'ami i tonami. HSL czyni nawet harmonię kolorów arytmetyką: kolor dopełniający to po prostu twoja barwa plus 180 stopni, a triada to trzy barwy oddalone od siebie o 120 stopni. Jeśli chcesz głębszej wersji tego tematu, zrozumienie harmonii kolorów w projektowaniu UI przeprowadza przez to krok po kroku.

Składnia CSS odzwierciedla resztę: hsl(217 91% 60%) lub starsze hsl(217, 91%, 60%), z alfą przez hsl(217 91% 60% / 50%). Barwa może nieść jednostkę deg, ale nie musi. Jedno uczciwe zastrzeżenie: jasność w HSL to nie to samo co postrzegana jaskrawość. W pełni nasycony żółty przy 50% jasności wygląda dla oka znacznie jaśniej niż niebieski przy identycznych 50%. To ograniczenie modelu, a nie błąd twoich oczu, i dokładnie dlatego istnieje narzędzie do sprawdzania kontrastu, zamiast ufać liczbie L — o tym więcej poniżej.

Którego więc faktycznie używać?

W praktyce używasz wszystkich trzech, z różnych powodów, a sztuczka polega na dopasowaniu formatu do chwili.

• HEX do przechowywania i udostępniania pojedynczego koloru — wytyczne marki, zmienna CSS, przesłanie wartości koledze z zespołu. To lingua franca; wszystko ją czyta.
• RGB, gdy pracujesz kanał po kanale lub łączysz się z kodem oczekującym kanałów liczbowych — canvas, przetwarzanie obrazu albo zawsze, gdy potrzebujesz surowych wartości 0–255. Również gdy chcesz prostej alfy i wolisz nie myśleć w parach hex.
• HSL w chwili, gdy musisz modyfikować kolory lub wiązać je ze sobą: budować stany hover i active, generować skalę tintów, znajdować harmonijny akcent albo dostrajać paletę dark mode, w której bez przerwy poprawiasz jasność i ściągasz nasycenie, żeby kolory nie wibrowały na ciemnym tle.

Mój faktyczny przepływ pracy: rozumuję i eksploruję w HSL, a potem dostarczam finalne wartości jako zmienne hex. Wybieram barwę, znajduję ciąg jasności, sprawdzam żywość nasyceniem — a następnie zamrażam każdy krok jako token hex, którego używa reszta zespołu.

Jedno, przed czym żaden format cię nie uchroni, to kontrast. Ani HEX, ani RGB, ani HSL nie powie ci, czy tekst będzie czytelny na tle; do tego trzeba prawdziwego obliczenia luminancji wobec współczynników WCAG. Oficjalne wytyczne W3C dotyczące kontrastu wymagają co najmniej 4.5:1 dla normalnego tekstu blokowego. Dlatego generator zestawia swoje odczyty HSL i RGB z wbudowanym narzędziem do sprawdzania kontrastu — żebyś mógł przesuwać suwak jasności i patrzeć, jak współczynnik aktualizuje się na żywo, zamiast wypuszczać ładny niebieski, którego nikt nie potrafi odczytać.

Gdy te trzy formaty przestaną wyglądać jak tajemnicze ciągi znaków i zaczną wyglądać jak trzy spojrzenia na jeden kolor — kopiowalny token, surowe światła ekranu i przyjazny człowiekowi zestaw pokręteł — przestaniesz walczyć ze swoimi kolorami, a zaczniesz nimi sterować. Otwórz generator palet kolorów, wygeneruj coś i zobacz, jak liczby HSL przesuwają się, gdy dostosowujesz próbkę. Ta informacja zwrotna na żywo to najszybsza droga, by to wszystko zaskoczyło.