Konwertuj HEX na HSL Online
Konwertuj kolory HEX na HSL dla nowoczesnego CSS natychmiast, w Twojej przeglądarce.
Dlaczego warto używać
HEX do HSL: pomost między projektem a nowoczesnym kodem CSS
Wynik gotowy do CSS
Format hsl() kompatybilny ze wszystkimi nowoczesnymi przeglądarkami i zmiennymi CSS Custom Properties.
Prywatność
Bez serwerów, bez logów. Konwersja odbywa się w całości w Twojej przeglądarce.
Standardowa precyzja
Algorytm konwersji zgodny ze specyfikacją W3C CSS Color Level 4.
Natychmiastowy
Wynik w czasie rzeczywistym podczas wpisywania kodu HEX.
Jak to działa
Trzy kroki, żadnych komplikacji
Wprowadź kod HEX
Wpisz szesnastkowy kod koloru: #RRGGBB lub #RGB. Możesz też użyć nazw kolorów CSS takich jak 'coral', 'teal' czy 'goldenrod'. Konwerter automatycznie wykrywa format.
Odczytaj wartości HSL
Konwerter oblicza odcień (H) w stopniach (0–360°), nasycenie (S) jako procent (0–100%) i jasność (L) jako procent (0–100%), zgodnie ze standardowym algorytmem CSS.
Użyj wyniku w CSS
Skopiuj wynik w formacie hsl(11, 100%, 60%) lub jako zmienną CSS: --color: hsl(11deg 100% 60%). Gotowy do wklejenia bezpośrednio w arkuszu stylów lub tokenie projektowym.
FAQ
Masz pytania?
HSL (Hue, Saturation, Lightness – odcień, nasycenie, jasność) to model kolorów opisujący barwy w bardziej intuicyjny sposób niż RGB. Odcień (H) to kąt na kole barw (0° = czerwony, 60° = żółty, 120° = zielony, 180° = cyjan, 240° = niebieski, 300° = magenta, 360° = czerwony). Nasycenie (S) kontroluje intensywność koloru: 0% to czysta szarość, 100% to najżywszy możliwy kolor. Jasność (L) kontroluje jasność: 0% to czerń, 50% to czysty kolor, 100% to biel.
HSL i HSV (zwany też HSB – odcień, nasycenie, jasność) to dwa odrębne sposoby reorganizacji przestrzeni kolorów RGB we współrzędnych cylindrycznych. Kluczowa różnica leży w osi jasności: w HSL L=50% to najczystszy nasycony kolor; w HSV V=100% to czysty kolor. Oznacza to, że w HSV, aby uzyskać biel, potrzebujesz V=100% i S=0%, podczas gdy w HSL wystarczy L=100% niezależnie od S. Photoshop i większość narzędzi projektowych używa HSB/HSV; CSS korzysta z HSL. Konwerter kolorów oblicza oba modele, aby ułatwić pracę między narzędziami.
HSL jest preferowany w CSS, ponieważ umożliwia bardzo intuicyjne dostosowywanie kolorów za pomocą zmiennych CSS. Aby przyciemnić kolor bez zmiany jego odcienia: hsl(var(--hue), var(--sat), calc(var(--light) - 10%)). Aby stworzyć motyw jasny/ciemny: wystarczy zmienić L z 30% na 70%. Dla stanu hover: zwiększ S o 10%. Dla kontrastu, zrobienie tego samego w RGB wymaga przeliczenia nowych wartości R, G, B dla każdej modyfikacji. Własności niestandardowe CSS i funkcja calc() sprawiają, że HSL jest idealnym modelem dla dynamicznych systemów projektowania i tematyzowania.
W HSL jasność (L) bezpośrednio kontroluje jasność koloru bez wpływu na odcień i nasycenie. Aby przyciemnić: zmniejsz L (np. z 60% do 40%). Aby rozjaśnić: zwiększ L (np. z 40% do 70%). Aby stworzyć cień koloru, zachowaj H i S na stałym poziomie i zmieniaj tylko L. Praktyczny przykład CSS: :root { --btn-hsl: 220, 90%, 50%; } .btn { background: hsl(var(--btn-hsl)); } .btn:hover { background: hsl(220, 90%, 40%); } .btn:active { background: hsl(220, 90%, 30%); }. To jest niemożliwe do tak przejrzystego wykonania z bezpośrednimi wartościami RGB lub HEX.
Kolory komplementarne to te, które są naprzeciwko siebie na kole barw, oddzielone o 180°. W HSL obliczenie ich jest trywialne: dopełnienie hsl(30, 80%, 50%) to hsl(210, 80%, 50%) (wystarczy dodać 180 do odcienia, modulo 360). Harmonijne schematy kolorów są równie proste: triadyczny (H, H+120°, H+240°), kwadratowy (H, H+90°, H+180°, H+270°), analogiczny (H−30°, H, H+30°). Ta właściwość sprawia, że HSL jest modelem z wyboru dla generatorów palet, narzędzi do projektowania systemów kolorów i każdej aplikacji wymagającej automatycznej harmonii chromatycznej.
HSL: historia modelu kolorów i jego przyjęcie w CSS
Model kolorów HSL (Hue, Saturation, Lightness) został zaproponowany przez Joblove'a i Greenberga w 1978 roku w artykule 'Color spaces for computer graphics' opublikowanym w materiałach konferencji SIGGRAPH. Jego celem było stworzenie przestrzeni kolorów bardziej intuicyjnej dla człowieka niż model RGB, który wymagał myślenia w kategoriach mieszanin podstawowego światła zamiast percepcyjnych właściwości koloru. Pokrewny model HSV (Hue, Saturation, Value) został równocześnie zaproponowany przez Alvy Ray Smitha, również w 1978 roku. Oba modele reprezentują przestrzeń kolorów RGB jako cylinder we współrzędnych biegunowych: oś pionowa to jasność lub wartość, promień to nasycenie, a kąt to odcień.
Koło barw i kąty odcienia w HSL mają historię znacznie poprzedzającą komputery. Tradycyjne koło barw artysty (oparte na pigmentach) ma jako podstawowe czerwień, niebieski i żółty, z ich dopełnieniami naprzeciwko. Koło barw świetlnych (RGB) ma inne ułożenie: czerwony na 0°, żółty na 60°, zielony na 120°, cyjan na 180°, niebieski na 240°, magenta na 300°. System Munsella (1905), prekursor nowoczesnych systemów, organizował kolory w bryłę z 10 głównymi odcieniami i 10 krokami wartości i chropy, został przyjęty przez USDA do klasyfikowania kolorów gleby (Soil Survey Manual, 1975), co uczyniło go standardem referencyjnym w gleboznawstwie.
CSS przyjął HSL w CSS Color Level 3 (rekomendacja W3C z 2011 roku) wraz z funkcją hsl(). Przed CSS3 twórcy stron mogli używać tylko HEX i rgb() do określania kolorów, co bardzo utrudniało tworzenie systematycznych wariacji kolorów. Własności niestandardowe CSS (zmienne CSS, Level 4, powszechna obsługa od 2017) znacznie zwiększyły użyteczność HSL: zdefiniowanie --primary-hue: 220; --primary-sat: 90%; i budowanie całej palety z hsl(var(--primary-hue), var(--primary-sat), L%) pozwala zmienić całą paletę, modyfikując tylko dwie zmienne. Frameworki takie jak Tailwind CSS (od v3) i systemy projektowe takie jak Material Design 3 (Google, 2021) używają HSL lub jego wariantów do definiowania systemów tokenów kolorów.