Konwerter HEX do HSL

Przelicz kolory CSS między formatami: HEX (#FF5733), RGB (255,87,51), HSL (hsl(11,100%,60%)), HSV i OKLCH. Obustronnie. Kopiuj gotowy kod CSS. Bezpłatnie.

Bezpieczne (SSL)

Przetwarzanie Lokalne

100% Darmowe

Przejdź do narzędzia

Instrukcja

1

Wprowadź dane
Wpisz treść, wklej tekst lub załaduj plik z dysku.
2

Kliknij przycisk
Narzędzie natychmiast przetworzy Twoje dane w przeglądarce.
3

Pobierz wynik
Skopiuj gotowy tekst lub zapisz plik na urządzeniu.

                                                function runTool() {

                                                  return "Wynik gotowy w 0.1s";

                                                }

Ustawienia

Format

Precyzja

Kolor HEX

Użyj kanału alfa Opcja narzędzia

Ogranicz do zakresu Opcja narzędzia

Wynik

HEX

#3A86FF

rgb(58, 134, 255) — tak czyta go silnik

H — odcień

216,9 °

kąt na kole barw: 0° czerwony, 120° zielony, 240° niebieski

S — nasycenie

100,0 %

0% to czysta szarość, 100% pełnia koloru

L — jasność

61,4 %

0% czarny, 50% kolor, 100% biały

hsl(217, 100%, 61%)

Ściąga: HEX → RGB → HSL — przykłady liczone silnikiem narzędzia

Format CSS, precyzja 0 miejsc — te same wiersze oblicza silnik konwertera; #FF0000 to czysta czerwień hsl(0, 100%, 50%)
HEX	RGB	HSL
#FF0000	rgb(255, 0, 0)	hsl(0, 100%, 50%)
#4285F4	rgb(66, 133, 244)	hsl(217, 89%, 61%)
#3A86FF	rgb(58, 134, 255)	hsl(217, 100%, 61%)
#22C55E	rgb(34, 197, 94)	hsl(142, 71%, 45%)

Ściąga: wzór konwersji hex→rgb→hsl — krok po kroku z kodu silnika

parseHex() dekoduje pary szesnastkowe, rgbToHsl() liczy H/S/L z maksimum, minimum i delty składowych
Krok / wzór	Co się dzieje
#F00 → #FF0000	skrócony zapis 3 lub 4 cyfr jest rozszerzany — każda cyfra jest podwajana
FF → 255	pary cyfr szesnastkowych dekodowane na składowe R, G, B w zakresie 0–255
r = R/255, g = G/255, b = B/255	składowe normalizowane do zakresu 0–1
L = (max + min) / 2	jasność to średnia największej i najmniejszej składowej; wynik × 100%
Δ = max − min; S = Δ / (1 − \|2L − 1\|)	nasycenie z delty; przy Δ = 0 (szarość) S = 0; wynik × 100%
max = R → H = 60 × ((g − b) / Δ mod 6)	odcień liczony względem składowej o wartości maksymalnej
max = G → H = 60 × ((b − r) / Δ + 2)	drugi przypadek — maksimum to zieleń
max = B → H = 60 × ((r − g) / Δ + 4)	trzeci przypadek — maksimum to niebieski; ujemny H zwiększany o 360°
hsl(H, S%, L%)	wynik: H w stopniach 0–360, S i L jako procenty 0–100

HSL jest bardziej intuicyjny niż HEX: zmieniasz odcień (kąt 0–360°), nasycenie i jasność osobno — np. ciemniejszy wariant koloru to ta sama wartość H i S przy mniejszym L.

Warto wiedzieć — HEX i HSL w praktyce

Trzy pokrętła zamiast jednego kodu

HEX zapisuje kolor jako trzy bajty, z których trudno coś odczytać. HSL rozdziela odcień (H, kąt 0–360°), nasycenie (S, 0–100%) i jasność (L, 0–100%) — widać od razu, że #4285F4 to hsl(217°, 89%, 61%): niebieski, nasycony, średnio jasny.

Palety i stany interfejsu

W HSL warianty koloru robi się jednym pokrętłem: hover/przygaszenie to L −10 p.p., tło karty to S −60 p.p., kolor uzupełniający to H +180°. W HEX każda taka zmiana to nowe zgadywanie trzech bajtów.

Przezroczystość: #RRGGBBAA

Ośmiocyfrowy HEX niesie kanał alfa — silnik przelicza go na liczbę 0–1 i przy włączonej opcji zwraca hsla(H, S%, L%, A). Przy wyłączonej opcji alfa jest pomijana, o czym narzędzie informuje w wyniku.

Precyzja i zaokrąglenia

Wynik można zaokrąglić do 0–2 miejsc (precyzja 0 daje liczby całkowite — w CSS zwykle wystarcza). Opcja „ogranicz do zakresu” pilnuje, by H było w 0–360°, a S/L w 0–100%, więc wartość zawsze da się wkleić do arkusza stylów.

Oceń to narzędzie:

Powiązane narzędzia

Inne narzędzia, które mogą Ci się przydać

Konwerter HEX ↔ HSL ↔ RGB ↔ OKLCH – wszystkie formaty kolorów CSS

Różne systemy kolorów CSS mają różne zastosowania: HEX jest popularny w designie, RGB potrzebny do nakładania przezroczystości, HSL intuicyjny przy modyfikacji jasności/nasycenia, OKLCH optymalny do generowania palet. Narzędzie konwertuje między wszystkimi formatami natychmiastowo.

konwerter HEX na HSL HEX RGB HSL konwerter przelicz kolor CSS color format converter

Formaty kolorów CSS

HEX: #RRGGBB lub #RGB (skrót). Nowy: #RRGGBBAA (z alpha). RGB: rgb(R, G, B) lub rgba(R, G, B, A). HSL: hsl(H, S%, L%) – odcień 0-360°, nasycenie 0-100%, jasność 0-100%. OKLCH: oklch(L C H) – perceptualnie jednolity, CSS Level 4. HSV/HSB: używany w Photoshop i Figma. CMYK: druk (informacyjny – nie CSS native).

Matematyka konwersji HEX → RGB

HEX to pary cyfr szesnastkowych: #FF8C00 → R=0xFF=255, G=0x8C=140, B=0x00=0. JavaScript: parseInt("FF",16) = 255. Odwrotnie: (255).toString(16).padStart(2,"0") = "ff". Skrócony HEX (#RGB): każda cyfra powtórzona → #FAB = #FFAABB.

RGB → HSL – wzór

1. Normalizuj R,G,B do 0-1. 2. max = Math.max(r,g,b), min = Math.min(r,g,b). 3. L = (max+min)/2. 4. S: jeśli max==min → S=0 (szarość). Inaczej: S = (max-min)/(1-|2L-1|). 5. H: zależy od który kanał jest max. Wynik: hsl(H*60°, S*100%, L*100%).

Kiedy używać którego formatu

HEX: definicje kolorów w design systemach, komunikacja z projektantami. RGB(A): nakładanie kolorów z opacity, operacje matematyczne w JS. HSL: modyfikowanie odcienia, generowanie odcieni tło (np. hsl(220, 90%, 95%) = bardzo jasny niebieski). OKLCH (CSS 2024): palety, ciemny motyw, zapewnia perceptualną spójność.

Jak działa konwersja HEX na HSL

HEX nie jest osobnym modelem koloru, tylko zapisem trzech liczb w systemie szesnastkowym. Przeliczenie na HSL to więc dwie osobne operacje: rozbicie zapisu na składowe RGB, a następnie przekształcenie trójki RGB w walcowy układ barw, w którym kolor opisują kąt odcienia, nasycenie i jasność. Całość sprowadza się do porównania trzech liczb i kilku działań arytmetycznych - nie ma tu dopasowywania kolorów na oko ani tablic z gotowymi wartościami.

Geometrycznie HSL to podwójny stożek: pionowa oś to jasność od czerni (L = 0%) do bieli (L = 100%), a wokół niej biegnie okrąg odcieni o pełnym zakresie 0-360 stopni. Sześć kolorów wzorcowych leży na tym okręgu co 60 stopni: czerwony na 0, żółty na 60, zielony na 120, cyjan na 180, niebieski na 240, magenta na 300. Dzięki temu algorytm wie z góry, w którym sektorze sześciokąta leży wynikowa barwa - wyznacza go ten kanał RGB, który ma największą wartość.

Nasycenie w HSL nie oznacza ilości koloru, a odległość od szarej osi wyrażoną jako ułamek odległości maksymalnej możliwej przy danej jasności. Stąd w mianowniku wzoru pojawia się wyrażenie 1 - |2L - 1|: przy L = 50% możliwa odległość jest największa, a przy L zbliżonym do 0% lub 100% coraz mniejsza. Praktyczna konsekwencja jest taka, że kolor, którego największy kanał wynosi 255, zawsze otrzyma nasycenie 100% - powyżej połowy jasności nie ma już miejsca na większą odległość od szarości.

Przykład: ile wynosi HSL dla koloru #1E90FF

Rozbijamy zapis na trzy pary znaków: 1E, 90, FF. Każdą parę czytamy jako liczbę szesnastkową: 1E = 30, 90 = 144, FF = 255. Mamy trójkę RGB (30, 144, 255).
Szukamy wartości największej i najmniejszej: max = 255 (kanał B), min = 30 (kanał R). Różnica, czyli chroma, wynosi 255 - 30 = 225.
Jasność to środek przedziału: L = (255 + 30) / 2 / 255 = 142,5 / 255 = 0,5588, czyli 55,88% - po zaokrągleniu 56%.
Nasycenie: chroma znormalizowana = 225 / 255 = 0,8824, a dzielnik 1 - |2 * 0,5588 - 1| = 1 - 0,1176 = 0,8824. Dzieląc jedno przez drugie otrzymujemy S = 1, czyli 100%.
Odcień: dominuje kanał niebieski, więc kolor leży w sektorze 240 stopni. H = 60 * (4 + (R - G) / chroma) = 60 * (4 + (0,1176 - 0,5647) / 0,8824) = 60 * (4 - 0,5067) = 209,6 stopnia, po zaokrągleniu 210.
Wynik to hsl(210, 100%, 56%). Przeliczenie zwrotne z zaokrąglonymi wartościami daje #1F8FFF - różnica jednego poziomu na kanałach R i G to skutek zaokrąglenia 209,6 do 210 stopni oraz 55,88% do 56%, a nie błąd przelicznika.

Tabela odniesienia: sektory odcienia w HSL

Kąt H	Kolor wzorcowy (HEX)	Zapis HSL
0	#FF0000	hsl(0, 100%, 50%)
60	#FFFF00	hsl(60, 100%, 50%)
120	#00FF00	hsl(120, 100%, 50%)
180	#00FFFF	hsl(180, 100%, 50%)
240	#0000FF	hsl(240, 100%, 50%)
300	#FF00FF	hsl(300, 100%, 50%)
360	#FF0000	hsl(360, 100%, 50%)

Praktyczne wskazówki przy pracy z HSL

Przesuwaj odcień małymi krokami - pełny obrót to 360 stopni, więc różnica kilkunastu stopni w obrębie jednego sektora daje już wyraźnie inny kolor. Do budowy palety wystarczą skoki rzędu 15-30 stopni, a nie przeskakiwanie o 100.
Nie myl nasycenia i jasności z HSB/HSV - w HSL wartość L = 100% to zawsze biały, niezależnie od odcienia i nasycenia, a w HSB/HSV V = 100% oznacza kolor maksymalnie czysty. Mimo podobnych nazw pól oba zapisy liczą jasność inaczej, więc nie są wymienne.
Alfę dopisuj po ukośniku - przezroczystość w nowszej składni CSS podaje się jako czwartą wartość, na przykład hsl(210 100% 56% / 0,4). Dla starszych przeglądarek pozostaje rgba() albo zapis HEX8.
Nie pomijaj znaku procentu, jeśli piszesz pod stare parsery - klasyczna składnia wymaga przecinków oraz procentów przy nasyceniu i jasności. Nowsza wersja CSS dopuszcza spacje i liczby w miejscu procentów, ale nie wszędzie jest jeszcze bezpieczna.
HSL traktuj jako format roboczy, nie archiwalny - świetnie nadaje się do programowego generowania stanów hover czy wariantów motywu, natomiast gdy kolor musi zgadzać się co do jednego poziomu z plikiem od projektanta, wygodniej zachować oryginalny HEX.

Ograniczenia i pułapki przelicznika

Zaokrąglanie wyniku - praktyczny zapis HSL podaje odcień w pełnych stopniach, a nasycenie i jasność w pełnych procentach. Po powrocie do HEX pojedynczy kanał może przesunąć się o jeden poziom, co widać w przykładzie powyżej.
Tylko przestrzeń sRGB - HEX, RGB i HSL opisują kolor w sRGB. Narzędzie nie uwzględnia profilu kolorystycznego pliku ani szerszego gamutu, więc ten sam zapis na ekranie o innym pokryciu barw może wyglądać inaczej.
Brak kanału alfa w klasycznym HEX - sześcioznakowy zapis nie niesie informacji o przezroczystości. Jeśli źródłem jest HEX8, kanał alfa trzeba przenieść do HSL ręcznie, po ukośniku.
HSL nie jest perceptualnie jednorodny - identyczna różnica jasności między dwoma odcieniami nie daje tak samo odczuwalnej zmiany. Ten sam krok L na żółtym i na niebieskim wygląda inaczej, dlatego do palet o przewidywalnej jasności stosuje się inne przestrzenie.

Najczęstsze pytania

Co to jest oklch() i czym różni się od hsl()?

OKLCH (Lightness, Chroma, Hue): perceptualnie jednolity – zmiana L o 10 zawsze wygląda tak samo, niezależnie od koloru. HSL nie jest percepcyjnie jednolity – żółty o L=50% wygląda jaśniej niż fioletowy o L=50%. OKLCH jest rekomendowany do generowania palet i gradientów w CSS 2024.

Czy HEX może mieć kanał alpha (przezroczystość)?

Tak, #RRGGBBAA: np. #FF5733CC = pomarańczowy z 80% nieprzezroczystością (CC hex = 204/255 ≈ 0.8). Wsparcie: Chrome 62+, Firefox 49+, Safari 10+. IE: nie obsługuje. Alternatywa: rgba(255, 87, 51, 0.8).

Jak zmienić jasność koloru HSL w CSS?

hsl(220, 90%, 50%) – baza. Jaśniejszy: hsl(220, 90%, 70%). Ciemniejszy: hsl(220, 90%, 30%). W CSS variables: --color-base: 220, 90%; → color: hsl(var(--color-base), 50%). Pattern pozwala na łatwe generowanie wariantów w tym samym odcieniu.

Jak obliczyć kolor dopełniający (complementary) przez HSL?

Kolor dopełniający: H + 180° (mod 360). #FF5733 → HSL(11°, 100%, 60%) → dopełniający: H=191° → hsl(191, 100%, 60%) = cyjanowy. Triadyczne: H+120° i H+240°. Analogiczne: H±30°. Narzędzie automatycznie pokazuje dopełniające i inne harmonijne kolory.

Ile kolorów można reprezentować w HEX?

#RRGGBB: 256³ = 16 777 216 kolorów (16.7M). #RRGGBBAA: 256⁴ = 4 294 967 296 (4.3B z przezroczystością). Monitor sRGB: faktycznie wyświetla ok. 16.7M. Monitor P3 (szeroka gama): 68% więcej kolorów niż sRGB – CSS color(display-p3 ...) obsługuje je.

Jak ręcznie zamienić HEX na HSL?

Rozbij zapis na trzy pary cyfr i zamień je na liczby dziesiętne. Z trójki RGB wylicz maksimum i minimum: ich średnia daje jasność, różnica po znormalizowaniu nasycenie, a kanał o największej wartości wskazuje sektor odcienia, którego szerokość wynosi 60 stopni.

Czy HSL i HSB to to samo?

Nie. Oba formaty mają kąt odcienia, ale inaczej liczą jasność: w HSL L = 100% to zawsze biały, a w HSB/HSV V = 100% to kolor w pełni nasycony. HSB/HSV spotkasz w Photoshopie i Figmie, natomiast HSL jest natywnym formatem CSS.

Czy HSL obsługuje przezroczystość?

Tak, w CSS alfa jest czwartą wartością zapisywaną po ukośniku, na przykład hsl(210 100% 56% / 0,4). Zwykły zapis z trzema parametrami nie ma kanału alfa, więc jeśli kolor pochodzi z HEX8, trzeba go dopisać osobno.

Dlaczego po przeliczeniu z HSL z powrotem na HEX kolor się różni?

To skutek zaokrągleń. Odcień podaje się zwykle w pełnych stopniach, a nasycenie i jasność w pełnych procentach, więc wynik zwrotny może różnić się od oryginału o jeden poziom na pojedynczym kanale. Zapisz więcej miejsc po przecinku, jeśli potrzebujesz dokładnego powrotu.

Co oznacza S = 0% w HSL?

Oznacza kolor szary - przy zerowym nasyceniu wszystkie trzy kanały RGB mają tę samą wartość, a kąt odcienia nie wpływa na wynik. Wartość L decyduje wtedy tylko o tym, czy jest to szary ciemny, średni, czy jasny.

Powiązane narzędzia: generator nazw kolorów, blender kolorów HEX i sprawdzanie kontrastu kolorów.