Konwersja HEX na HSL – działanie, zastosowanie i praktyczne szczegóły
Narzędzie do konwersji kodu szesnastkowego (HEX) na HSL przyjmuje poprawny sześciocyfrowy lub trzycyfrowy kod koloru i w odpowiedzi zwraca wartość HSL – barwę w stopniach (0–360), nasycenie i jasność w procentach (0–100%). Równocześnie na stronie wyświetlane są reprezentacje tego samego koloru w formatach RGB, HSV, CMYK oraz LAB. Wszystkie pola aktualizują się natychmiast podczas edycji.
Dlaczego HEX nie jest intuicyjny, a HSL tak
HEX to zapis sześciu cyfr szesnastkowych (lub trzech w skróconej wersji), które bezpośrednio kodują składowe czerwieni, zieleni i błękitu. Na przykład #4f46e5 oznacza: czerwony = 0x4f = 79, zielony = 0x46 = 70, niebieski = 0xe5 = 229. Jest zwarty i powszechnie używany w CSS oraz narzędziach projektowych, ale nie daje człowiekowi łatwego pojęcia, jak zmieni się kolor po zmianie jednej cyfry.
HSL natomiast został zaprojektowany z myślą o ludzkim rozumowaniu. Barwa (Hue) to kąt na kole barw – 0° to czerwień, 120° to zieleń, 240° to niebieski. Nasycenie (Saturation) określa intensywność koloru: 0% to szarość, 100% to pełny kolor. Jasność (Lightness) mówi, jak blisko bieli (100%) lub czerni (0%) jest odcień. Dzięki temu, aby rozjaśnić kolor dla stanu hover, wystarczy podnieść wartość jasności, zachowując tę samą barwę i nasycenie. W HEX wymagałoby to przeliczenia wszystkich trzech składowych RGB.
Ta różnica czyni HSL podstawowym narzędziem przy tworzeniu palet kolorów, systemów motywów i weryfikacji kontrastu dostępności. Narzędzie nie obsługuje kanału alfa – zarówno standardowy HEX (sześcio- i trzycyfrowy), jak i HSL operują wyłącznie na kolorach w pełni nieprzezroczystych.
Budowa kodu szesnastkowego – zasady i dopuszczalne formy
Kod HEX może być podany z symbolem # na początku lub bez niego. System szesnastkowy (podstawa 16) używa cyfr 0–9 oraz liter A–F, gdzie A = 10, B = 11, C = 12, D = 13, E = 14, F = 15. Sześciocyfrowy zapis RRGGBB oznacza, że każda para cyfr reprezentuje jedną składową RGB w zakresie 0–255. Trzycyfrowy skrót RGB (np. #abc) jest rozwinięty do #aabbcc – każda cyfra jest podwojona.
Narzędzie akceptuje wyłącznie poprawne kody sześcio- i trzycyfrowe. Wprowadzenie nieprawidłowej wartości (np. #xyz, #12345 lub tekstu spoza zakresu 0–9, A–F) powoduje wyświetlenie komunikatu błędu: „Wprowadź kolor hex, na przykład #4f46e5 lub #abc.” Nie ma możliwości podania kodu z kanałem alfa (jak #rrggbbaa) – takie wartości nie zostaną rozpoznane.
Matematyka konwersji: od HEX do HSL
Każdy kod HEX jest najpierw zamieniany na wartości RGB w systemie dziesiętnym. Dla #1E90FF:
- 0x1E = 30
- 0x90 = 144
- 0xFF = 255
Następnie wartości RGB są normalizowane do zakresu 0–1 (dzielone przez 255). Znormalizowane wartości oznaczmy jako R, G, B. Obliczamy:
- Maksimum (M) = max(R, G, B)
- Minimum (m) = min(R, G, B)
- Różnica (Δ) = M – m
Jasność (L) = (M + m) / 2, wyrażona w procentach.
Nasycenie (S) zależy od jasności:
- Jeśli Δ = 0, S = 0%.
- W przeciwnym razie S = Δ / (1 – |2L – 1|) * 100%.
Barwa (H) zależy od tego, która składowa jest maksymalna:
- Jeśli M = R: H = 60° * ((G – B) / Δ mod 6)
- Jeśli M = G: H = 60° * ((B – R) / Δ + 2)
- Jeśli M = B: H = 60° * ((R – G) / Δ + 4)
Jeśli H wyjdzie ujemne, dodaje się 360°. Wynik zaokrągla się do liczb całkowitych.
Dla naszego przykładu #1E90FF (kolor „DodgerBlue”):
- Po normalizacji: R ≈ 0,118, G ≈ 0,565, B = 1
- M = 1, m ≈ 0,118, Δ ≈ 0,882
- L = (1 + 0,118) / 2 ≈ 0,559 → 55,9%
- S = 0,882 / (1 – |1,118 – 1|) = 0,882 / (1 – 0,118) = 0,882 / 0,882 = 1 → 100%
- Ponieważ M = B: H = 60° * ((0,118 – 0,565) / 0,882 + 4) = 60° * ((-0,447) / 0,882 + 4) ≈ 60° * (-0,507 + 4) = 60° * 3,493 ≈ 209,6° → 210°
Wynik: HSL(210°, 100%, 56%). Można to sprawdzić w każdym narzędziu.
Przypadki brzegowe i ograniczenia narzędzia
Podczas konwersji mogą wystąpić trzy sytuacje wymagające uwagi.
Kody poza widzialną gamą RGB – jeśli użytkownik przełączy się na inny system (np. LAB lub CMYK) i wprowadzi wartość spoza widzialnej przestrzeni barwnej RGB, kolor zostanie dostosowany do najbliższej barwy możliwej do wyświetlenia na ekranie. Przy konwersji z powrotem na HEX może nastąpić niewielkie przesunięcie. Wynika to z faktu, że przestrzeń LAB jest szersza niż RGB; niektóre kolory istniejące w naturze nie są osiągalne na monitorze.
CMYK jako przybliżenie – wartości CMYK podawane przez narzędzie są jedynie szacunkiem dla ekranu. Nie należy ich używać bezpośrednio w profesjonalnym druku bez kalibracji. Dokładna konwersja z RGB do CMYK wymaga znajomości profilu kolorystycznego drukarki i podłoża.
Nieprawidłowe dane wejściowe – narzędzie nie podejmuje próby odgadnięcia intencji. Wprowadzenie #GGG (litery G nie istnieją w systemie szesnastkowym) lub #1234567 (siedem znaków) natychmiast wywołuje błąd.
Wszystkie obliczenia odbywają się w przeglądarce użytkownika – żadne dane nie są przesyłane ani przechowywane na serwerze.
Kto korzysta z konwersji HEX na HSL
Front-end developerzy – otrzymują z projektu graficznego kod HEX, a potrzebują HSL, aby łatwo tworzyć stany hover, aktywne lub warianty motywów przy użyciu CSS custom properties. W CSS można napisać: color: hsl(210deg 100% 56%) i zmieniać tylko jasność dla rozjaśnienia.
Projektanci UI/UX – myślą w kategoriach barwy, nasycenia i jasności. Mając kod HEX marki, przeliczają go na HSL, aby świadomie dobierać kolory uzupełniające, analogiczne lub monochromatyczne.
Specjaliści ds. dostępności (a11y) – podczas weryfikacji kontrastu względem WCAG często łatwiej operować na HSL, ponieważ można zmieniać jasność przy zachowaniu tej samej barwy. Na przykład, aby uzyskać kontrast 4,5:1 dla tekstu na białym tle, wystarczy obniżyć jasność koloru, nie zmieniając jego odcienia.
Osoby budujące systemy kolorów – HSL pozwala na generowanie palet poprzez kroki w nasyceniu i jasności, co jest niemożliwe przy użyciu surowego HEX.
Różnice między HSL a HSV – praktyczne znaczenie
Oba modele używają barwy (H) w ten sam sposób, ale różnią się definicją drugiej i trzeciej składowej. W HSV (Hue, Saturation, Value) nasycenie i wartość (jasność maksymalnej składowej) są zdefiniowane inaczej niż w HSL. W HSV nasycenie 0% zawsze daje kolor biały, gdy wartość = 100%. W HSL nasycenie 0% przy jasności 50% daje szarość. Różnica ma znaczenie przy wyborze kolorów dla gradientów – HSL daje bardziej jednolite wrażenie wizualne, podczas gdy HSV lepiej oddaje intuicję „czystości” koloru w kontekście oświetlenia.
Narzędzie wyświetla obie reprezentacje, aby użytkownik mógł wybrać odpowiednią dla swoich potrzeb.
Często zadawane pytania (FAQ)
Czy narzędzie akceptuje kody HEX z plusem (#+) lub minusem?
Nie. Dozwolone są wyłącznie znaki 0–9 i A–F (wielkie lub małe litery) – opcjonalnie z początkowym #. Jakikolwiek inny znak powoduje błąd.
Dlaczego po konwersji z LAB i powrocie do HEX kolor się zmienia? Ponieważ przestrzeń LAB jest szersza niż RGB. Jeśli kolor LAB znajdował się poza gamą RGB, został przycięty do najbliższej możliwej do wyświetlenia barwy. Przy ponownej konwersji ten przycięty kolor może nie dać dokładnie tego samego HEX, co oryginał.
Co się stanie, jeśli wpiszę kod trzyliterowy, np. #abc? Zostanie automatycznie rozwinięty do #aabbcc, a następnie przeliczony na HSL. Wynik będzie identyczny jak dla pełnego kodu.
Czy narzędzie działa offline? Tak. Cała konwersja odbywa się w przeglądarce przy użyciu JavaScript. Po załadowaniu strony nie jest wymagane połączenie z internetem.
Jak uzyskać kolor półprzezroczysty? Standardowy HSL i HEX sześciocyfrowy nie obsługują przezroczystości. Należy użyć formatu HSLA (z kanałem alfa) lub ośmiocyfrowego HEX (#RRGGBBAA). To narzędzie pracuje wyłącznie na kolorach w pełni nieprzezroczystych.
Dlaczego wartości CMYK są tylko przybliżone? Konwersja z RGB do CMYK zależy od profilu kolorystycznego urządzenia wyjściowego. Na ekranie nie da się dokładnie oddać rzeczywistego koloru farby drukarskiej. Podane wartości są standardową konwersją matematyczną, ale przed drukiem należy je zweryfikować na dedykowanym profilerze.