Pretvornik iz RGB v HSL

Zakaj je pretvorba RGB v HSL več kot le matematična vaja

RGB je jezik zaslonov: tri številke med 0 in 255 povedo, koliko rdeče, zelene in modre svetlobe naj mešajo slikovne pike. HSL pa govori človeško: odtenek (hue) kot kot na barvnem krogu, nasičenost (saturation) kot delež čistosti in svetlost (lightness) kot navidezna svetlost. Orodje, ki ga opisujemo, pretvarja iz prvega v drugega – in hkrati prikaže še HEX, HSV, CMYK in LAB. Vse pretvorbe tečejo v brskalniku, brez pošiljanja podatkov na strežnik.

Bistvena razlika med tem orodjem in navadnim pretvornikom RGB→HEX je v tem, da HSL omogoča neodvisno prilagajanje svetlosti brez spreminjanja odtenka. Če v RGB povečate vrednost modrega kanala, se spremeni tako odtenek kot svetlost. Pri HSL lahko dvignete svetlost za 10 % in odtenek ostane popolnoma enak. Zato je HSL prednostni model za generiranje barvnih palet, tem in dostopnih kontrastnih različic.

Kako RGB predstavlja barve na zaslonih

RGB temelji na aditivnem mešanju svetlobe. Vsak kanal je shranjen kot celo število od 0 (nič svetlobe) do 255 (polna moč). S tem 8-bitnim zapisom dobimo 16,7 milijona barv (256 × 256 × 256). Večina zaslonov in spletnih brskalnikov uporablja barvni prostor sRGB, kar pomeni, da so vrednosti 0–255 linearno povezane z intenziteto svetlobe šele po uporabi korekcijske krivulje (gama). V samem pretvorniku se RGB obravnava neposredno, kot ga vnese uporabnik – brez dodatne transformacije gama, kar je običajno za spletna orodja.

Pri vnosu RGB morajo biti tri številke ločene z vejico ali presledkom, vsaka med 0 in 255. Če vnesete nekaj takega kot 79, 70, 229, orodje takoj izračuna HSL. Nepravilen vnos sproži sporočilo: "Vnesite RGB kot tri številke 0–255, npr. 79, 70, 229." Enako velja, če želite HSL vnesti neposredno za pretvorbo nazaj v RGB – takrat je pričakovana oblika: "Vnesite HSL kot odtenek 0–360 z dvema odstotkoma, npr. 243, 75%, 59%."

Kako HSL modelira človeško zaznavo

HSL uporablja tri dimenzije:

• Odtenek (H) – kot stopinje na barvnem krogu: 0° = rdeča, 120° = zelena, 240° = modra, 360° = spet rdeča.
• Nasičenost (S) – odstotek čistosti: 0 % je siva, 100 % je popolnoma čista barva.
• Svetlost (L) – odstotek navidezne svetlosti: 0 % je črna, 100 % je bela.

Za razliko od HSV (kjer je svetlost value, največji kanal) HSL uporablja lightness, ki je povprečje najvišjega in najnižjega kanala. To pomeni, da imata na primer rumena (R=255, G=255, B=0) in modra (R=0, G=0, B=255) pri HSL enako svetlost le, če je njuno povprečje enako – a ker je rumena svetlejša, jo HSL pri isti svetlosti oceni kot svetlejšo od modre. To je ena od omejitev, o kateri bomo govorili kasneje.

Matematična pretvorba RGB → HSL

Postopek je standardiziran in poteka v treh korakih:

1. Normalizacija – vsako RGB vrednost delimo s 255, da dobimo števila na intervalu.
2. Iskanje min in max – med tremi kanali poiščemo največjo in najmanjšo vrednost. Razlika med njima je Δ.
3. Izračun:
   • Svetlost L = (max + min) / 2 × 100 %
   • Nasičenost S =
     • Če je max = min (siva): S = 0 % (odtenek je nedoločen)
     • Sicer: S = Δ / (1 – |2L – 1|) × 100 %
   • Odtenek H = izračunan glede na to, kateri kanal je max:
     • Če je max = R: H = 60° × ((G – B) / Δ mod 6)
     • Če je max = G: H = 60° × ((B – R) / Δ + 2)
     • Če je max = B: H = 60° × ((R – G) / Δ + 4)
       Rezultat normaliziramo na interval [0°, 360°).

