RGB to za mało: notacje kolorów HSL, CMYK i OKLCH

W poprzednim artykule, Jak komputer tworzy kolory: RGB, HEX i system dwójkowy, zobaczyliśmy, że kolor to zaledwie trzy liczby — czerwona, zielona, niebieska, każda w zakresie 0–255. Ekrany radzą sobie z nimi doskonale. Jednak gdy człowiek zaczyna pracować z kolorem, RGB szybko staje się nieporęczny.

RGB jest wygodne, ale nieintuicyjne

„Trochę jaśniejszy czerwony.” Jak to zrobić w RGB? Trzeba jednocześnie zwiększyć wszystkie trzy kanały. „Chcę tylko zmniejszyć nasycenie” – patrząc tylko na RGB, nie wiadomo, co zmieniać. „Wydrukuj ten kolor dokładnie tak samo” – w RGB to w ogóle niemożliwe.

Inne systemy zapisu kolorów powstały właśnie po to, by rozwiązać te problemy.

HSL — sposób myślenia człowieka

HSL opisuje kolor za pomocą trzech wartości: odcień · nasycenie · jasność. hsl(14, 100%, 60%) to ten sam kolor co #FF5733, ale znacznie czytelniej widać, co skąd pochodzi.

Jeśli RGB to język komputera – HSL to język projektanta. Ten sam kolor można obrabiać z perspektywy tego, co chcemy zmienić.

Hue — odcień to koło 360°

Odcień zatacza pełne koło jak wskazówka zegara: od 0° do 360°. Wartości 0° i 360° to ten sam czerwony.

Saturation — nasycenie to intensywność koloru

Ten sam odcień przy mniejszym nasyceniu staje się coraz bardziej szary.

Lightness — jasność od czerni do bieli

L równe 0% to zawsze czerń, 100% to zawsze biel. 50% odpowiada „naturalnej” jasności danego koloru.

Prawdziwa moc HSL — tworzenie palet

Zachowując ten sam Hue i zmieniając tylko L, otrzymujemy naturalnie spójny zestaw kolorów. Zrobienie tego samego w RGB wymagałoby ręcznego obliczenia 9 komórek; w HSL wystarczy stopniowo zmieniać L od 12% do 92%.

Obie palety powyżej można zapisać jedną linijką.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... wystarczy zmieniać L o 10 */
}

To moment, w którym HSL najbardziej błyszczy przy budowaniu systemów projektowych.

CMYK — język tuszu

Nanoszenie koloru na papier, a nie ekran, wymaga zupełnie innego systemu. CMYK to proporcje czterech tuszy używanych w drukarniach.

Dlaczego czerń oznaczana jest jako „K”, a nie „B”? Bo „B” myliłoby się z Blue. Litera K pochodzi od terminu drukarskiego „Key plate” – płyta kluczowa, która wyrównuje wszystkie pozostałe tusze.

Światło sumuje się i jaśnieje; tusz sumuje się i ciemnieje

Największa różnica między RGB i CMYK to sposób mieszania.

Czerwony tusz wygląda na czerwony, bo pochłania inne barwy światła i odbija tylko czerwoną. Tusz odejmuje światło. Dlatego im więcej tuszu, tym ciemniejszy kolor. Teoretycznie zmieszanie CMY powinno dać czerń, ale w praktyce wychodzi mętny brąz. Dlatego dodaje się oddzielny czarny tusz (K).

Gdzie używa się CMYK?

Projektując dla ekranu, rzadko sięgasz po CMYK. Pojawia się tylko przy druku.

• Wysyłając pliki do drukarni — wizytówki, plakaty, książki, opakowania. Drukarnia konwertuje pliki RGB na CMYK.
• Pracując w Photoshopie / Illustratorze na potrzeby druku — tryb kolorów CMYK ustawiamy od samego początku.
• Brand guide — zawiera zarówno wartości HEX na ekran, jak i CMYK na druk, bo ten sam kolor marki musi wyglądać podobnie w obu mediach.

Dlaczego kolory ekranowe różnią się od drukowanych — Gamut

Zakres kolorów ekranu (RGB gamut) i zakres kolorów tuszu (CMYK gamut) są różne. Intensywna fluorescencyjna różowa z ekranu nie wyjdzie taka sama w druku – tuszu po prostu nie można tak zmieszać.

Dlatego projektanci druku z góry wybierają kolory mieszczące się w przestrzeni CMYK. Drukowanie projektu zrobionego w RGB bez konwersji często daje wyblakłe, martwe barwy.

Tak zapisuje się wartości CMYK

Każdy tusz podajemy w procentach: ile ma być go nałożone. 0% – brak tuszu, 100% – maksymalna ilość.

Używając tylko K 100%, czerń wychodzi szarawa i przytłumiona. Dlatego drukarnie nakładają dodatkowo CMY, by uzyskać głębszą, bogatszą czerń.

OKLCH — współrzędne człowieka

Model kolorów, który na dobre zaczął pojawiać się w latach 20. XXI wieku. Jedno hasło przewodnie — „naturalnie dla ludzkiego oka.”

Trzy współrzędne wyglądają podobnie jak w HSL:

