HSL opisuje kolor tak, jak ludzie o nim mówią: jaki odcień, jak nasycony, jak jasny. Konwersja kodu HEX do HSL to najszybszy sposób, by dostać kolor w formie, którą można naprawdę modyfikować — rozjaśnić, stonować lub zbudować z niego całą skalę.
Jak działa konwersja z HEX na HSL
- Przekształć kod HEX na RGB i podziel każdy kanał przez 255, tak że wszystkie trzy mieszczą się między 0 a 1.
- Znajdź największą i najmniejszą z trzech wartości. Ich średnia to jasność L.
- Rozpiętość między nimi decyduje o nasyceniu S: podziel ją przez (2 − max − min) dla jasnych kolorów, lub przez (max + min) dla ciemnych.
- Kanał, który ma maksimum, wyznacza odcień H — czerwony przy 0°, zielony przy 120°, niebieski przy 240° — a pozostałe dwa kanały pozycjonują odcień wewnątrz tego segmentu.
Przykład działania
Matematyka jest dokładna, ale wartości HSL zwykle zaokrągla się do pełnych stopni i procentów. Konwersja z powrotem może więc przesunąć RGB o jeden lub dwa kroki — niewidoczne w praktyce, ale warto o tym wiedzieć przy wielokrotnym round‑tripie kolorów.
Wyjaśnienie HEX i HSL
Czym jest HEX?
Kod HEX to sześciocyfrowa liczba szesnastkowa, która przechowuje kanały czerwony, zielony i niebieski koloru po znaku #. Każda para cyfr odpowiada jednemu kanałowi, od 00 (brak) do FF (pełny), co daje te same ~16,7 miliona kolorów co RGB, ale w krótszej notacji. HEX jest domyślny w CSS, narzędziach projektowych i wytycznych marki.
- Składnia:
- #RRGGBB
- Zakres:
- 00–FF na kanał
- Najlepsze do:
- CSS, przekaz projektowy, wytyczne marki
Czym jest HSL?
HSL dzieli kolor na odcień (0–360° na kole barw), nasycenie (jak intensywny, 0–100%) i jasność (jak jasny, 0–100%). Ponieważ każdy element odpowiada temu, jak ludzie opisują kolor, HSL jest najłatwiejszym formatem do tworzenia tonów, cieni i spójnych palet — ręcznie lub w kodzie.
- Składnia:
- hsl(H, S%, L%)
- Zakres:
- 0–360°, 0–100%, 0–100%
- Najlepsze do:
- palety, tony i cienie, theming
Tabela odniesienia z HEX na HSL
Najczęściej używane kolory CSS, skonwertowane z HEX na HSL.
| Kolor | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |