RGB pove zaslonu, koliko svetlobe naj oddaja; HSL pa pove, kako barva dejansko izgleda. Pretvorba treh kanalov v odtenek, nasičenost in svetlost naredi barvo enostavno prilagodljivo ročno.
Kako poteka pretvorba iz RGB v HSL
- R, G in B deli z 255, da je vsaka vrednost med 0 in 1.
- Vzemi največjo in najmanjšo od treh — njuna sredina je svetlost L.
- Če sta največja in najmanjšja enaka, je barva siva: odtenek in nasičenost sta oba 0.
- V nasprotnem primeru iz razpona med največjo in najmanjšo izpelji S in preberi H iz kanala, ki je največji.
Delujoč primer
Načeloma natančno. Ker se H, S in L običajno prikazujejo kot zaokrožena cela števila, lahko pretvorba nazaj premakne kanal za en ali dva koraka.
RGB in HSL pojasnjeno
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()
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
Tabela za RGB v HSL
Najpogostejše CSS barve, pretvorjene iz RGB v HSL.
| Barva | 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%) |