Pretvornik iz HEX v HSL

Neposredna pretvorba HEX v HSL – orodje, ki razume barve kot človek

Vsaka barva na zaslonu se v osnovi izraža z rdečo, zeleno in modro svetlobo (RGB), kar HEX zapis stisne v šestnajstiško kodo, kot je #1E90FF ali krajše #abc. Ta oblika je odlična za stroje, za človeško razmišljanje pa je neintuitivna. Orodje za pretvorbo HEX v HSL odpravi to težavo: iz šestnajstiškega zapisa v trenutku izračuna odtenek (hue), nasičenost in svetlost v odstotkih, hkrati pa prikaže tudi vrednosti v RGB, HSV, CMYK in LAB. Vse pretvorbe potekajo v brskalniku, brez pošiljanja podatkov na strežnik.

HEX – šestnajstiški zapis RGB komponent

HEX je kompakten način zapisa treh 8-bitnih vrednosti (0–255) v šestnajstiškem (baza 16) sistemu. Polna šestmestna koda #4f46e5 se razčleni takole:

• 4f → rdeča = 79
• 46 → zelena = 70
• e5 → modra = 229

Trimestna okrajšava #abc se avtomatsko podvoji: #aabbcc. Orodje sprejema obe obliki, z ali brez vodilnega znaka #. Če vnesete neveljaven niz, kot je #xyz ali #1234, se prikaže sporočilo: “Enter a hex color like #4f46e5 or #abc.” Pomembno: standardni HEX ne vsebuje informacije o prosojnosti (alpha kanal). Pretvorba vedno obravnava popolnoma motne barve – HSL prav tako nima alfa komponente.

HSL – odtenek, nasičenost, svetlost

HSL (Hue, Saturation, Lightness) je barvni model, zasnovan za človeško zaznavanje. Njegove tri komponente so:

• H (hue, odtenek) – kot na barvnem krogu od 0° do 360°. 0° je rdeča, 120° zelena, 240° modra.
• S (saturation, nasičenost) – intenzivnost barve, izražena v odstotkih. 0 % je siva (brez barve), 100 % je polno nasičena.
• L (lightness, svetlost) – svetlost, merjena od 0 % (črna) do 100 % (bela). Pri 50 % je barva »čista« (najsvetlejša možna pri danem odtenku in nasičenosti).

Zaradi te strukture je HSL idealen za prilagajanje tem in palet. Če želite svetlejšo različico istega odtenka, preprosto povečate L. Če želite bolj živo barvo, povečate S. Pri HEX ali RGB bi to zahtevalo ročno spreminjanje vseh treh komponent in posledično pogosto nepričakovane barvne premike.

Pretvorba: kako orodje iz HEX-a izračuna HSL

Postopek temelji na matematični pretvorbi med RGB in HSL. Najprej se HEX pretvori v tri decimalne vrednosti R, G, B (0–255). Nato se določi največja in najmanjša vrednost med njimi. Če sta enaki, je odtenek nedefiniran (barva je siva) – HSL vrne H = 0°. V nasprotnem primeru se H izračuna po delih, odvisno od tega, katera komponenta je največja.

Primer: za #4f46e5 (R=79, G=70, B=229) je največja modra (B=229), najmanjša zelena (G=70). Delta = 159. Ker je B največja, se H izračuna kot:

H = 60° × ((R – G) / delta + 4) = 60° × ((79 – 70) / 159 + 4) ≈ 60° × 4,0566 ≈ 243,4°

Svetlost L = (max + min) / 2 / 255 × 100 % = (229 + 70) / 2 / 255 × 100 % ≈ 58,6 %

Nasičenost S = delta / (1 – |2L/100 – 1|) × 100 % – v tem primeru približno 74,9 %.

Orodje vse te izračune izvede v milisekundah in prikaže HSL vrednost, zaokroženo na eno decimalno mesto.

Omejitve in posebnosti – kaj morate vedeti

• Brez alpha kanala – pretvorba vedno obravnava polno motne barve. Če potrebujete prosojnost, uporabite HSLA ali RGBA, vendar jih to orodje ne generira.
• CMYK je ocena – vrednosti v CMYK so izračunane iz RGB s približno pretvorbo, namenjeno zaslonskemu prikazu. Za profesionalni tiskanje je nujna kalibracija in uporaba barvnih profilov (ICC).
• Izven-gamut barve – če v drugem barvnem prostoru (npr. LAB ali CMYK) vnesete vrednost, ki jo zaslon ne more prikazati, jo orodje prilagodi najbližji vidni barvi. Pri ponovni pretvorbi v HEX lahko pride do manjšega odmika. To se zgodi, ker je gamut zaslona (sRGB) ožji od gamuta naprave ali tiskalnika.
• Vse v brskalniku – nobena barva se ne pošilja na strežnik, kar je pomembno za varnost pri delu z zaupnimi barvnimi shemami.

Uporaba HSL v praksi – od CSS do dostopnosti

Front-end razvijalci HSL uporabljajo v CSS za dinamične spremembe. Primer:

:root {
  --primary: hsl(243°, 75%, 59%);
}
.button:hover {
  background-color: hsl(243°, 75%, 70%); /* svetlejši */
}

UI/UX oblikovalci HSL uporabljajo za hitro ustvarjanje komplementarnih (H ± 180°), analognih (H ± 30°) ali monokromatskih (S in L se spreminjata) palet. Orodje za pretvorbo HEX→HSL je tu ključno: iz dane HEX kode (npr. #4f46e5) dobite natančne HSL vrednosti, ki jih lahko neposredno vstavite v CSS lastnosti.

Dostopnostni auditorji HSL cenijo zaradi transparentnega upravljanja kontrasta. WCAG zahteva minimalno razmerje kontrasta 4,5:1 za standardno besedilo. S HSL lahko ohranite odtenek in povečate svetlost (L) ali nasičenost (S), da dosežete zahtevano razmerje, ne da bi barva izgubila svoj značaj.

Pogosta vprašanja (FAQ)

Kaj se zgodi, če vnesem neveljavno HEX kodo?
Orodje prikaže sporočilo: “Enter a hex color like #4f46e5 or #abc.” Sprejema le veljavne šestmestne ali trimestne šestnajstiške nize.

Ali orodje podpira HEX z alpha kanalom (npr. #4f46e580)?
Ne. Standardni HEX nima alfa kanala. Če potrebujete prosojnost, uporabite RGBA ali HSLA – to orodje jih ne generira.

Zakaj so CMYK vrednosti le ocena?
Ker gre za približno matematično pretvorbo iz sRGB brez upoštevanja tiskalnih profilov. Za natančen tisk uporabite kalibriran program.

Kako deluje trimestni shorthand?
Vsak znak se podvoji: #abc postane #aabbcc. Priporočljivo je le, kadar so komponente enake (npr. #666 je #666666).

Ali se vnesene barve shranjujejo?
Ne. Vse pretvorbe potekajo izključno v vašem brskalniku. Orodje ne pošilja, ne shranjuje in ne obdeluje podatkov na strežniku.

Kakšna je razlika med HSL in HSV?
Oba modela uporabljata enak odtenek, vendar HSL definira svetlost (Lightness) kot povprečje največje in najmanjše RGB komponente, medtem ko HSV uporablja vrednost (Value) kot največjo RGB komponento. Zato je bela v HSL pri L=100 %, v HSV pri V=100 %; črna pa v obeh pri 0 %. Za večino palet je HSL bolj intuitiven.

Povzetek ključnih vrednosti