• L — Lightness (jasność, 0–1)
• C — Chroma (nasycenie, 0–ok. 0.4)
• H — Hue (odcień, 0–360°)

HSL ma jednak ukryty problem: przy tym samym L = 50% postrzegana jasność różnych kolorów jest zupełnie inna. Porównajmy to naocznie.

Jednozdaniowe podsumowanie — RGB i HSL to współrzędne maszyny. OKLCH to współrzędne człowieka.

L · C · H — rola każdej składowej

Zobaczmy, co dzieje się, gdy zmieniamy tylko jedną współrzędną przy tym samym kolorze.

Gdzie się stosuje?

• Palety o jednolitej jasności — gdy chcesz, by 8 kolorów kategorii miało tę samą postrzeganą jasność
• Automatyczna konwersja trybu ciemnego/jasnego — odwrócenie wartości L daje naturalny ciemny motyw
• Dostępność — możliwość dokładnego przewidzenia kontrastu między tekstem a tłem
• Gradienty — naturalny przepływ bez szarego paska w środku

OKLCH jest oficjalnie obsługiwany od CSS Color Level 4 i działa bezpośrednio w nowoczesnych przeglądarkach.

.btn { background: oklch(67% 0.18 30); }       /* pomarańczowy */
.btn:hover { background: oklch(60% 0.18 30); } /* L obniżone o 7 → dokładnie tyle ciemniej */

Kiedy używać czego?

Do większości prac cyfrowych RGB/HEX w zupełności wystarczy. HSL warto mieć w głowie przy budowaniu palet, a OKLCH bardzo pomaga przy projektowaniu trybu ciemnego i jasnego.

Jak fns radzi sobie z kolorami?

Gdy wiesz już, że kolor to liczba, kolejny krok to mieć często używane kolory zawsze pod ręką. fns zbiera pobieranie, zapisywanie i wklejanie kolorów pod jeden klawisz.

Eyedropper — pobierz kolor z dowolnego miejsca na ekranie — ⌘+Shift+K

Eyedropper to narzędzie, które precyzyjnie pobiera kolor z dowolnego piksela ekranu. To jak pipeta z Figmy czy Photoshopa wyjęta poza program i dostępna w całym systemie.

Po naciśnięciu ⌘+Shift+K Eyedropper fns pojawia się gdziekolwiek jesteś. Piksel z projektu, obszar zdjęcia, kolor tła innej aplikacji — wystarczy przesunąć mysz i kliknąć, by pobrać dokładnie ten kolor.

• Przy każdym kliknięciu kolor jest automatycznie kopiowany do schowka. Żadnego osobnego „kopiowania”.
• W widgecie Eyedropper możesz wybrać, w jakim formacie kolor trafi do schowka: RGB / HEX / HSL / CMYK / OKLCH.
• Widoczny jest podgląd wizualny pobranego koloru oraz najbliższe kolory systemowe.

Eyedropper → automatyczny zapis do schowka → ponowne użycie z history schowka – przepływ bez przerw. Nie trzeba oddzielnie otwierać Digital Color Meter ani za każdym razem wciskać skrótu kopiowania.

Schowek automatycznie rozpoznaje kolory

Historia schowka fns automatycznie wykrywa, czy skopiowany tekst jest kodem koloru. Działa niezależnie od formatu.

Gdy sięgasz po kolor z historii, sam tekst często nie wystarczy, by go sobie przypomnieć. fns wyświetla obok każdego wpisu mały chip koloru, dzięki czemu kolor widać od razu.

Widok tylko kolorów

Jednym klawiszem możesz filtrować historię schowka, by wyświetlić tylko kody kolorów. Podczas pracy projektowej, gdy chcesz zobaczyć ostatnio używane kolory, nie trzeba przekopywać się przez tekst, URLe i kod.

• W tym samym pickerze wpisz słowo kluczowe jak color: → wyświetlą się tylko kolory
• Szukaj po nazwie — „blue”, „red” zawęzi listę do kolorów z tej gamy
• Podobne kolory są grupowane wizualnie

Konwersja formatu w locie

Ten sam kolor możesz skopiować w innym formacie. Gdy skopiujesz #FF5733 z Figmy i chcesz wkleić jako rgb(...) w CSS, wystarczy wybrać ten wpis w pickerze fns i nacisnąć jeden skrót — konwersja odbywa się automatycznie.

Przełączanie między Figmą (HSB) a CSS (HSL/HEX/OKLCH) bez potrzeby otwierania konwertera za każdym razem.

Rozwijanie tekstu i skróty

Często używane kolory marki rejestruj jako skróty tekstowe.

Te same skróty działają wszędzie: w polu kolorów Figmy, wiadomościach Slacka, edytorze kodu czy CSS. Koniec z każdorazowym szukaniem koloru w brand guide i kopiowaniem go ręcznie.

Czas tracony na otwieranie konwertera i przenoszenie kodów kolorów między formatami – fns go skraca.

Chcesz wiedzieć, skąd w ogóle biorą się te liczby — poznać podstawy trzech kanałów RGB, systemu dwójkowego i notacji HEX? Zacznij od Jak komputer tworzy kolory: RGB, HEX i system dwójkowy.