Za vnos 79, 70, 229 normalizirane vrednosti so približno 0,310; 0,275; 0,898. Max = 0,898 (modra), min = 0,275 (zelena), Δ = 0,623. L = (0,898 + 0,275)/2 = 0,5865 ≈ 59 %. S = 0,623 / (1 – |2×0,5865 – 1|) = 0,623 / (1 – 0,173) = 0,623 / 0,827 ≈ 75 %. H = 60° × ((0,310 – 0,275)/0,623 + 4) = 60° × (0,035/0,623 + 4) = 60° × (0,0562 + 4) = 60° × 4,0562 ≈ 243°. Rezultat: hsl(243°, 75%, 59%).

Zakaj je HSL nepogrešljiv za palete in teme

Prilagajanje svetlosti brez spreminjanja odtenka – to je ključna prednost pred RGB. Če želite ustvariti svetlejšo različico (tint) ali temnejšo (shade) neke barve, pri HSL enostavno povečate ali zmanjšate svetlost L, nasičenost S pa pustite nespremenjeno (ali pa jo rahlo prilagodite, da ohranite občutek). V RGB bi morali spreminjati vse tri kanale, kar pogosto vodi v nepričakovane premike odtenka.

Primer: Modra rgb(0, 50, 200) ima v HSL približno hsl(225°, 100%, 39%). Če želite svetlejšo različico za ozadje gumba, nastavite L na 70 % – dobite hsl(225°, 100%, 70%), kar je svetlo modra, a odtenek ostaja enak. Enako lahko naredite za temnejšo različico besedila z L = 20 %.

Ustvarjanje barvnih lestvic za podatkovno vizualizacijo – HSL-ova svetlost je intuitivna za zaporedne sheme: enakomerno povečujete L od 0 do 100 ob konstantnem odtenku in nasičenosti. Vendar bodite pozorni: HSL ni perceptivno uniformen – pri enaki svetlosti se rumena zdi svetlejša od modre. Za res natančne vizualizacije raje uporabite LAB, ki ga orodje tudi prikaže.

HSL za dostopnost (WCAG kontrast)

Smernice WCAG 2.1 zahtevajo razmerje kontrasta vsaj 4,5:1 za normalno besedilo in 3:1 za veliko besedilo (18 pt krepko ali 24 pt). Z HSL lahko hitro preverite, ali barva ozadja in besedila izpolnjujeta zahteve, ne da bi spreminjali identiteto blagovne znamke.

Postopek:

1. Izberite osnovno barvo podjetja, npr. hsl(243°, 75%, 40%).
2. Za besedilo na svetlem ozadju potrebujete dovolj temno barvo – zmanjšajte L na 20 % (ali manj), nasičenost pa pustite visoko, da ohranite značaj.
3. Za obratno (svetlo besedilo na temnem ozadju) dvignite L na 80 %.
4. Nato s pomočjo orodja za kontrast (kot je WCAG Contrast Checker) preverite razmerje.

Ker HSL ohranja odtenek, lahko vzpostavite celoten sistem barv (primarna, sekundarna, svetlejše in temnejše različice) z enim samim izhodiščnim odtenkom. To je v RGB skoraj nemogoče brez zapletenih formul.

Omejitve HSL in zakaj orodje prikazuje tudi LAB

Kljub uporabnosti ima HSL pomembne pomanjkljivosti:

• Perceptivna neuniformnost – barve z enako izračunano svetlostjo (L) se ne zdijo enako svetle. Rumena (L=50 %) je videti veliko svetlejša od modre (L=50 %). Zato HSL ne more nadomestiti modelov, kot je CIELAB (LAB), ki so zasnovani tako, da je Evklidska razdalja v barvnem prostoru približno enaka zaznavni razliki.
• Nasičenost in svetlost nista popolnoma neodvisni – pri zelo visoki ali zelo nizki svetlosti nasičenost izgubi pomen (pri L=0 % ali L=100 % je nasičenost vedno 0).
• Barvni razpon (gamut) – tako RGB kot HSL sta vezana na barvni prostor zaslona (sRGB). Ko pretvarjate iz LAB ali CMYK, lahko vrednost pade zunaj obsega, ki ga zaslon lahko prikaže. Orodje takšno barvo prilagodi na najbližjo prikazljivo – a pri ponovni pretvorbi lahko pride do rahlega premika. To je navedeno v pravilih uporabe.
• CMYK je le ocena – izpis na zaslonu nikoli ne more natančno predstaviti tiskarskega črnila. Orodje izrecno opozarja: "CMYK izhod je ocena na zaslonu in ga ne smete uporabljati za profesionalni tisk brez preverjanja."

