Czym jest OKLCH i dlaczego powinienem go używać zamiast HEX lub HSL?

OKLCH (Jasność, Chroma, Barwa) to percepcyjnie jednolita przestrzeń kolorów oparta na modelu Oklab. W przeciwieństwie do HEX lub HSL, równe zmiany numeryczne w OKLCH powodują równe postrzegane różnice. Sprawia to, że jest idealny do projektowania dostępnych palet kolorów, tworzenia płynnych gradientów i generowania spójnych skal kolorów Tailwind v4. Ponadto OKLCH jest już obsługiwany w nowoczesnych przeglądarkach jako część standardu CSS Color Level 4.

Jak przekonwertować HEX na OKLCH?

Wklej wartość HEX (np. #3b82f6) do pola wejściowego HEX, a pole OKLCH natychmiast zaktualizuje się równoważną notacją oklch(0.6 0.18 250). Wszystkie inne formaty — OKLab, RGB i HSL — również synchronizują się w tym samym czasie. Nie musisz nic więcej robić — konwersja jest całkowicie automatyczna i odbywa się w czasie rzeczywistym.

Co oznacza 'poza gametem sRGB' i co dzieje się z kolorem?

Niektóre kolory OKLCH — szczególnie wartości o wysokiej chromie — przekraczają przestrzeń kolorów sRGB, której używa większość wyświetlaczy. Gdy tak się dzieje, narzędzie stosuje algorytm toGamut z CSS Color 4, aby znaleźć najbliższy wyświetlalny kolor sRGB. Pojawia się bursztynowy baner ostrzeżenia pokazujący oryginalną wartość poza gametem obok zmapowanego wyniku, co daje pełną przejrzystość procesu konwersji.

Jak działa generator palety OKLCH Tailwind v4?

Generator używa oficjalnego harmonogramu jasności Tailwind v4 (50=0.971, 100=0.945, aż do 950=0.238) zastosowanego do bieżącej barwy i chromy. Wytwarza 11 kroków kolorów od jasnego do ciemnego i eksportuje je jako blok kodu @theme { --color-brand-50: oklch(...); } gotowy do wklejenia do Twojego CSS. Wystarczy wybrać dowolny kolor bazowy, a paleta zostanie wygenerowana automatycznie.

Dlaczego interpolacja OKLCH wygląda lepiej niż HSL w gradientach?

HSL interpoluje przez cylindryczny układ współrzędnych, który nie odpowiada ludzkiej percepcji, często powodując szare zagłębienia lub nieoczekiwane przesunięcia barwy w połowie gradientu. OKLCH interpoluje w percepcyjnie jednolitej przestrzeni Oklab, więc jasność i chroma przechodzą płynnie bez nieoczekiwanych odcieni. Efektem są gradienty wyglądające bardziej naturalnie i profesjonalnie.

Czy ten konwerter OKLCH jest darmowy i prywatny?

Tak. Narzędzie jest całkowicie darmowe i działa w całości w Twojej przeglądarce przy użyciu biblioteki culori. Żadne wartości kolorów nie są przesyłane na serwer. Możesz swobodnie konwertować kolory bez obaw o prywatność lub opłaty — narzędzie jest dostępne bez rejestracji i bez limitów użytkowania.

Czy OKLCH z CSS Color 4 działa we wszystkich przeglądarkach?

Składnia kolorów OKLCH (oklch()) jest obsługiwana we wszystkich nowoczesnych przeglądarkach od 2023 roku, w tym Chrome 111+, Firefox 113+, Safari 15.4+ i Edge 111+. Dla starszych przeglądarek użyj wartości HEX lub RGB, które ten konwerter dostarcza jako zapasowe. Możesz bezpiecznie używać OKLCH w produkcji, podając jednocześnie odpowiednie wartości zastępcze dla starszych środowisk.

Narzędzia Kolorów

Konwerter Kolorów OKLCH – CSS Color 4, Generator Palety Tailwind v4

Darmowy konwerter kolorów OKLCH z synchronizacją na żywo między OKLCH, OKLab, RGB, HSL i HEX. Zawiera suwaki L/C/H/alfa, mapowanie gametu CSS Color 4 i eksport palety Tailwind v4.

OKLCH (Jasność, Chroma, Barwa) to percepcyjnie jednolita przestrzeń kolorów zbudowana na modelu Oklab i oficjalnie przyjęta w CSS Color Level 4. W przeciwieństwie do RGB lub HSL, OKLCH utrzymuje spójną postrzeganą jasność w różnych barwach, co czyni ją idealną do dostępnych systemów kolorów, palet Tailwind v4 i płynnych gradientów.

Jak Używać Konwertera Kolorów OKLCH

1
Wprowadź wartość koloru
Wpisz lub wklej wartość w dowolnym obsługiwanym formacie: oklch(0.6 0.18 250), #3b82f6, rgb(59, 130, 246), hsl(217deg 91% 60%) lub oklab(0.6 -0.056 -0.169). Narzędzie natychmiast synchronizuje wszystkie inne formaty.
2
Precyzyjnie dostosuj suwakami L/C/H/Alpha
Przeciągaj suwaki Jasności (L), Chromy (C), Barwy (H) lub Alfa. Suwak Chromy wyświetla znacznik granicy gametu sRGB, dzięki czemu zawsze wiesz, kiedy kolor przekracza standardowy zakres wyświetlania.
3
Sprawdź ostrzeżenie o gamecie, jeśli się pojawi
Jeśli kolor OKLCH jest poza gametem sRGB, pojawi się bursztynowy baner ostrzeżenia pokazujący oryginalną wartość i wynik mapowania toGamut z CSS Color 4 używany do wyświetlania.
4
Wygeneruj paletę Tailwind v4
Sekcja palety OKLCH Tailwind v4 automatycznie generuje kroki kolorów 50–950 dla bieżącej barwy, zgodnie z oficjalnym harmonogramem jasności Tailwind. Kliknij Kopiuj, aby wkleić blok @theme bezpośrednio do swojego CSS.

Odnośniki

W3C CSS Color Level 4 – oklch()
Specyfikacja W3C definiująca notację kolorów OKLCH i algorytmy mapowania gametu.
Culori – Biblioteka Kolorów JavaScript
Biblioteka open-source obsługująca konwersję OKLCH, mapowanie toGamut i percepcyjną interpolację w tym narzędziu.
Evil Martians – OKLCH w CSS: Dlaczego porzucić RGB i HSL?
Kompleksowy przewodnik wyjaśniający zalety OKLCH nad RGB i HSL w nowoczesnej pracy z kolorami.
Tailwind CSS v4 – Domyślna Paleta
Oficjalna dokumentacja palety kolorów Tailwind, zawierająca wartości jasności OKLCH używane w tym generatorze palet.

Powiązane Narzędzia

Konwerter Kolorów

Konwertuj między RGB, RGBA, HEX, HSL, HSV i CMYK z dwukierunkową synchronizacją na żywo.

Minifikator CSS

Minifikuj CSS używający Twoich wartości kolorów OKLCH.

Przeglądarka SVG

Podgląd i inspekcja grafik SVG używających wartości wypełnienia i obrysu OKLCH.

Często Zadawane Pytania

Czym jest OKLCH i dlaczego powinienem go używać zamiast HEX lub HSL?: OKLCH (Jasność, Chroma, Barwa) to percepcyjnie jednolita przestrzeń kolorów oparta na modelu Oklab. W przeciwieństwie do HEX lub HSL, równe zmiany numeryczne w OKLCH powodują równe postrzegane różnice. Sprawia to, że jest idealny do projektowania dostępnych palet kolorów, tworzenia płynnych gradientów i generowania spójnych skal kolorów Tailwind v4. Ponadto OKLCH jest już obsługiwany w nowoczesnych przeglądarkach jako część standardu CSS Color Level 4.
Jak przekonwertować HEX na OKLCH?: Wklej wartość HEX (np. #3b82f6) do pola wejściowego HEX, a pole OKLCH natychmiast zaktualizuje się równoważną notacją oklch(0.6 0.18 250). Wszystkie inne formaty — OKLab, RGB i HSL — również synchronizują się w tym samym czasie. Nie musisz nic więcej robić — konwersja jest całkowicie automatyczna i odbywa się w czasie rzeczywistym.
Co oznacza 'poza gametem sRGB' i co dzieje się z kolorem?: Niektóre kolory OKLCH — szczególnie wartości o wysokiej chromie — przekraczają przestrzeń kolorów sRGB, której używa większość wyświetlaczy. Gdy tak się dzieje, narzędzie stosuje algorytm toGamut z CSS Color 4, aby znaleźć najbliższy wyświetlalny kolor sRGB. Pojawia się bursztynowy baner ostrzeżenia pokazujący oryginalną wartość poza gametem obok zmapowanego wyniku, co daje pełną przejrzystość procesu konwersji.
Jak działa generator palety OKLCH Tailwind v4?: Generator używa oficjalnego harmonogramu jasności Tailwind v4 (50=0.971, 100=0.945, aż do 950=0.238) zastosowanego do bieżącej barwy i chromy. Wytwarza 11 kroków kolorów od jasnego do ciemnego i eksportuje je jako blok kodu @theme { --color-brand-50: oklch(...); } gotowy do wklejenia do Twojego CSS. Wystarczy wybrać dowolny kolor bazowy, a paleta zostanie wygenerowana automatycznie.
Dlaczego interpolacja OKLCH wygląda lepiej niż HSL w gradientach?: HSL interpoluje przez cylindryczny układ współrzędnych, który nie odpowiada ludzkiej percepcji, często powodując szare zagłębienia lub nieoczekiwane przesunięcia barwy w połowie gradientu. OKLCH interpoluje w percepcyjnie jednolitej przestrzeni Oklab, więc jasność i chroma przechodzą płynnie bez nieoczekiwanych odcieni. Efektem są gradienty wyglądające bardziej naturalnie i profesjonalnie.
Czy ten konwerter OKLCH jest darmowy i prywatny?: Tak. Narzędzie jest całkowicie darmowe i działa w całości w Twojej przeglądarce przy użyciu biblioteki culori. Żadne wartości kolorów nie są przesyłane na serwer. Możesz swobodnie konwertować kolory bez obaw o prywatność lub opłaty — narzędzie jest dostępne bez rejestracji i bez limitów użytkowania.
Czy OKLCH z CSS Color 4 działa we wszystkich przeglądarkach?: Składnia kolorów OKLCH (oklch()) jest obsługiwana we wszystkich nowoczesnych przeglądarkach od 2023 roku, w tym Chrome 111+, Firefox 113+, Safari 15.4+ i Edge 111+. Dla starszych przeglądarek użyj wartości HEX lub RGB, które ten konwerter dostarcza jako zapasowe. Możesz bezpiecznie używać OKLCH w produkcji, podając jednocześnie odpowiednie wartości zastępcze dla starszych środowisk.