Konwerter kolorów

Zaktualizowano: 4 października 2026

Wpisz nazwę koloru CSS lub jego kod, aby zobaczyć wartości RGB, HEX, HSL, HWB, CMYK i NCol wraz z podglądem koloru.

Konwerter kolorów HEX ⇄ RGB ⇄ HSL

Wzór konwertera kolorów

Wzór

\[R=16h_1+h_2,\qquad G=16h_3+h_4,\qquad B=16h_5+h_6\]

Gdzie:

\(h_1,\ldots,h_6\) — sześć cyfr koloru HEX, odczytanych jako wartości od 0 do 15; litery od A do F oznaczają liczby od 10 do 15.
\(R\), \(G\) i \(B\) — wartości kanałów czerwonego, zielonego i niebieskiego, każda od 0 do 255.

Ten wzór zamienia sześciocyfrowy kolor HEX na RGB. Kalkulator akceptuje również inne obsługiwane formaty kolorów i dokonuje między nimi konwersji.

Konwerter kolorów – przykład obliczeń

Przykład: domyślnie wprowadzoną wartością jest skyblue. Ten nazwany kolor odpowiada wartości #87CEEB, więc jego pary cyfr HEX można przekształcić na RGB.

\[R=8(16)+7=135,\qquad G=12(16)+14=206,\qquad B=14(16)+11=235\]

Wynik: kolor skyblue ma wartość HEX #87CEEB i wartość RGB rgb(135, 206, 235). Jego wartości HSL to w przybliżeniu odcień 197°, nasycenie 71% i jasność 73%.

Jak korzystać z konwertera kolorów

Wpisz kolor w polu Kolor. Możesz zacząć od domyślnego skyblue, wpisać nazwę koloru CSS, np. red, albo podać kod, taki jak #f00 lub rgb(255,0,0).
Sprawdź wynik w polu Kolor, aby zobaczyć wizualny podgląd zinterpretowanej wartości.
Skopiuj potrzebny format spośród Nazwa, RGB, HEX, HSL, HWB, CMYK lub NCol.

Jeśli w polu Nazwa pojawi się „brak nazwy”, oznacza to, że kolor nie ma odpowiednika na liście nazwanych kolorów w konwerterze. Wyniki liczbowe nadal mogą opisywać poprawny kolor.

Co oznaczają formaty kolorów

Kolor cyfrowy można opisać na kilka sposobów bez zmiany jego wyglądu. HEX zapisuje czerwień, zieleń i niebieski jako pary cyfr szesnastkowych: #87CEEB oznacza czerwień 87, zieleń CE i niebieski EB w systemie o podstawie 16. RGB wyraża te same kanały jako liczby dziesiętne od 0 do 255. Jeśli chcesz osobno przećwiczyć arytmetykę w systemie szesnastkowym, skorzystaj z Konwertera HEX; on zamienia liczby, a nie pełne wartości kolorów CSS.

HSL opisuje odcień, nasycenie i jasność. Odcień to pozycja na kole barw, zwykle wyrażana w stopniach; nasycenie określa intensywność koloru, a jasność zmienia się od czerni w kierunku bieli. HWB używa zamiast tego odcienia, bieli i czerni. Te formaty mogą być łatwiejsze do odczytania, gdy porównujesz odcienie lub dopasowujesz kolor „na oko”. RGB i HEX są często wygodniejsze, gdy specyfikacja wymaga dokładnych wartości kanałów.

CMYK podaje wartości cyjanu, magenty, żółci i czerni wyliczone na podstawie koloru ekranowego. NCol to notacja oparta na odcieniu, obsługiwana przez ten konwerter; w CSS nie jest tak powszechnie używana jak HEX, RGB czy HSL. Format wyjściowy zmienia sposób zapisu koloru, a nie sam wybrany kolor. Niewielkie różnice w wyświetlanych procentach mogą wynikać z zaokrągleń.

Ograniczenia praktyczne i wskazówki

Konwerter wymaga danych wejściowych, które rozpoznaje jego parser kolorów. Standardowe nazwy kolorów CSS i popularne kody kolorów w stylu CSS to dobry punkt wyjścia. Trzycyfrowy kod HEX to zapis skrócony: np. #f00 rozwija się do #ff0000. W zapisie HEX wielkość liter nie ma znaczenia, więc #87ceeb i #87CEEB oznaczają ten sam kolor.