Praktična uporaba v spletnem razvoju

V CSS lahko HSL uporabite neposredno s funkcijo hsl() ali hsla() (z alfa prekrivnostjo). Primer:

.btn-primary {
  background-color: hsl(243°, 75%, 59%);
  color: hsl(243°, 75%, 95%);
}

Spreminjanje svetlosti v JavaScriptu je preprosto – povečate ali zmanjšate L vrednost, ne da bi se dotaknili odtenka. To omogoča enostavno generiranje temnih načinov: zmanjšajte L vseh barv za 10–20 % in obrnite črno/belo.

Orodje omogoča tudi vnos HSL vrednosti neposredno – če vnesete 243, 75%, 59%, takoj dobite RGB in vse ostale formate. To je uporabno, ko želite preveriti, kako določena HSL barva izgleda v HEX zapisu za CSS.

Pogosta vprašanja (FAQ)

1. Zakaj orodje ne sprejema RGB vrednosti z decimalnimi števili?
Ker standardna 8-bitna predstavitev uporablja le cela števila 0–255. Decimalne vrednosti bi pomenile več kot 256 nivojev, kar ni običajno za spletne barve. Če potrebujete natančnejše barve, uporabite HSL (ki podpira odstotke) ali HEX.

2. Kaj pomeni "CMYK je ocena na zaslonu"?
Tisk uporablja črnila (cijan, magento, rumeno, črno), ki se obnašajo popolnoma drugače kot svetlobni RGB. Orodje pretvori RGB v CMYK po standardni formuli, vendar brez upoštevanja profila tiskalnika. Barve na zaslonu in na papirju bodo vedno drugačne.

3. Kako orodje obravnava barve, ki so zunaj RGB obsega (npr. pri vnosu LAB)?
Orodje jih prilagodi na najbližjo prikazljivo barvo v sRGB obsegu. Če nato to prilagojeno barvo pretvorite nazaj v LAB, boste dobili nekoliko drugačne vrednosti – to je nujno zaradi omejitev zaslona.

4. Ali lahko uporabim HSL za izračun kontrasta po WCAG?
Posredno – s HSL lahko prilagodite svetlost, vendar je za dejansko razmerje kontrasta treba uporabiti relativno luminanco (izračunano iz RGB linearnih vrednosti). Orodje kontrasta ne izračunava, ampak vam prikaže vse formate, da ga lahko preverite drugje.

5. Zakaj prikazuje tudi HSV, če je HSL bolj uporaben?
HSV (Hue, Saturation, Value) se uporablja v nekaterih grafičnih orodjih (npr. Photoshop). Vrednost (V) je največji kanal RGB, kar je drugačno merilo svetlosti. Orodje prikaže oba, da lahko izberete tistega, ki ga potrebujete.

6. Ali orodje podpira barvne odtenke, kot so 0°, 120°, 240°?
Da – vsak kot od 0 do 360 je veljaven. 0° in 360° sta ista barva (rdeča). Orodje bo za vnos 0, 100%, 50% vrnilo RGB 255, 0, 0 in HEX #FF0000.

7. Kaj se zgodi, če vnesem napačno obliko, npr. "rgb(79 70 229)" brez vejic?
Orodje sprejema tudi presledke, zato je 79 70 229 veljaven vnos. Če pa vnesete črke ali oklepaje (rgb(...)), jih orodje ne razume in prikaže opozorilo o nepravilnem vnosu.

8. Ali lahko pretvorim več barv hkrati?
Ne – orodje obravnava eno barvo naenkrat. Za paketno pretvorbo potrebujete drugo rešitev, npr. skripto v Pythonu ali JavaScript konzolo brskalnika.