HSL je prijaznejši način izbire barve, RGB pa je to, kar zasloni, canvas API-ji in slikovna koda dejansko porabijo. Ta pretvornik spremeni poljubno trojico odtenka, nasičenosti in svetlosti v natančne kanale 0–255.
Kako poteka pretvorba iz HSL v RGB
- Pretvori S in L v ulomke in izračunaj kromo C = (1 − |2L − 1|) × S.
- Deli odtenek z 60, da najdeš njegov segment na barvnem kolesu, in izračunaj vmesno vrednost X = C × (1 − |(H/60 mod 2) − 1|).
- Po tem segmentu dodeli C, X in 0 v reže R, G in B.
- Vsem trem kanalom dodaj svetlostni odmik L − C/2 in pomnoži z 255.
Delujoč primer
Rezultat je natančen do končnega zaokroževanja na cele kanale. Podporne so tudi decimalne vrednosti odtenka ali nasičenosti, ki se preprosto zaokrožijo na najbližji RGB trojček.
HSL in RGB pojasnjeno
Kaj je HSL?
HSL razdeli barvo na odtenek (0–360° na barvnem krogu), nasičenost (koliko barvita, 0–100%) in svetlost (koliko svetla, 0–100%). Ker vsaka komponenta ustreza načinu, kako ljudje opisujejo barvo, je HSL najlažji format za ustvarjanje odtenkov, tonov in doslednih palet — ročno ali v kodi.
- Sintaksa:
- hsl(H, S%, L%)
- Območje:
- 0–360°, 0–100%, 0–100%
- Najbolj primerno za:
- palete, odtenki in toni, tematizacija
Kaj je RGB?
RGB opisuje barvo kot tri komponente svetlobe — rdeča, zelena in modra — vsaka od 0 do 255. Odraža, kako zasloni dejansko delujejo: vse tri pri 255 dajo belo, vse pri 0 dajo črno. RGB je prava izbira, kadar moraš računati z barvo, rgba() pa doda prosojnost.
- Sintaksa:
- rgb(R, G, B)
- Območje:
- 0–255 na kanal
- Najbolj primerno za:
- koda, canvas, prosojnost z rgba()
Tabela za HSL v RGB
Najpogostejše CSS barve, pretvorjene iz HSL v RGB.
| Barva | HSL | RGB |
|---|---|---|
| black | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| white | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| red | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| lime | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| blue | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| yellow | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| orange | hsl(39, 100%, 50%) | rgb(255, 166, 0) |
| teal | hsl(180, 100%, 25%) | rgb(0, 127, 128) |
| purple | hsl(300, 100%, 25%) | rgb(128, 0, 127) |
| gray | hsl(0, 0%, 50%) | rgb(128, 128, 128) |