Konwerter kolorów — HEX, RGB, HSL i OKLCH

Czym jest konwerter kolorów?

// sRGB → linear → XYZ D65 → OKLAB → OKLCH
// References: W3C CSS Color 4 §11-15, Ottosson 2020 (https://bottosson.github.io/posts/oklab/)
// Worked example: #3b82f6 (Tailwind blue-500)

const srgb = [0x3b, 0x82, 0xf6].map(v => v / 255); // [0.231, 0.510, 0.965]

const toLinear = (v) => v <= 0.04045 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
const lin = srgb.map(toLinear); // gamma-decoded linear-sRGB

// linear-sRGB → XYZ D65 (CSS Color 4 §15.1 matrix)
const [lr, lg, lb] = lin;
const x = 0.4124564 * lr + 0.3575761 * lg + 0.1804375 * lb;
const y = 0.2126729 * lr + 0.7151522 * lg + 0.0721750 * lb;
const z = 0.0193339 * lr + 0.1191920 * lg + 0.9503041 * lb;

// XYZ D65 → LMS (Ottosson 2020 matrix), cube-root, → OKLAB
const l_ = Math.cbrt(0.8189330101 * x + 0.3618667424 * y - 0.1288597137 * z);
const m_ = Math.cbrt(0.0329845436 * x + 0.9293118715 * y + 0.0361456387 * z);
const s_ = Math.cbrt(0.0482003018 * x + 0.2643662691 * y + 0.6338517070 * z);
const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;

// OKLAB → OKLCH (Cartesian to polar)
const C = Math.sqrt(a * a + b * b);
const H = (Math.atan2(b, a) * 180 / Math.PI + 360) % 360;
console.log(`oklch(${L.toFixed(3)} ${C.toFixed(3)} ${H.toFixed(1)})`);
// → oklch(0.629 0.193 263.4)

Kluczowe funkcje

Porównanie alternatyw dla konwertera kolorów

Przykłady konwersji kolorów

#3b82f6

#FF5733

#FF6347

oklch(0.7 0.25 30)

#767676

#FF6347

hsl(220 70% 50%)

#3b82f6

Jak korzystać z konwertera kolorów

1. 1

   Wklej lub wpisz dowolny kolor w dowolnym formacie

   Każde z 9 pól formatu (HEX, RGB, HSL, HSV, HWB, CMYK, OKLCH, OKLAB, Nazwany) jest bezpośrednio edytowalne — nie ma przycisku „Konwertuj”, który trzeba klikać. Wklej HEX z Figmy, wpisz wartość `oklch()` z konfiguracji Tailwinda, wrzuć `hsl()` ze starego arkusza stylów lub po prostu wpisz nazwę CSS, np. `tomato`. Narzędzie parsuje przyrostowo w trakcie pisania, więc na wpół wpisana wartość nie nadpisze pozostałych, dopóki nie zatwierdzi się prawidłowego formatu. Nieprawidłowe wejście wywołuje cichy błąd inline; prawidłowe odświeża całą siatkę.

2. 2

   Wszystkie 9 formatów aktualizuje się natychmiast

   Wewnętrznym źródłem prawdy jest OKLCH (percepcyjnie jednorodne, nieograniczone co do gamutu), a każdy inny format jest z niego wyprowadzany przy każdym naciśnięciu klawisza. Pole, w którym aktualnie piszesz, zachowuje pozycję kursora nietkniętą — przebudowują się tylko *pozostałe* osiem pól. Dzięki temu można edytować kanał L w OKLCH bezpośrednio i obserwować, jak HEX, RGB, HSL i CMYK przesuwają się w czasie rzeczywistym, bez utraty kursora. Matematyka konwersji działa w całości w JavaScript, używając tych samych prymitywów OKLAB, które są w nowoczesnych przeglądarkach.

