Konwerter HEX na HSL
Czym jest Konwerter HEX na HSL
To narzędzie konwertuje kody kolorów HEX (np. #3B82F6) na wartości HSL (np. hsl(217, 91%, 60%)). HSL oznacza Odcień (Hue), Nasycenie (Saturation) i Jasność (Lightness) — bardziej intuicyjny model kolorów dla projektantów. Dostosowywanie jasności w HSL jest o wiele łatwiejsze niż w HEX lub RGB, co czyni go idealnym do tworzenia palet kolorów i zmiennych CSS.
Jak używać
- Wpisz lub wklej kod koloru HEX w pole HEX (ze znakiem # lub bez).
- Wartości HSL i RGB pojawią się natychmiast w polach poniżej.
- Kliknij przycisk kopiowania obok HSL, aby skopiować format hsl(h, s%, l%).
- Przełączaj się między wszystkimi 6 konwerterami kolorów za pomocą linków trybów na górze.
Kiedy używać
Tworzysz system kolorów na podstawie koloru marki? Wklej HEX marki (#E63946) i otrzymaj hsl(356, 75%, 56%). Stamtąd możesz tworzyć jaśniejsze odcienie, zwiększając jasność, i ciemniejsze, zmniejszając ją — wszystko przy zachowaniu dokładnie tego samego odcienia.
Często zadawane pytania
Czym jest HSL i dlaczego używać go zamiast HEX?
HSL (Odcień, Nasycenie, Jasność) opisuje kolor w intuicyjnych kategoriach. Odcień to pozycja na kole kolorów (0–360°), Nasycenie to intensywność koloru (0–100%), a Jasność to jasność (0–100%). Tworzenie wariantów kolorów w HSL jest o wiele łatwiejsze niż w HEX.
Czym jest #FF0000 w HSL?
Czysta czerwień #FF0000 to hsl(0, 100%, 50%). Odcień 0° to czerwień na kole kolorów, 100% nasycenie oznacza pełne nasycenie, a 50% jasności to czysty kolor.
Czy CSS obsługuje kolory HSL?
Tak. Nowoczesny CSS w pełni obsługuje notację `hsl()` i `hsla()`. Na przykład: `color: hsl(217, 91%, 60%);` i `background: hsla(217, 91%, 60%, 0.5);`
Czym jest #000000 w HSL?
Czarny (#000000) to hsl(0, 0%, 0%). Jasność na poziomie 0% oznacza czystą czerń niezależnie od odcienia czy nasycenia.
Czy mogę udostępnić to narzędzie z wypełnionymi danymi?
Tak. Adres URL aktualizuje się automatycznie podczas wpisywania. Skopiuj link z paska adresu lub użyj przycisku Udostępnij — każdy kto go otworzy, zobaczy Twoje dane.
Powiązane narzędzia
Konwerter HSL na HEX
Konwertuj wartości kolorów HSL na kody HEX natychmiast. Darmowy konwerter HSL na HEX z podglądem na żywo. Zamień wartości hsl() na kody HEX dla CSS i projektowania.
Kalkulator Proporcji Obrazu
Oblicz proporcje obrazu, znajdź brakującą szerokość lub wysokość i zmieniaj rozmiar zdjęć oraz filmów bez utraty proporcji. Za darmo.
Dekoder Base64
Dekoduj ciągi Base64 do zwykłego tekstu błyskawicznie w przeglądarce. Obsługuje pełne kodowanie Unicode z emoji. Darmowy dekoder Base64.