Niektóre dane wejściowe zawierają wartość alfa, która steruje przezroczystością. Dla rozpoznanych danych z alfą wyniki RGB, HSL, HWB i NCol przyjmują formy z alfą. Sprawdź każdy wynik przed skopiowaniem go do innej aplikacji: nie każdy z wymienionych formatów opisuje przezroczystość w ten sam sposób. Podgląd może też wyglądać inaczej na innym tle, gdy kolor jest częściowo przezroczysty.

CMYK w tym kalkulatorze to konwersja matematyczna z koloru cyfrowego, a nie konwersja według profilu drukarskiego. Wygląd wydruku zależy od drukarki, tuszów, papieru i ustawień zarządzania kolorem, więc gdy liczy się dokładny kolor produkcyjny, użyj odpowiedniego procesu przygotowania do druku. Podobnie wygląd koloru na ekranie zależy od monitora i jego ustawień; same zgodne wartości liczbowe nie gwarantują identycznego wyglądu na każdym urządzeniu.

Jeśli umieszczasz kolor HEX w parametrze zapytania w adresie URL, pamiętaj, że znak # ma w adresach URL specjalne znaczenie. W razie potrzeby zakoduj tę wartość za pomocą Kodera URL.

Najczęściej zadawane pytania

Jak ręcznie zamienić RGB na HEX?

Zamień każdy kanał RGB z systemu dziesiętnego na dwie cyfry szesnastkowe, a następnie połącz trzy pary po znaku #. Podziel wartość kanału przez 16: część całkowita ilorazu to pierwsza cyfra, a reszta to druga. Na przykład liczba 206 daje iloraz 12 (C) i resztę 14 (E), więc staje się CE. Wartość poniżej 16 wymaga zera wiodącego, np. 9 staje się 09.

Jak obliczyć HSL na podstawie RGB?

Najpierw podziel każdy kanał RGB przez 255, następnie znajdź największą wartość \(M\) i najmniejszą \(m\). Jasność to \(L=(M+m)/2\). Jeśli \(M=m\), nasycenie wynosi zero, a odcień nie ma sensownej wartości. W przeciwnym razie nasycenie to \((M-m)/(1-|2L-1|)\); odcień zależy od tego, który kanał jest największy. Na przykład czysta czerwień, rgb(255, 0, 0), to hsl(0, 100%, 50%).

Jaki jest dobry współczynnik kontrastu dla tekstu i tła?

Dla typowych kryteriów WCAG 2.2 na poziomie AA dąż do co najmniej 4,5:1 dla zwykłego tekstu i 3:1 dla dużego tekstu. Poziomy AAA to odpowiednio 7:1 i 4,5:1. Sam konwerter kolorów nie powie Ci, czy dana para spełnia te kryteria: kontrast zależy od obu kolorów. Sprawdzaj rzeczywisty kolor tekstu i tła razem, włącznie z tłem widocznym pod przezroczystymi kolorami.

Dlaczego kolor szary ma wartość odcienia?

Odcień jest matematycznie nieokreślony, gdy kolor nie ma nasycenia, jak przy wartościach RGB, w których wszystkie trzy kanały są równe. Konwerter może wyświetlać zastępczy odcień, często 0°, aby zachować pełną notację HSL lub HWB. Ta liczba nie sprawia, że szary robi się czerwonawy. Gdy nasycenie zbliża się do zera, niewielkie zmiany kanałów mogą też powodować duże zmiany podawanego odcienia przy znikomej widocznej różnicy.

Czy wartość alfa zmienia kanały RGB koloru?

Alfa określa, ile koloru widać na tle; sama w sobie nie zmienia zapisanych kanałów RGB koloru. Wartość alfa 0 oznacza pełną przezroczystość, a 1 — pełną nieprzezroczystość. Widoczny wynik zależy od tła: dla każdego kanału wyświetlana wartość to w przybliżeniu \(\alpha\times\text{kolor pierwszego planu}+(1-\alpha)\times\text{tło}\). Przezroczysta czerwień może więc wyglądać na różową na białym tle.

Dlaczego kolor może się nieznacznie zmienić po konwersji tam i z powrotem?

Konwersje mogą wprowadzać zaokrąglenia. Kanały RGB są zwykle przechowywane jako liczby całkowite od 0 do 255, natomiast HSL i inne formaty mogą pokazywać zaokrąglone stopnie lub procenty. Ponowne wprowadzenie tych zaokrąglonych wyników może dać nieco inne wartości RGB. Aby zachować dokładny kolor RGB podczas edycji i kopiowania, trzymaj się jego pierwotnej wartości RGB lub sześciocyfrowej wartości HEX zamiast polegać na zaokrąglonych wynikach pośrednich.