3. 3

   Użyj selektora do eksploracji wizualnej

   Pod siatką formatów znajduje się kwadrat saturation–lightness (przeciągnij w dowolne miejsce, aby ustawić S+L dla bieżącej barwy), suwak barwy (przeciągnij, aby obrócić wokół koła kolorów) i suwak alfa (przeciągnij, aby ustawić przezroczystość). W przeglądarkach opartych na Chromium (Chrome, Edge, Brave) przycisk **EyeDropper** aktywuje natywne API `EyeDropper` — kliknij dowolne miejsce na ekranie, także poza oknem przeglądarki, aby pobrać kolor tego piksela. Safari i Firefox jeszcze nie udostępniają tego API, więc w tych przeglądarkach przycisk jest ukryty, a kwadrat SL + suwak barwy pozostają głównym selektorem.

4. 4

   Sprawdź gamut i kontrast jednym spojrzeniem

   Trzy plakietki gamutu (**sRGB**, **Display P3**, **Rec2020**) pokazują, czy bieżący kolor mieści się w odtwarzalnym zakresie każdej przestrzeni — przydatne, gdy pracujesz w OKLCH i chcesz wiedzieć, które wyświetlacze poprawnie zrenderują wartość. Wiersz kontrastu pokazuje współczynnik WCAG 2.1 zarówno względem bieli, jak i czerni, oraz wynik APCA Lc (perspektywiczna miara WCAG 3). Plakietki pass/fail (AA, AAA) pojawiają się inline. Jeśli kolor jest poza gamutem sRGB, przycisk **Dopasuj do sRGB** zmniejsza chroma, aż się zmieści.

5. 5

   Kopiuj w natywnej składni swojej platformy

   Każde z 9 pól formatu ma własny przycisk **Kopiuj** — jedno kliknięcie i wartość ląduje w schowku, a etykieta na chwilę zmienia się na „Skopiowano!”, aby było wiadomo. Pod selektorem sekcja **Skopiuj jako kod** generuje gotowe do wklejenia fragmenty dla pięciu platform: niestandardowa właściwość CSS, token `@theme` w Tailwind v4, literał `Color(red:green:blue:)` w SwiftUI, stała `Color(0xFF...)` w Jetpack Compose oraz `Color(0xFF...)` we Flutterze. Hash adresu URL (`#hex=...` lub `#oklch=...`) także się aktualizuje, więc możesz udostępnić aktywny link do dokładnego koloru.

Częste błędy w konwersji kolorów

Zakładać, że paleta HSL jest percepcyjnie jednorodna:
hsl(220 50% 30%) → hsl(220 50% 60%) → hsl(220 50% 90%)
Na ekranie wyglądają na nierówno rozstawione.

Użyj OKLCH dla percepcyjnie równych ramp:
oklch(0.30 0.10 220) → oklch(0.60 0.10 220) → oklch(0.90 0.10 220)
Na ekranie wyglądają na równo rozstawione.

Wysłać nasze wyjście CMYK wprost na maszynę:
hex #FF6347 → cmyk(0%, 61%, 72%, 0%)
Wydrukowany wynik może wyjść błotnisty lub przesycony.

Wyślij oryginalny HEX do drukarni:
hex #FF6347 → drukarnia robi konwersję ICC pod swoją maszynę
Wydrukowany wynik dużo lepiej pasuje do koloru z ekranu.

Udawać, że Lc 60 = WCAG 4,5:1:
APCA Lc 60 → „to zalicza AA”
Współczynnik WCAG 2 dla tej samej pary może wynosić 3,8:1 (nie spełnia AA).

Sprawdź obie miary niezależnie:
Współczynnik WCAG 2 ≥ 4,5:1 dla zgodności AA tekstu treści, ORAZ
APCA |Lc| ≥ 75 dla realnej czytelności.
Obie muszą się zaliczać, nie jedna zastępować drugą.

Krokować L w HSL dla odcieni:
hsl(220 50% 30%) / hsl(220 50% 60%) / hsl(220 50% 90%)
90% wygląda wymyte; 30% wygląda znacznie ciemniej niż odstęp do 60%.

Krokować L w OKLCH dla odcieni:
oklch(0.30 0.10 220) / oklch(0.60 0.10 220) / oklch(0.90 0.10 220)
Każdy krok wygląda jak ten sam wizualny odstęp.

Skopiować 8-cyfrowy HEX do starszego parsera:
#FF573380 → parser ucina → #FF5733 (bez alfa)
50% przezroczystość ginie po cichu.

