Konwerter przyjmuje każdy zapis hex zgodny z CSS: 6-cyfrowy #3366cc, skrócony 3-cyfrowy #36c, a także 4- i 8-cyfrowy z kanałem alfa, z krzyżykiem # lub bez niego. Pokazuje ciąg hsl() lub hsla(), same wartości i rozbicie na poszczególne składowe - a do tego wiersz odwrotny HSL na HEX, gdy potrzebujesz zamiany w drugą stronę. Wszystko działa w przeglądarce - bez wysyłania danych, bez konta, bez limitów.
Konwerter HEX na HSL
Działa w całości w przeglądarce - bez wysyłania plików i bez rejestracji.
CSS
hsl(220, 60%, 50%)Jak to się przelicza
Hue220
Saturation60%
Lightness50%
Potrzebujesz odwrotności? HSL na HEX
#3366ccJak zamienić HEX na HSL?
Najpierw odczytaj kod hex jako czerwony, zielony i niebieski (0-255), a potem zapisz ten sam kolor jako hue, saturation i lightness. Hue to kąt na kole barw (0-360), saturation określa, jak nasycony jest kolor (0-100%), a lightness, jak jasny (0-100%). #3366cc staje się hsl(220, 60%, 50%). Ten konwerter robi to od razu podczas pisania.
Jak korzystać
- 1Wpisz kod hex. Wpisz lub wklej kolor hex, np. #3366cc (albo #36c), albo wybierz go próbnikiem koloru. Krzyżyk # jest opcjonalny.
- 2Odczytaj wartość HSL. Ciąg hsl(), zwykłe wartości i podgląd koloru na żywo aktualizują się podczas pisania, a rozbicie na składowe pokazuje osobno hue, saturation i lightness.
- 3Skopiuj format, którego potrzebujesz. Kliknij Copy przy ciągu hsl() albo przy surowych wartościach. Potrzebujesz odwrotności? Wpisz poniżej hue, saturation i lightness, żeby otrzymać z powrotem kod hex.
Dla kogo
- Front-end developerzy zamieniają kod hex na hsl(), żeby dostroić lightness przy stanach hover i focus bez wybierania zupełnie nowego koloru.
- Projektanci budujący palety zostawiają hue bez zmian i stopniują saturation oraz lightness, żeby z jednego koloru marki uzyskać jaśniejsze i ciemniejsze warianty.
- Autorzy motywów i design tokenów zapisują kolory jako HSL, bo dużo łatwiej odczytać i poprawić ręcznie niż ciąg hex.
- Każdy, kto dopasowuje kolory między narzędziami, z których jedno przyjmuje hex (Figma, większość CSS), a drugie wymaga HSL (helpery SCSS, niektóre systemy kolorów).
Najczęstsze pytania
Czy ten konwerter HEX na HSL jest darmowy?
Tak - jest w 100% darmowy, bez rejestracji i bez limitów. Działa całkowicie w przeglądarce.
Czy moje kolory są gdzieś wysyłane?
Nie. Konwersja to zwykły JavaScript uruchamiany na twoim urządzeniu - nic nie trafia na serwer, a narzędzie działa dalej offline po wczytaniu strony.
Co oznacza HSL?
HSL to hue, saturation i lightness. Hue to kąt od 0 do 360 stopni na kole barw, saturation określa, jak nasycony jest kolor, od 0 do 100 procent, a lightness biegnie od 0 procent (czerń) przez czysty kolor przy 50 procentach do 100 procent (biel).
Jak samodzielnie zamienić hex na HSL?
Zamień hex na czerwony, zielony i niebieski, a każdą wartość podziel przez 255. Weź maksimum i minimum z tych trzech liczb: lightness to ich średnia, saturation to (max - min) podzielone przez (1 - |2L - 1|), a hue wynika z tego, który kanał jest największy, przeskalowanego do 0-360 stopni.
Czy obsługiwany jest skrócony zapis jak #36c?
Tak. W skrócie CSS każda cyfra jest podwajana, więc #36c rozwija się do #3366cc i daje hsl(220, 60%, 50%). Zapis 4-cyfrowy działa tak samo, z ostatnią cyfrą jako alfa.
Jak konwerter obsługuje przezroczystość (HSLA)?
8-cyfrowy kod hex niesie kanał alfa w ostatniej parze. Ten bajt (0-255) dzieli się przez 255, żeby uzyskać wartość alfa 0-1 oczekiwaną przez hsla(), zaokrągloną do trzech miejsc - tak #3366cc80 staje się hsla(220, 60%, 50%, 0.502).
Czy można zamienić HSL z powrotem na HEX?
Tak. Użyj wiersza HSL na HEX pod wynikiem: wpisz hue (0-360) oraz saturation i lightness (0-100%), a kod hex pojawi się natychmiast. Wartości spoza zakresu są przycinane.
Po co mi HSL, skoro mam hex?
HSL jest czytelny dla człowieka: możesz rozjaśnić kolor, podnosząc L, przygasić go, obniżając S, albo zmienić jego rodzinę barwną, zmieniając H - bez zgadywania cyfr hex. Dzięki temu świetnie nadaje się do budowania spójnych palet, stanów hover i design tokenów.