RGB mówi ekranowi, ile światła wysłać; HSL mówi, jak kolor faktycznie wygląda. Przekształcenie trzech kanałów do odcienia, nasycenia i jasności ułatwia ręczne dopasowywanie koloru.
Jak działa konwersja z RGB na HSL
- Podziel R, G i B przez 255, tak by każda wartość mieściła się między 0 a 1.
- Weź maksimum i minimum z trzech wartości — ich średnia to jasność L.
- Jeśli maksimum i minimum są równe, kolor jest szary: odcień i nasycenie wynoszą 0.
- W przeciwnym razie wyprowadź S ze spreadu między maksimum i minimum, a H odczytaj z kanału, który jest maksimum.
Przykład działania
Dokładne z zasady. Ponieważ H, S i L zwykle pokazuje się jako zaokrąglone liczby całkowite, konwersja z powrotem może przesunąć któryś kanał o krok lub dwa.
Wyjaśnienie RGB i HSL
Czym jest RGB?
RGB opisuje kolor trzema kanałami światła — czerwonym, zielonym i niebieskim — każdy od 0 do 255. Odwzorowuje to działanie ekranów: wszystkie trzy na 255 dają biały, wszystkie na 0 — czarny. RGB to właściwy wybór, gdy musisz liczyć z kolorem, a rgba() dodaje przezroczystość.
- Składnia:
- rgb(R, G, B)
- Zakres:
- 0–255 na kanał
- Najlepsze do:
- kod, canvas, przezroczystość z rgba()
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 RGB na HSL
Najczęściej używane kolory CSS, skonwertowane z RGB na HSL.
| Kolor | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |