1. Wpisz wartość
Wpisz liczbę w polu wejściowym. Możesz użyć kropki lub przecinka jako separatora dziesiętnego.
Przelicz kolory RGB na HSL
Ten konwerter przelicza kolory z formatu RGB na HSL i odwrotnie. Wynik pojawia się natychmiast po wpisaniu wartości.
Loading tool editor...
Czym jest HSL i kiedy warto używać tego formatu?
HSL to sposób opisu kolorów oparty na trzech parametrach: H (Hue – barwa, 0–360°), S (Saturation – nasycenie, 0–100%), L (Lightness – jasność, 0–100%).
HSL jest bardziej intuicyjny niż RGB – łatwiej wyobrazić sobie kolor jako “czerwony o nasyceniu 80% i jasności 50%” niż “rgb(204, 51, 51)”. Dlatego HSL jest preferowany przy tworzeniu palet kolorów.
W CSS: hsl(217, 91%, 60%) = niebieski Tailwind blue-500. Zmiana L (jasności) tworzy warianty: L=30% = ciemny, L=50% = bazowy, L=80% = jasny.
Tailwind CSS v4 używa formatu oklch (następca HSL), ale HSL pozostaje standardem w CSS i jest obsługiwany przez wszystkie przeglądarki. Konwersja RGB ↔ HSL jest niezbędna przy pracy z paletami kolorów.
Jak korzystać z konwertera?
2. Odczytaj wynik
Wynik konwersji pojawi się natychmiast w polu obok – bez klikania żadnego przycisku.3. Skopiuj lub zmień kierunek
Kliknij Kopiuj wynik lub użyj przycisku Zmień kolejność, aby przeliczać w drugą stronę.
Kiedy przydaje się ten konwerter?
Palety kolorów
Tworzenie wariantów: zmieniaj L (jasność) przy stałym H i S.CSS
hsl(217, 91%, 60%)– intuicyjny zapis kolorów.Tryb ciemny
Zmiana L z 95% na 10% tworzy wariant ciemnego motywu.Projektowanie
HSL ułatwia tworzenie spójnych palet: obróć H o 120° = kolor komplementarny.
Co wyróżnia nasz konwerter?
Pełna prywatność
Wszystkie obliczenia odbywają się lokalnie w przeglądarce. Żadne dane nie są wysyłane na serwer.Wynik w czasie rzeczywistym
Wynik aktualizuje się natychmiast podczas wpisywania – bez konieczności klikania.Obustronna konwersja
Przycisk Zmień kolejność pozwala przeliczać w obu kierunkach jednym kliknięciem.Tabela popularnych wartości
Gotowa tabela z najczęściej przeliczanymi wartościami i opisami kontekstowymi.
Jak działa konwersja RGB na HSL?
RGB i HSL to dwa sposoby opisywania tego samego koloru. RGB (Red, Green, Blue) definiuje kolor przez intensywność trzech kanałów świetlnych. HSL (Hue, Saturation, Lightness) opisuje kolor bardziej intuicyjnie: odcień jako kąt na kole barw (0–360°), nasycenie jako procent czystości koloru i jasność jako procent od czarnego do białego.
Konwersja polega na analizie proporcji między kanałami RGB. Odcień (H) wynika z tego, który kanał jest dominujący i jak bardzo różni się od pozostałych. Jasność (L) to średnia między najjaśniejszym a najciemniejszym kanałem. Nasycenie (S) określa, jak daleko kolor jest od szarości o tej samej jasności.
Model HSL jest szczególnie przydatny dla projektantów, ponieważ pozwala łatwo tworzyć warianty koloru — na przykład jaśniejszą lub ciemniejszą wersję — przez zmianę jednego parametru, zamiast modyfikowania trzech wartości RGB jednocześnie.
Praktyczne wskazówki
- H = 0° czerwony, 120° zielony, 240° niebieski, 360° = 0° (koło barw).
- S = 0% = szary. S = 100% = pełne nasycenie.
- L = 0% = czarny. L = 50% = pełny kolor. L = 100% = biały.
- Paleta monochromatyczna: stałe H i S, zmienne L (np. 20%, 40%, 60%, 80%).
RGB vs HSL – porównanie
| Cecha | RGB | HSL |
|---|---|---|
| Zapis | rgb(R, G, B) | hsl(H, S%, L%) |
| Intuicyjność | Niska | Wysoka |
| Tworzenie palet | Trudne | Łatwe (zmieniaj H, S, L) |
| Tryb ciemny | Wymaga ręcznej zmiany | Zmień L |
| CSS | rgb(59, 130, 246) | hsl(217, 91%, 60%) |
RGB
- Zapis
rgb(R, G, B) - Intuicyjność
Niska - Tworzenie palet
Trudne - Tryb ciemny
Wymaga ręcznej zmiany - CSS
rgb(59, 130, 246)
HSL
- Zapis
hsl(H, S%, L%) - Intuicyjność
Wysoka - Tworzenie palet
Łatwe (zmieniaj H, S, L) - Tryb ciemny
Zmień L - CSS
hsl(217, 91%, 60%)
Konwertuj RGB do innych jednostek
Sprawdź konwertery innych jednostek
Najczęściej zadawane pytania
Pomóż nam ulepszyć narzędzia
Masz pomysł na nową funkcję, znalazłeś błąd lub chcesz zaproponować inne narzędzie? Napisz do nas – odpowiadamy w ciągu 24 godzin.