Sprawdź, czy cel obsługuje 8-cyfrowy HEX, lub użyj rgba():
dla nowoczesnego CSS: #FF573380 (8-cyfrowy HEX)
dla wsparcia legacy: rgba(255, 87, 51, 0.5) (zawsze obsługiwane)
Jawna składnia alfa unika cichego ucinania.

Dopasowywać domyślnie każdy kolor OKLCH do sRGB:
oklch(0.7 0.25 30) → dopasuj → oklch(0.7 0.18 30)
Wyświetlacze P3 tracą 30%+ nasycenia bez powodu.

Sprawdź najpierw plakietkę Display P3:
jeśli mieści się w P3: zachowaj szerokogamutową wartość, dodaj fallback sRGB przez @supports
jeśli przekracza P3: wtedy dopasuj do sRGB
Niech szerokogamutowy sprzęt robi swoje.

Kto korzysta z tego narzędzia

Frontendowcy migrujący do tokenów OKLCH w Tailwind v4

Tailwind v4 ustandaryzował OKLCH dla domyślnej palety w 2024 roku. Migracja starszego systemu designu opartego na HSL lub HEX oznacza konwersję setek kolorów marki do OKLCH. Wklej każdy HEX, skopiuj wyjście OKLCH, wrzuć do bloku `@theme`. Aktywne plakietki gamutu sygnalizują kolory, które przekraczają sRGB, więc można zdecydować, czy zachować szersza wartość gamutu dla wyświetlaczy Display P3.

Projektanci przekładający kolory z Figmy na iOS / Android

Figma eksportuje HEX domyślnie, ale iOS oczekuje literałów `Color(red:green:blue:)` w SwiftUI, a Android stałych `Color(0xFF...)` w Jetpack Compose. Wklej HEX z Figmy raz, skopiuj fragment SwiftUI dla inżyniera iOS i fragment Compose dla inżyniera Androida — oba już w dokładnej składni, jakiej oczekuje każda platforma, z oryginalnym HEX-em zachowanym w komentarzu dla śladu.

Projektanci przygotowujący proofy druku (przybliżenie CMYK)

Gdy kolor marki ma pojawić się na drukowanej wizytówce, przybliżenie CMYK daje szybkie oszacowanie do przekazania drukarni przed właściwą konwersją ICC. Wklej HEX marki, skopiuj wartości procentowe CMYK, wyślij do drukarni po szybką wycenę — a potem zaufaj konwersji ICC drukarni dla finalnego dopasowania koloru pod konkretną maszynę.

Inżynierowie dostępności weryfikujący WCAG i APCA

WCAG 2.1 jest dziś standardem regulacyjnym (ADA, EAA, Section 508); APCA Lc to proponowany następca w WCAG 3. Obie miary obok siebie pozwalają projektantowi sprawdzić, czy kolor tekstu treści osiąga 4,5:1 wg WCAG na białym tle, a potem zrobić sanity check, czy zalicza też APCA Lc 75, w jednym widoku — bez skakania między dwoma osobnymi kalkulatorami.

Wykładowcy uczący koncepcji przestrzeni barw

Jednoczesny widok dziewięciu pól sprawia, że relacje między przestrzeniami barw stają się widoczne. Wpisz wartość OKLCH, obserwuj, jak HSL dryfuje, ponieważ L oznacza co innego w każdej przestrzeni. Przeciągnij suwak barwy i patrz, jak HEX, RGB i CMYK się aktualizują. Pokaż plakietki gamutu robiące się czerwone, gdy chroma przekracza sRGB. Narzędzie samo w sobie jest demem do sali wykładowej dla kursu grafiki komputerowej lub HCI.

Brand managerowie szukający najbliższego nazwanego koloru CSS

Gdy materiał marketingowy mówi „akcent w kolorze pomidora”, a faktyczny HEX marki to `#FF6347`, pole Nazwany zwraca `tomato (dokładnie)`, ponieważ dokładnie tym jest `tomato` w specyfikacji CSS. Dla bliskich nietrafień pole zwraca najbliższy nazwany kolor z odległością ΔE w OKLAB — przydatne do dokumentacji, prozy i swobodnego nazywania kolorów.

