Konwerter HEX na HSL

Czym jest konwerter HEX na HSL?

// Convert a hex color string to {h, s, l, alpha} per CSS Color 4 §6.4
// h in 0-360, s and l in 0-1, alpha in 0-1.
function hexToHsl(input) {
  let h = input.trim().replace(/^#/, '');
  if (h.length === 3 || h.length === 4) h = h.split('').map(c => c + c).join('');
  const r = parseInt(h.slice(0, 2), 16) / 255;
  const g = parseInt(h.slice(2, 4), 16) / 255;
  const b = parseInt(h.slice(4, 6), 16) / 255;
  const alpha = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
  const max = Math.max(r, g, b), min = Math.min(r, g, b), delta = max - min;
  const L = (max + min) / 2;
  const S = delta === 0 ? 0 : delta / (1 - Math.abs(2 * L - 1));
  let H = 0;
  if (delta !== 0) {
    if (max === r) H = ((g - b) / delta) % 6;
    else if (max === g) H = (b - r) / delta + 2;
    else H = (r - g) / delta + 4;
    H = (H * 60 + 360) % 360;
  }
  return { h: H, s: S, l: L, alpha };
}

console.log(hexToHsl('#3b82f6')); // { h: 217, s: 0.91, l: 0.60, alpha: 1 }

Kluczowe funkcje

Alternatywy dla konwertera HEX na HSL

Przykłady konwersji HEX na HSL

#3b82f6

#FF5733

#3b82f6

#FF573380

Najczęstsze konwersje HEX → HSL

Tabela referencyjna 10 najczęściej konwertowanych kodów HEX i ich odpowiedników HSL — czyste podstawowe, czyste wtórne oraz dwa rzeczywiste kolory marki z palety Tailwind.

Jak korzystać z konwertera HEX na HSL

1. 1

   Wklej kod HEX w pole HEX

   Wrzuć dowolną wartość HEX do pola HEX — z `#` na początku albo bez, w 3-cyfrowym skrócie (`#F73`), 6-cyfrowej formie pełnej (`#3b82f6`), 4-cyfrowym skrócie z kanałem alfa (`#F738`) albo 8-cyfrowej formie pełnej z kanałem alfa (`#FF573380`). Narzędzie normalizuje wszystkie pięć kształtów wejściowych do tego samego kanonicznego koloru wewnętrznie. Wielkość liter nie ma znaczenia (`#3b82f6` i `#3B82F6` parsują się identycznie). Nieprawidłowe znaki lub zła liczba cyfr powodują cichy błąd inline; prawidłowy HEX aktualizuje każde inne pole formatu w czasie rzeczywistym, łącznie z HSL.

2. 2

   Odczytaj trójkę HSL z pola HSL

   Pole HSL poniżej pola HEX pokazuje odpowiadającą wartość `hsl()` w nowoczesnej składni z rozdziałem spacjami z CSS Color 4: `hsl(217 91% 60%)` dla koloru nieprzezroczystego, `hsl(217 91% 60% / 0.5)` dla koloru z kanałem alfa. Barwa to liczba całkowita stopni od 0 do 360; nasycenie i jasność to liczby całkowite procentów od 0 do 100. Wartości są zaokrąglone dla czytelności wyświetlania — wewnętrzne źródło prawdy w OKLCH oznacza, że bazowa precyzja jest zmiennoprzecinkowa, więc konwersje w obie strony z powrotem do HEX pozostają stabilne.

3. 3

   Kliknij Kopiuj, aby pobrać ciąg HSL

   Każda karta formatu ma po prawej stronie przycisk Kopiuj. Jedno kliknięcie i wartość ląduje w schowku — etykieta przycisku miga na chwilę „Skopiowano!”, więc wiesz, że się udało. Skopiowany ciąg to kanoniczna składnia CSS Color 4 (`hsl(217 91% 60%)`); jeśli twój cel wymaga starszej formy z przecinkami (`hsl(217, 91%, 60%)`), konwersja jest mechaniczna. Dla wyjścia pod konkretną platformę (Tailwind v4, SwiftUI, Compose, Flutter) użyj sekcji Skopiuj jako kod pod selektorem — te fragmenty emitują format, którego natywnie oczekuje każda platforma.

4. 4

   Również widoczne: RGB, OKLCH, OKLAB, HSV, HWB, CMYK, nazwany kolor

   Ten sam HEX, który wklejasz, rozświetla też pozostałe pola formatów — RGB dla wywołań canvasu i sprzętu, OKLCH i OKLAB dla percepcyjnie jednorodnych systemów designu, HSV i HWB dla projektantów korzystających z selektorów kolorów, CMYK do oszacowań druku oraz najbliższy nazwany kolor CSS do tekstów dokumentacji. Nigdy nie jesteś zamknięty tylko w HEX → HSL. Jeśli potrzebujesz także trójki OKLCH do bloku `@theme` Tailwind v4 (gdzie jasność percepcyjna ma większe znaczenie niż gammowo-dziwaczne L w HSL), jest ona od razu w polu OKLCH z własnym przyciskiem Kopiuj.

5. 5

   Użyj selektora, aby wizualnie zmiatać jasnością

   Pod siatką formatów znajduje się kwadrat SL + suwak barwy + suwak kanału alfa do eksploracji wizualnej. Kwadrat SL mapuje się bezpośrednio na płaszczyznę Saturation × Lightness w HSL: przeciągnij pionowo, aby przejść L od 0% do 100%, obserwując, jak pole HSL aktualizuje się w czasie rzeczywistym. Przydatne do wizualnego generowania jaśniejszego lub ciemniejszego odcienia, zanim zablokuje się dokładny procent. W przeglądarkach opartych na Chromium (Chrome, Edge, Brave) przycisk EyeDropper aktywuje natywne API `EyeDropper` do próbkowania dowolnego piksela na ekranie, także poza oknem przeglądarki.

Częste błędy HEX / HSL

Sweep HSL L for a 9-step palette:
hsl(120 100% 50%) and hsl(240 100% 50%) at the same L
Look visibly different in brightness — palette feels uneven.

Sweep OKLCH L instead:
oklch(0.7 0.2 130) and oklch(0.7 0.2 250)
Look equally bright; palette reads coherent across all hues.

Linear interpolation from H=350 to H=10:
(350 + 10) / 2 = 180° (cyan midpoint)
Wrong — goes the long way around the wheel.

Short-path hue interpolation:
midpoint = ((350 + 10 + 360) / 2) % 360 = 0° (red midpoint)
Goes through red, the short path around the wheel.

Paste HSV values from Photoshop into a CSS hsl() rule:
Photoshop HSB 0, 100, 100 (pure red)
CSS hsl(0 100% 100%) renders as white — wrong color entirely.

Convert HSV → HSL before pasting into CSS:
HSV 0, 100, 100 → HSL 0, 100%, 50%
CSS hsl(0 100% 50%) renders as pure red — correct.

Emit HSL without percent signs:
hsl(217 91 60)
CSS parse error — every browser ignores the entire rule.

Emit HSL with percent signs on S and L:
hsl(217 91% 60%)
Valid CSS — works in every evergreen browser and IE 9+.

Kto korzysta z HEX na HSL

Frontendowcy definiujący zmienne CSS w HSL

Zdefiniuj `--primary: hsl(217 91% 60%)` raz z HEX-a w Figmie, a następnie skomponuj `--primary-hover: hsl(217 91% 70%)`, `--primary-active: hsl(217 91% 50%)`, `--primary-bg: hsl(217 91% 95%)`, korygując tylko liczbę L. Wklej HEX raz, odczytaj trójkę HSL, wrzuć w blok właściwości niestandardowej CSS. Wzorzec, którego używały starsze systemy designu, aby utrzymać jaśniejsze i ciemniejsze odcienie tonalnie spójne, zanim przejęły rampy oparte na OKLCH.

Projektanci tłumaczący HEX na selektor HSL

Projektanci wychowani na selektorach barwy + nasycenia + value (Adobe, Sketch, tryb HSB w Figmie) często chcą trójki HSL nawet wtedy, gdy plik źródłowy wypisuje HEX. Wklejenie HEX-a raz daje odpowiadające HSL, gotowe do odczytania w mentalnej pozycji na kole kolorów projektanta bez ręcznego zgadywania. Przydatne przy przeglądaniu specyfikacji koloru marki i chęci poznania, gdzie leży na kole barwy względem innych kolorów marki w rodzinie.

Autorzy systemów motywów obliczający tokeny trybu ciemnego

Tematyzowanie trybu ciemnego często odwraca L, zachowując stałe H i S — primary z trybu jasnego `hsl(217 91% 60%)` mapuje się na primary z trybu ciemnego `hsl(217 91% 40%)` (albo podobnie). Wklej HEX z trybu jasnego, odczytaj HSL, oblicz L dla trybu ciemnego, wpisz nowe HSL z powrotem do tokenu motywu ciemnego. Wzorzec jest mechaniczny, gdy masz trójkę HSL; dużo bardziej żmudne jest wykonanie tego na surowych kanałach RGB.

Autorzy systemów designu generujący rampy jaśniejszych i ciemniejszych odcieni

Wygeneruj 9-stopniową rampę jaśniejszych/ciemniejszych odcieni przez zmiatanie L: `hsl(217 91% 95%)` (najjaśniejszy), 85%, 75%, 65%, 55%, 45%, 35%, 25%, `hsl(217 91% 15%)` (najciemniejszy). Wklej bazowy HEX, odczytaj HSL, zmiataj L w krokach co 10% mentalnie albo w kodzie. (Dla percepcyjnie jednorodnych ramp, w których każdy krok wygląda równie jasno, przełącz się na pole OKLCH obok — rampy HSL wyglądają nierówno między barwami, ponieważ L nie jest percepcyjnie jednorodne.)

Autorzy CSS używający matematyki hsl(from ...) w czasie wykonania

Nowoczesny CSS wspiera składnię `color-function-from`: `hsl(from var(--primary) h s calc(l + 10%))` wyprowadza jaśniejszy wariant `--primary` w czasie renderowania, bez wstępnego obliczania każdego kroku. Wklej HEX marki, potwierdź trójkę HSL, wrzuć bazę do zmiennej CSS i użyj matematyki w czasie wykonania dla wyprowadzonych tokenów. Działa w Chrome 119+, Safari 17.2+, Firefox 128+.

Frontendowcy budujący zestawy tokenów HSL w Tailwind v3

Tailwind v3 przechowywał kolory motywu jako trójki HSL z rozdziałem spacjami w zmiennych CSS (`--primary: 217 91% 60%`), komponowane przez `hsl(var(--primary))` w `tailwind.config.js`. Wklej HEX marki, odczytaj HSL, wrzuć trzy liczby (bez opakowania `hsl(...)`) do definicji zmiennej. Tailwind v4 przeszedł na OKLCH-first, ale starsze projekty na v3 wciąż używają wzorca HSL i będą jeszcze przez lata.

Autorzy interfejsu selektora kolorów mapujący HEX na kontrolki HSL

Budowanie selektora kolorów, który eksponuje barwę / nasycenie / jasność jako trzy oddzielne suwaki (klasyczny interfejs Adobe), oznacza mapowanie przychodzącego HEX-a na trzy kontrolki selektora. Wklej HEX tutaj, odczytaj trójkę HSL, programowo ustaw trzy suwaki. Konwersja jest tą samą, którą selektor uruchamiałby wewnętrznie; to narzędzie pokazuje wartości pośrednie do debugowania.

Inżynierowie dostępności korygujący jasność koloru marki dla kontrastu

Gdy kolor marki nie zalicza kontrastu WCAG względem tła, tani fix to podbicie L, aż współczynnik się oczyści — bez zmiany H i S kolor nadal czyta się jako ta sama tożsamość marki. Wklej HEX marki, obserwuj plakietki kontrastu, mentalnie skoryguj L (albo użyj osi L w selektorze), aż WCAG i APCA się zaliczą. Pole HSL pokazuje nowy procent L do dokumentu specyfikacji; pole HEX pokazuje odpowiadający kod do arkusza stylów.

Matematyka i parsowanie HEX na HSL

HEX → RGB → HSL to dwuetapowy potok

Konwersja przechodzi przez RGB jako etap pośredni. Krok pierwszy: sparsuj HEX na liczby całkowite RGB przez `parseInt(hex.slice(1, 3), 16)` na kanał. Krok drugi: znormalizuj RGB do 0–1, wylicz `max`/`min`/`delta`, zastosuj fragmentaryczną trygonometrię z CSS Color 4 §6.4: `L = (max + min) / 2`, `S = delta / (1 - |2L - 1|)`, `H = fragmentaryczna * 60`. Struktura dwuetapowa to powód, dla którego narzędzie pokazuje też pośrednią krotkę RGB — wyświetlana za darmo i przydatna do debugowania.

CSS Color 4 §6.4 definiuje algorytm referencyjny

Specyfikacja W3C CSS Color 4 §6.4 (algorytm `rgb()` na `hsl()`) definiuje kanoniczną fragmentaryczną matematykę: jasność jako punkt środkowy max i min, nasycenie jako `delta / (1 - |2L - 1|)` (z S = 0, gdy delta = 0, aby uniknąć dzielenia przez zero dla szarości), barwa jako trygonometria 60-stopni-na-krok w zależności od tego, który kanał jest maksymalny. Specyfikacja obsługuje też przypadki brzegowe: czysta czerń (`#000`) daje `hsl(0 0% 0%)` z arbitralną barwą 0°; czysta biel (`#FFF`) daje `hsl(0 0% 100%)` podobnie; czysta szarość daje `hsl(0 0% 50%)`.

Barwa zawija się na 360°, S i L to procenty

Trzy osie HSL mają różne jednostki. Barwa to kątowy stopień od 0 do 360 z zawijaniem — `hsl(370 ...)` jest interpretowany jako `hsl(10 ...)`, ponieważ pozycje kątowe się zawijają. Nasycenie i Jasność to procenty od 0% do 100%, bez zawijania; wartości poza zakresem są przycinane. CSS Color 4 akceptuje też barwę w obrotach (`hsl(0.6turn ...)`) albo radianach (`hsl(3.787rad ...)`); wyjście narzędzia używa stopni, ponieważ to najpopularniejsza forma w interfejsach narzędzi projektowych i dokumentach specyfikacji marki.

Jasność HSL NIE jest percepcyjnie jednorodna

Zielony przy `hsl(120 100% 50%)` wygląda widocznie jaśniej niż niebieski przy `hsl(240 100% 50%)`, mimo że oba mają tę samą nominalną Jasność — ponieważ HSL dziedziczy dziwactwa gamma sRGB i używa tej samej skali L dla każdej barwy. Dlatego rampy oparte na HSL wyglądają nierówno (jasny koniec rampy zielonej wspina się szybciej niż jasny koniec rampy niebieskiej) i dlatego systemy designu w dużej mierze zmigrowały do OKLCH dla generowania ramp. Narzędzie pokazuje zarówno HSL, jak i OKLCH, więc wybór jest jednym spojrzeniem oddalony.

Wewnętrzne źródło prawdy w OKLCH dla stabilności w obie strony

Mimo że to odgałęzienie celuje konkretnie w HEX → HSL, współdzielony bazowy konwerter trzyma kanoniczny kolor jako trójkę OKLCH wewnętrznie. Konwersja w obie strony HEX → HSL → RGB → OKLAB → HEX pozostaje stabilna bitowo; starsze konwertery z pivotem na HSL akumulują błąd zaokrąglenia i potrafią przesunąć barwę o kilka stopni przez kilka konwersji. Pivot w OKLCH zachowuje też barwę jako stabilną oś, więc przeciąganie suwaka barwy nie przechodzi przypadkiem przez szarość. Zgodnie z pracą Björna Ottossona o OKLAB z 2020.

Kodowanie kanału: 8-bitowe bez znaku, sRGB z gammą

Kody HEX kodują 8-bitowe liczby całkowite RGB bez znaku (0–255) w przestrzeni barw sRGB zdefiniowanej w IEC 61966-2-1 (1996). Wartości są *gamma-encoded* — relacja między wartością kanału a postrzeganą jasnością jest nieliniowa, zgodna z fragmentaryczną funkcją transferu sRGB (z grubsza wykładnik 2.4 z małym odcinkiem liniowym blisko zera). HSL jest wyprowadzane bezpośrednio z tych zakodowanych gammą wartości RGB bez żadnego kroku linearyzacji, co jest źródłowym powodem problemu HSL z jednorodnością percepcyjną. OKLCH najpierw linearyzuje, a potem mapuje na percepcyjnie jednorodną przestrzeń; HSL nie.

Najlepsze praktyki dla przepływów HEX / HSL

W nowym kodzie używaj nowoczesnej składni HSL z rozdziałem spacjami

`hsl(217 91% 60%)` (ze spacjami) i `hsl(217 91% 60% / 0.5)` (ukośnik dla kanału alfa) z CSS Color 4 to kanoniczne składnie dla kodu wdrażanego w 2025 i dalej. Starsze formy z przecinkami `hsl(217, 91%, 60%)` i `hsla(217, 91%, 60%, 0.5)` są nadal wspierane wszędzie, ale stylistycznie są przestarzałe w CSS Color 4. Używaj nowoczesnej składni w nowych arkuszach stylów; trzymaj `hsla()` tylko w kontekstach fallback IE 9–11, gdzie naprawdę potrzebujesz starszego wsparcia.

Generuj rampy w OKLCH, nie w HSL

Oś Jasności w HSL nie jest percepcyjnie jednorodna — 9-stopniowe zmiatanie L produkuje rampę, w której kroki zielone wyglądają jaśniej niż kroki niebieskie przy każdej wartości L. Dla ramp, w których każdy krok powinien wyglądać równie jasno (domyślne oczekiwanie systemu designu), generuj w OKLCH: `oklch(0.7 0.15 217)`, `oklch(0.6 0.15 217)` itd. Narzędzie pokazuje zarówno HSL, jak i OKLCH dla tego samego HEX-a, więc przełączanie się między nimi to jedno kliknięcie Kopiuj.

Zablokuj barwę i nasycenie, zmiataj jasnością

Gdy używasz HSL do pracy z jaśniejszymi/ciemniejszymi odcieniami, zmieniaj tylko liczbę L — utrzymuj H i S identyczne w całej rampie. Dryf barwy (nawet o 5°) sprawia, że rampa wygląda chaotycznie. Dryf nasycenia sprawia, że jasny koniec wygląda spranie, a ciemny mętnie. Dyscyplina jednej-osi-naraz to powód, dla którego HSL ma reputację przyjaznej projektantom; porzucenie jej daje najgorsze z obu światów.

Preferuj HEX dla tokenów źródła prawdy, HSL dla wyprowadzonych wariantów

Gdy piszesz specyfikację tokenu designu, preferuj HEX (lub OKLCH) jako kanoniczną formę — są zwięźlejsze i czysto mieszczą się w JSON lub YAML. HSL jest użyteczniejsze dla *wyprowadzonych* tokenów w czasie wykonania (`hsl(from var(--primary) h s calc(l + 10%))`) niż jako format źródła prawdy. Oba formaty opisują ten sam kolor; wybór dotyczy roli, jaką token gra w systemie.

Dokumentuj warianty HSL razem z bazowym HEX-em

Gdy wdrażasz zmienną CSS, taką jak `--primary-light: hsl(217 91% 70%)`, dołącz komentarz wskazujący z powrotem na bazowy HEX: `/* baza: #3b82f6 → hsl(217 91% 60%), wariant jaśniejszy +10% L */`. Sześć miesięcy później, gdy ktoś zechce wyprowadzić `--primary-lighter`, potrzebuje bazowego koloru, z którego ma policzyć — a HSL samo z siebie tego nie pokaże. HEX + HSL razem zachowują pełne pochodzenie.

Używaj hasha URL do udostępniania decyzji o kolorze na żywo

Każda zmiana koloru aktualizuje hash adresu URL jako `#hex=3b82f6` automatycznie. Skopiuj URL do wątku na Slacku albo do zgłoszenia na GitHubie, a każdy, kto otworzy, ląduje na tym samym kolorze z tą samą trójką HSL. To bardziej niezawodne niż wklejanie ciągu HSL w czacie — odbiorcy czasem robią literówki w stopniu albo gubią znak procenta przy ręcznym wpisywaniu wartości — i pozwala wątkowi design review odnieść się do dokładnego koloru zamiast do „niebieskiego, o którym rozmawialiśmy we wtorek”. Hash nigdy nie jest przesyłany na serwer.

Najczęściej zadawane pytania