Zostań w temacie i przelicz format koloru
Jak działa generator kolorów HSL?
Model HSL opisuje kolor przez trzy wartości: Hue (odcień), Saturation (nasycenie) i Lightness (jasność). Generator przelicza wybrane HSL na odpowiadające mu wartości RGB, a następnie zapisuje te kanały w formacie HEX.
To wygodne, gdy chcesz dobrać kolor wizualnie, a na końcu skopiować gotowy zapis do CSS, HTML, Figmy albo innego narzędzia projektowego. Kalkulator kolorów pokazuje wszystkie trzy formaty jednocześnie, więc nie trzeba przeliczać ich ręcznie.
Co oznacza H, S i L?
- H – Hue: odcień na kole barw od 0° do 360°.
- S – Saturation: nasycenie od szarości (0%) do pełnego nasycenia (100%).
- L – Lightness: jasność od czerni (0%) do bieli (100%).
Dlaczego HSL jest wygodny w CSS?
Dla stanów przycisku możesz zachować ten sam hue i saturation, a zmieniać tylko lightness. Dzięki temu warianty hover i active pozostają wizualnie powiązane z kolorem bazowym.
Przykładowe kolory HSL, RGB i HEX
| Kolor | HSL | RGB | HEX |
|---|---|---|---|
| Czerwony | hsl(0, 100%, 50%) | rgb(255, 0, 0) | #FF0000 |
| Zielony | hsl(120, 100%, 50%) | rgb(0, 255, 0) | #00FF00 |
| Niebieski | hsl(240, 100%, 50%) | rgb(0, 0, 255) | #0000FF |
| Szary 50% | hsl(0, 0%, 50%) | rgb(128, 128, 128) | #808080 |
Generator kolorów RGB a HSL – czym się różnią?
RGB steruje bezpośrednio trzema kanałami: czerwonym, zielonym i niebieskim. HSL opisuje tę samą barwę w sposób bliższy temu, jak zwykle pracuje się nad wariantami interfejsu: wybierasz odcień, a później regulujesz jego nasycenie i jasność.
Jeżeli celem jest stworzenie rodziny podobnych kolorów, HSL jest zwykle wygodniejszy. Jeżeli masz już konkretne wartości RGB i potrzebujesz tylko kodu HEX, skorzystaj z osobnego konwertera RGB na HEX.
Ciekawostka
Przy nasyceniu równym 0% wartość hue przestaje wpływać na wygląd koloru: niezależnie od kąta otrzymasz odcień szarości zależny wyłącznie od lightness.
HSL a kontrast i dostępność
Zmiana lightness pomaga szybko rozjaśnić lub przyciemnić tło, ale sam zapis HSL nie mówi jeszcze, czy tekst spełnia wymagany kontrast. Dwa kolory o pozornie różnej jasności mogą nadal dawać słabą czytelność.
Dlatego po dobraniu barwy warto sprawdzić finalną parę koloru tekstu i tła w narzędziu do pomiaru kontrastu, szczególnie dla przycisków, tekstu pomocniczego i elementów interaktywnych.
Najczęstsze błędy przy ustawianiu koloru
- Mylenie jasności z nasyceniem – zmniejszenie saturation nie przyciemnia koloru, tylko zbliża go do szarości.
- Ustawienie lightness na 0% lub 100% – wtedy otrzymasz odpowiednio czerń albo biel, niezależnie od hue i saturation.
- Przypadkowe warianty hover – łatwiej zachować spójność, gdy zmieniasz głównie lightness przy stałym hue.
- Ocena kontrastu wyłącznie „na oko” – dla tekstu i elementów interaktywnych warto wykonać osobny test kontrastu.
Wskazówka od KalkulatorXXL
Budując prostą paletę, zacznij od jednego hue i średniej jasności. Potem utwórz kilka wariantów, zmieniając lightness co 8–12 punktów. Dzięki temu łatwiej zachować wizualną hierarchię bez dobierania każdego kodu HEX osobno.
FAQ – generator kolorów HSL, RGB i HEX
Ostatnia aktualizacja: 16.09.2026