Webdeveloperzy konwertujący starsze palety HEX do OKLCH

Starsza strona może mieć paletę marki 50 kolorów zdefiniowaną we właściwościach niestandardowych CSS jako kody HEX. Modernizacja do OKLCH pozwala zespołowi marki wyrazić te same rampy w przestrzeni percepcyjnie jednorodnej. Wklej każdy HEX, skopiuj wyjście OKLCH, podmień w definicjach zmiennych. Panel poniżej z jaśniejszymi/ciemniejszymi odcieniami weryfikuje, że wynikowa rampa jest wizualnie równa, jeszcze przed wdrożeniem.

Maintainerzy open source dokumentujący tokeny designu

Dokumentacja tokenów designu zwykle musi pokazać ten sam kolor w wielu składniach — HEX dla bloku kodu CSS, OKLCH dla tabeli specyfikacji, nazwany kolor dla wzmianek w prozie. Widok wielu pól jednocześnie pozwala maintainerowi skopiować każdy w jednym przejściu zamiast uruchamiać trzy oddzielne konwersje. Udostępnialny hash URL pozwala też kontrybutorom linkować do dokładnego koloru omawianego w zgłoszeniu GitHub.

Matematyka i algorytmy konwersji kolorów

OKLCH jako wewnętrzne źródło prawdy

Narzędzie trzyma kanoniczną wartość koloru wewnętrznie jako trójkę OKLCH. Każde edytowalne pole wyprowadza swoją wartość wyświetlaną z tej trójki przy każdym naciśnięciu klawisza; każda edycja użytkownika aktualizuje trójkę najpierw, a potem wyzwala ponowny render pozostałych ośmiu pól. To eliminuje dryf float na każdym kroku, który nęka konwertery używające HSL lub sRGB jako osi obrotu. Wybór OKLCH zamiast OKLAB jest celowy — forma biegunowa zachowuje barwę jako stabilną oś, więc przeciąganie suwaka barwy nie przechodzi przypadkiem przez szarość. Zgodnie z pracą Björna Ottossona z 2020, jednorodność percepcyjna OKLAB to najsilniejszy argument za traktowaniem go jako lingua franca nowoczesnej matematyki kolorów.

Źródła macierzy (W3C CSS Color 4 + Ottosson 2020)

Każda macierz konwersji w kodzie ma cytowanie pierwotnego źródła. Fragmentaryczna funkcja gamma sRGB ↔ linear-sRGB pochodzi z W3C CSS Color 4 §11.2 (`v <= 0.04045 ? v/12.92 : ((v+0.055)/1.055)^2.4`). Macierz 3×3 linear-sRGB ↔ CIE XYZ D65 to CSS Color 4 §15.1. Macierz XYZ D65 ↔ LMS oraz krok pierwiastkowania sześciennego OKLAB pochodzą z referencyjnej implementacji Ottossona z `https://bottosson.github.io/posts/oklab/`, dokładnie tak jak opublikowane. Żadne macierze nie są ponownie liczone ani wyprowadzane — kopiowanie ich wprost utrzymuje wyjście identyczne z wektorami referencyjnymi specyfikacji.

Naiwny wzór CMYK i zastrzeżenie ICC

Nasze wyjście CMYK używa standardowego wzoru z podręczników: `K = 1 - max(R, G, B); C = (1-R-K)/(1-K); M = (1-G-K)/(1-K); Y = (1-B-K)/(1-K)`, operującego na znormalizowanych wartościach sRGB. To celowe przybliżenie. Prawdziwa dokładność druku wymaga konwersji przez profil ICC pod konkretną maszynę, farbę (np. US Web Coated SWOP v2, Fogra39, Japan Color 2011) i papier, co potrafi przesunąć kanały o 5–15%. Pole CMYK opatrzono widocznym zastrzeżeniem, aby użytkownicy nie wysyłali naszych wartości wprost na maszynę. Traktuj wyjście jak sanity check do wycen, a nie materiał produkcyjny.

Wykrywanie gamutu przez sprawdzenie zakresu kanałów

