1. Wpisz wartość
Wpisz liczbę w polu wejściowym. Możesz użyć kropki lub przecinka jako separatora dziesiętnego.
Przelicz RGB na HSL – konwerter kolorów CSS
HSL pozwala budować palety kolorów przez zmianę jednego parametru. Przelicz RGB na HSL i projektuj spójne systemy kolorów w CSS.
REKLAMA
REKLAMA
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 CSS
Tworzenie spójnych wariantów koloru jest w HSL proste: ustaw H (odcień) i S (nasycenie), a potem generuj jasne i ciemne warianty zmieniając tylko L. Wynik: L=20% (bardzo ciemny), L=40%, L=50% (bazowy), L=70%, L=90% (bardzo jasny) – pełna skala kolorów bez ręcznych obliczeń RGB.Systemy projektowe i Tailwind CSS
Polskie agencje projektowe i startupy używają Tailwind CSS, który historycznie opierał się na paletach HSL. Przeliczając kolory brandowe z RGB na HSL, możesz łatwo rozszerzyć paletę o odcienie 50–950 i zbudować własny system projektowy kompatybilny z Tailwind lub Bootstrap.Tryb ciemny (dark mode)
Implementacja trybu ciemnego jest najłatwiejsza w HSL. Zamiast definiować osobny zestaw kolorów RGB, wystarczy zmienić parametr L: jasny motyw L=95%, ciemny motyw L=10%. Polskie aplikacje webowe coraz częściej wymagają dark mode – HSL znacznie skraca czas jego wdrożenia.Kolory komplementarne i harmonia barw
Projektując identyfikację wizualną dla polskich firm, łatwo wyliczyć kolory komplementarne w HSL: dodaj 180° do H, aby uzyskać kolor dopełniający. Triada to H, H+120°, H+240°. Ta matematyczna regularność jest możliwa tylko w HSL, nie w RGB.
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%).
REKLAMA
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
Co oznaczają litery H, S, L?
H = Hue (barwa, 0–360° na kole barw). S = Saturation (nasycenie, 0–100%). L = Lightness (jasność, 0–100%).
Jak stworzyć paletę kolorów w HSL?
Ustaw H i S, potem tworzysz warianty zmieniając L: 20% (ciemny), 40%, 50% (bazowy), 70%, 90% (jasny).
Jaka jest różnica między HSL a HSB/HSV?
HSL i HSV używają innej definicji jasności. W HSL L=50% to pełny kolor. W HSV V=100% to pełny kolor. Photoshop używa HSB/HSV.
Czy HSL jest obsługiwany w CSS?
Tak. CSS obsługuje hsl() i hsla() we wszystkich nowoczesnych przeglądarkach.
Jak obrócić kolor o 180°?
Dodaj 180 do H. To daje kolor komplementarny. Np. H=0° (czerwony) → H=180° (cyan).
Co to jest oklch?
oklch to nowszy format kolorów w CSS (lepiej oddaje percepcję ludzką). Tailwind CSS v4 używa oklch, ale HSL nadal działa wszędzie.
Jak używać HSL w Tailwind CSS?
Tailwind CSS v3 pozwala definiować kolory jako HSL w konfiguracji: <code>colors: { brand: 'hsl(217, 91%, 60%)' }</code>. Tailwind v4 używa oklch, ale HSL jest w pełni kompatybilne z CSS custom properties we wszystkich wersjach.
Jak stworzyć tryb ciemny używając HSL?
Zdefiniuj kolory jako HSL custom properties: <code>--bg: hsl(220, 13%, 95%)</code>. W dark mode zmień tylko L: <code>--bg: hsl(220, 13%, 10%)</code>. Dzięki HSL nie musisz redefiniować pełnych wartości RGB dla każdego koloru – zmiana jednego parametru wystarczy.
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.