Konwerter kolorów
Konwertuj kolory między HEX, RGB, HSL i OKLCH z podglądem na żywo
O tym narzędziu
Wpisz kolor w dowolnym popularnym zapisie — #hex, rgb(), hsl() albo nazwa koloru CSS — i dostań wszystkie formaty naraz: HEX, RGB, HSL i OKLCH, obok żywej próbki. Kanał alfa jest zachowywany między formatami, a wyjście używa nowoczesnej składni CSS (kanały rozdzielone spacjami), która wkleja się czysto do współczesnych arkuszy stylów.
OKLCH jest w zestawie, bo w tę stronę zmierza kolor w CSS: w odróżnieniu od HSL jego oś jasności jest percepcyjnie jednorodna, więc dwa kolory o tym samym L naprawdę wyglądają na równie jasne, a zmiana odcienia nie zmienia przy okazji postrzeganej jasności. Przeniesienie istniejącej palety do OKLCH to pierwszy krok do budowy spójnych skal kolorystycznych.
Matematyka konwersji działa lokalnie, na opublikowanych przekształceniach sRGB↔OKLab, a wartości wracają bez strat: RGB otrzymane z wejścia HSL jest dokładnie tym, co policzyłaby przeglądarka.
Często zadawane pytania
- Dlaczego wartości jasności w HSL i OKLCH się nie zgadzają?
- Jasność w HSL jest właściwością geometryczną wartości RGB, a nie ludzkiego wzroku — żółty hsl(60 100% 50%) wygląda o wiele jaśniej niż niebieski hsl(240 100% 50%), mimo identycznego L. Oś L w OKLCH zaprojektowano tak, by odpowiadała percepcji, więc równe L oznacza równą pozorną jasność. Ta rozbieżność jest właśnie powodem istnienia OKLCH.
- Co oznacza wartość alfa i gdzie trafia w każdym z formatów?
- Alfa to nieprzezroczystość, od 0 (przezroczysty) do 1 (kryjący). W ośmiocyfrowym hex to ostatni bajt (#RRGGBBAA); w nowoczesnej składni funkcyjnej idzie po ukośniku: rgb(76 141 255 / 0.5). Ten konwerter przenosi alfę przez wszystkie formaty automatycznie.
- Czy każdy kolor OKLCH da się pokazać w sRGB?
- Nie — OKLCH obejmuje szerokie gamuty, a niektóre kombinacje chromy i jasności nie mają odpowiednika w sRGB. Konwersja z sRGB (czyli to, co robi to narzędzie) zawsze pozostaje reprezentowalna; w drugą stronę kolory spoza gamutu trzeba przyciąć lub odwzorować — dlatego soczysta zieleń P3 na ekranie sRGB wygląda bledziej.
- Dlaczego rgb(76 141 255) ze spacjami zamiast przecinków?
- CSS Color Module Level 4 ustandaryzował kanały rozdzielone spacjami z opcjonalną /alfą, a każda nowoczesna przeglądarka to obsługuje. Forma z przecinkami nadal działa, ale to forma ze spacjami jest tą, której używają nowe specyfikacje (i to narzędzie).