Kolor jest uważany za mieszczący się w gamucie docelowej przestrzeni (sRGB, Display P3, Rec2020), jeśli każdy kanał po konwersji do podstawowych tej przestrzeni mieści się w `[-ε, 1 + ε]`, gdzie `ε = 1e-7` pochłania szum precyzji float wokół granic. Plakietka gamutu każdej przestrzeni robi się czerwona, gdy dowolny kanał wychodzi poza zakres. To wyłapuje typowy przypadek — szerokogamutowy kolor OKLCH typu `oklch(0.7 0.4 30)` raportuje wyjście poza sRGB, ale wewnątrz P3, mówiąc ci, które wyświetlacze poprawnie go zrenderują. Sprawdzenie działa przy każdym naciśnięciu klawisza.

Algorytm dopasowania przez redukcję chromy

Dopasuj do sRGB używa wyszukiwania binarnego po osi chromy: utrzymuje L i H stałe przy bieżących wartościach, szuka C ∈ [0, currentC] dla największego C, którego konwersja sRGB pozostaje w gamucie. Wyszukiwanie wykonuje maksymalnie 30 iteracji (precyzja ~10⁻⁹), co z naddatkiem wystarcza do wizualnej dokładności. To pasuje do informacyjnego algorytmu mapowania gamutu opisanego w CSS Color 4 §13 — zachowanie jasności i barwy przy redukcji tylko chromy utrzymuje dopasowany kolor w rozpoznawalnie tej samej rodzinie barw. Nie przycinamy kanałów RGB bezpośrednio, ponieważ to wyraźnie zniekształca barwę (szczególnie w niebieskich).

Macierze CVD Brettela + Machado

Symulacja ślepoty barw używa dwóch opublikowanych rodzin macierzy. Trzy dichromacje — protanopia, deuteranopia, tritanopia — używają macierzy Brettela-Viénota-Mollona 1997 działających w linear-RGB (najpierw gamma-decode, potem macierz, potem ponowne gamma-encode). Trzy anomalne trichromacje — protanomalia, deuteranomalia, tritanomalia — używają macierzy Machado-Oliveiry-Fernandesa 2009 z natężeniem 0,66, co odpowiada typowemu pacjentowi z anomalną trichromacją. Achromatopsja i częściowa achromatomalia używają wag luminancji rec601 (`0.299R + 0.587G + 0.114B`) do projekcji w skali szarości. Wszystkie osiem symulacji renderuje się przy każdej zmianie koloru.

WCAG 2 a APCA: której używać i kiedy

WCAG 2.x (aktualny standard) liczy symetryczny współczynnik kontrastu z luminancji względnej: `(L1 + 0.05) / (L2 + 0.05)`, cel 4,5:1 dla zwykłego tekstu treści i 7:1 dla AAA. To prawny próg zgodności dla audytów dostępności w 2026. APCA (Accessible Perceptual Contrast Algorithm) to proponowany następca w WCAG 3 — wrażliwy na polaryzację (jasny-na-ciemnym ocenia inaczej niż ciemny-na-jasnym), lepiej skorelowany z postrzeganą czytelnością, cel `|Lc| ≥ 75` dla tekstu treści. Obie miary w jednym wierszu pozwalają projektantowi spełnić WCAG 2 dla zgodności i APCA dla realnej czytelności bez skakania między dwoma osobnymi kalkulatorami.

Najlepsze praktyki konwersji kolorów

Preferuj OKLCH dla tokenów systemu designu; HEX dla legacy

Dla każdego nowego systemu designu wydawanego w 2025 i później definiuj kolory marki oraz rampy palet w OKLCH. Oś L daje percepcyjnie równe rampy automatycznie; oś chromy potrafi adresować szerokogamutowe kolory, których HEX zakodować nie potrafi. Zachowaj fallback HEX dla starszych przeglądarek przez `@supports not (color: oklch(0 0 0))` albo PostCSS w build-time, ale niech OKLCH będzie wartością kanoniczną w magazynie tokenów. Starsze systemy z tysiącami istniejących zmiennych HEX mogą zostać przy HEX-ie do planowanej migracji — nie rusz dla samego ruszenia.

