BlogBlooooog

OKLCH kolory, które robią różnicę

2025-06-03

Estetyka stron internetowych odgrywa coraz większą rolę, a jednocześnie rosną wymagania w zakresie dostępności cyfrowej, wybór odpowiednich zestawów kolorów oraz możliwość ich szybkiej zmiany stają się coraz ważniejsze.

OKLCH brzmi strasznie - wiem. Kiedy pierwszy raz o tej nazwie usłyszałem na konferencji dla projektantów, nie mogłem uwierzyć, że ktoś mógł wpaść na pomysł nazwania czegokolwiek tak niezrozumiale. Prezentującym zabrało kilka dobrych chwil, aby wyjaśnieć jak wymawiać tę mało przystępną nazwę.

OKLCH może kojarzyć się z technicznym hasłem, ale w praktyce to narzędzie, które daje projektantom lepszą kontrolę nad barwami. To model barw, który zyskuje popularność nie tylko wśród projektantów stron, ale także w kontekście spełniania wymagań dostępności, takich jak standardy WCAG. W przeciwieństwie do starszych modeli, takich jak RGB czy HSL, OKLCH jest bardziej zbliżony do sposobu, w jaki człowiek postrzega kolory. Dzięki temu projektanci mogą uzyskać kolory, które są zarówno atrakcyjne wizualnie, jak i bardziej dostępne dla użytkowników z różnymi potrzebami.

Jednym z największych wyzwań podczas projektowania stron jest zapewnienie odpowiedniego kontrastu pomiędzy tekstem a tłem. Standardy WCAG określają minimalne wartości kontrastu – np. 4.5:1 dla tekstu o standardowej wielkości. OKLCH ułatwia osiągnięcie tych wartości poprzez precyzyjne sterowanie jasnością koloru, bez zmieniania jego odcienia czy nasycenia. To pozwala nie tylko dostosować paletę barw do wymagań dostępności, ale również zachować spójność estetyczną strony.

Co więcej, OKLCH świetnie sprawdza się przy projektowaniu wariantów kolorystycznych, takich jak tryb ciemny i jasny. Dzięki wsparciu tego modelu w nowoczesnych przeglądarkach można łatwo tworzyć dynamiczne style CSS, które dostosowują się do preferencji użytkowników.

OKLCH to również krok naprzód w projektowaniu dostępnych palet barw, które są bardziej odporne na zaburzenia widzenia, takie jak daltonizm. Projektanci mogą więc tworzyć strony, które pozostają czytelne i przyjazne dla szerszej grupy użytkowników, bez kompromisów w kwestii estetyki.

Przykład działania

Wyobraźmy sobie najprostszą sytuację. Projektujecie stronę internetową, na której jedynym kolorem, jakiego chcecie użyć, jest odcień niebieskiego, oznaczony na rysunku jako kolor A. Jeśli chcecie utworzyć jeszcze dwa inne kolory o tej samej jasności i podobnym odbiorze – tu zaczynają się problemy. Ale nie w OKLCH.

OKLCH opisany jako (0.7, 0.3, 158) wskazuje nam na trzy składowe modelu. Pierwszy parametr odpowiada za jasność. Jeśli więc chcemy uzyskać kolor jaśniejszy zmieniamy tylko pierwszy parametr w zakresie od 0 do 1. Jeśli kolor ma być po prostu mniej nasycony - wystarczy zmodyfikować parametr drugi. Czy nie jest to prostsze niż zgadywanie czym jest kolor Hex podany jako #00894b? Dla mnie zdecydowanie tak.

Wróćmy do naszego przykładu. Aby uzyskać nowy kolor z naszego bazowego A, wystarczy zmienić ostatni parametr - odpowiadający za odcień. Jasność i nasycenie pozostaną takie same. Otrzymaliśmy w ten sposób zestaw trzech kolorów pokazany w pierwszej kolumnie.

Teraz jeśli potrzebujecie kolorów jaśniejszych - modyfikujecie parametr pierwszy odpowiadający za jasność. Kiedy chcecie kolorów bardziej nasyconych - zmieniacie jedynie środkową wartość.

Odwiedzając stronę internetową https://oklch.com/ możecie skorzystać również z wizualnego narzędzia opartego na suwakach. Łatwo uzyskamy kolor “z tej samej bajki kolorystycznej”. Wszystko w sposób jasny, prosty i co najważniejsze szybki.

Najważniejszym sprawą w przypadku nowych modeli kolorów jest niewątpliwie, możliwość jego wykorzystania w internecie. Na co nam nowy opis koloru, skoro nie potrafimy go wyświetlić i wykorzystać na stronach. Z OKLCH nie ma tego problemu - cały zestaw barw dostępny jest w każdej, w miarę nowej przeglądarce.

Mam nadzieję, że od teraz świat nabierze dla was zupełnie innych kolorów.