Traktuj wyjście CMYK jako przybliżenie i potwierdź z drukarnią

Liczby CMYK, które narzędzie pokazuje, to naiwny wzór oparty na sRGB, nie konwersja przez profil ICC. Używaj ich do orientacyjnych wycen i wewnętrznych kompozycji. Przed prawdziwym drukiem wyślij oryginalny HEX (nie przybliżenie CMYK) do drukarni i niech wykona własną konwersję ICC pod konkretną maszynę, farbę i papier. Przesunięcie kanałów o 5–15% z właściwej konwersji potrafi łatwo zmienić ostrą czerwień w błotnistą pomarańcz, jeśli przybliżenie zostanie wysłane wprost.

Używaj APCA Lc do dostępności perspektywicznej

WCAG 2.x pozostanie regulacyjnym progiem przez kilka kolejnych lat, ale APCA to kierunek, w którym idzie standard. Dla nowych designów osiągaj `|Lc| ≥ 75` dla tekstu treści i `|Lc| ≥ 60` dla dużego tekstu obok progów WCAG 2.1. APCA wyłapuje problemy z czytelnością, których symetryczny współczynnik WCAG 2 nie widzi — szczególnie cienki tekst na jasnym tle, gdzie współczynnik WCAG wygląda dobrze, ale tekst faktycznie znika w normalnej odległości czytania.

Przepuszczaj szerokogamutowe kolory przez sprawdzenie gamutu Display P3

Jeśli celujesz w nowoczesny sprzęt Apple (iPhone, iPad, MacBook od 2017+) albo wysyłasz treść świadomą HDR, definiuj kolory marki w OKLCH i używaj plakietki Display P3, aby zweryfikować, że mieszczą się w P3, nawet jeśli przekraczają sRGB. Szersze gamutowo kolory wyglądają zauważalnie bardziej nasycone na wyświetlaczach P3 i degradują się łagodnie przez kompresję chromy stosowaną przez przeglądarkę na ekranach tylko-sRGB. Nie dopasowuj zawczasu do sRGB, jeśli nie wiesz, że cała twoja publiczność jest na starszych wyświetlaczach.

Wybieraj percepcyjnie równe odcienie przez tony OKLCH

Gdy generujesz rampę 50/100/200/.../900 dla koloru marki, użyj panelu Tony: krokuje L o równe wielkości przy utrzymaniu stałych C i H. Wynik to percepcyjnie równa rampa, gdzie wizualny odstęp między 400 a 500 wygląda identycznie jak odstęp między 500 a 600. Ręczne dostrajanie rampy HSL pod tę samą równość to wielogodzinne zadanie na każdy kolor; OKLCH daje to za darmo.

Używaj kroplomierza oszczędnie do dopasowywania kolorów między kartami

API EyeDropper (tylko w Chromium od 2026) pozwala kliknąć dowolne miejsce na ekranie — także poza przeglądarką — aby pobrać kolor tego piksela. Przydatne do dopasowania koloru ze zrzutu ekranu, klatki filmu albo UI innej aplikacji. Traktuj wynik jako punkt wyjścia, nie wartość finalną — renderowanie ekranu stosuje zarządzanie kolorem, które może różnić się od pliku źródłowego. Dla kanonicznych kolorów marki zawsze pobieraj HEX ze źródła designu (Figma, Sketch, PDF z księgą znaku), a nie ze zrzutu ekranu.

Zakładkuj URL-e z `#hex=...` dla udostępnialnych decyzji o palecie

Bieżący kolor koduje się w hashu URL jako `#hex=...` albo `#oklch=...` automatycznie. Skopiuj URL, wklej w wątek Slacka albo zgłoszenie GitHub, a każdy, kto go otworzy, ląduje na dokładnie tym samym kolorze. Przydatne w wątkach design review, gdzie „niebieski marki” musi oznaczać jedną konkretną trójkę OKLCH. Hash aktualizuje się przy każdej zmianie, więc URL w pasku adresu to zawsze aktywny bieżący kolor — dodaj zakładkę, aby wrócić do konkretnej palety później.

Najczęściej zadawane pytania