Pretvornik iz HSL v HEX

Stran za pretvorbo HSL v HEX: takojšnja pretvorba barvnega modela

Stran hsl-to-hex omogoča, da vnesete barvo v modelu HSL (angl. hue, saturation, lightness) in v realnem času dobite njeno šestnajstiško (HEX) kodo. Hue vnesete v stopinjah od 0 do 360, saturacijo in svetlost pa v odstotkih od 0 do 100. Orodje HEX vrednost posodablja sproti, brez osvežitve strani ali pošiljanja podatkov na strežnik.

V čem je ta stran drugačna

Večina spletnih barvnih pretvornikov ponuja več smeri pretvorbe hkrati, pogosto s poudarkom na RGB ali HEX. Ta stran je namenjena izključno smeri HSL → HEX. HSL je barvni model, zasnovan za človeško razmišljanje o barvah – spreminjanje svetlosti ohranja odtenek, zato je nepogrešljiv pri ustvarjanju barvnih palet in tem. HEX je šestmestni (ali trimestni) zapis RGB vrednosti v šestnajstiškem sistemu, ki ga uporabljajo CSS in orodja za oblikovanje. Pretvorba med HSL in HEX (prek RGB) je neposredna in brezizgubna znotraj obsega sRGB, kar je velika prednost pred pretvorbami, ki vključujejo LAB ali CMYK – te lahko zaradi ožjega barvnega obsega prilagajajo barve, ki so zunaj gamuta.

Vhodi in izhodi

Uporabnik poda tri vrednosti:

• Hue (odtenek): celo število med 0 in 360.
• Saturation (nasičenost): odstotek med 0 in 100, zapisan s simbolom %.
• Lightness (svetlost): odstotek med 0 in 100, zapisan s simbolom %.

Primer veljavnega vnosa: 243, 75%, 59%.

Orodje vrne:

• HEX kodo, najpogosteje šestmestno, na primer #4f46e5.
• Če je vsak od RGB kanalov mogoče zapisati z eno šestnajstiško števko, prikaže tudi trimestno okrajšavo – na primer #abc namesto #aabbcc.
• Hkrati se posodobijo tudi druge barvne vrednosti: RGB, HSV, CMYK in LAB.

Pravila in robni primeri

Urejanje katerega koli polja takoj sproži posodobitev vseh ostalih. Če so vnesene vrednosti zunaj dovoljenih obsegov – hue izven 0–360, saturacija ali svetlost izven 0–100 – ali če format ni pravilen (npr. manjkajoč simbol %), orodje prikaže napako: »Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.«

Pretvorba iz HSL v HEX vedno ostane znotraj vidnega RGB obsega – pri tem ne pride do prilagajanja barv zunaj gamuta, kot bi se lahko zgodilo pri pretvorbah iz LAB v sRGB. Pri CMYK vrednostih je treba upoštevati, da so prikazane ocene za zaslon in se lahko razlikujejo od profesionalnih tiskarskih vrednosti. Vsa obdelava poteka v brskalniku; nič od vnesenega se ne pošilja na strežnik.

Za koga je ta stran namenjena

• Oblikovalci, ki gradijo barvne palete v HSL in potrebujejo HEX kode za uporabo v kodi ali orodjih, kot sta Figma in Sketch.
• Spletni razvijalci, ki iz oblikovalskih datotek dobijo HSL vrednosti in jih morajo pretvoriti v CSS lastnosti, kot so background-color, color ali border-color.
• Vsakdo, ki prilagaja teme ali preverja kontrastna razmerja po smernici WCAG – HSL omogoča, da zlahka povečate svetlost (in s tem kontrast) ob ohranjanju odtenka, nato pa dobljeno vrednost uporabite v produkcijski kodi kot HEX.

Kako HSL in HEX matematično povezujeta

Razumevanje pretvorbe pomaga pri odpravljanju napak. Postopek je:

1. HSL → RGB:

   • Normalizirajte H na obseg 0–1 (delite s 360).
   • S in L pretvorite v decimalna števila (delite s 100).
   • Izračunajte vmesne vrednosti:
     • C = (1 - |2L - 1|) × S (kromatičnost)
     • X = C × (1 - |(H×6) % 2 - 1|)
     • m = L - C/2
   • Določite začetne RGB vrednosti glede na šestino kroga H:
     • Če je H med 0 in 1/6: (C, X, 0)
     • Med 1/6 in 2/6: (X, C, 0)
     • Med 2/6 in 3/6: (0, C, X)
     • Med 3/6 in 4/6: (0, X, C)
     • Med 4/6 in 5/6: (X, 0, C)
     • Med 5/6 in 1: (C, 0, X)
   • Dodajte m vsaki komponenti: R' = R + m, G' = G + m, B' = B + m.
   • Pomnožite s 255 in zaokrožite na najbližje celo število.

2. RGB → HEX:

   • Vsako od treh celih števil (0–255) pretvorite v dvomestno šestnajstiško število. Primer: 79 → 4F, 70 → 46, 229 → E5, kar da #4F46E5. Orodje običajno izpiše male črke, vendar so velike črke enako veljavne v CSS.
   • Če sta obe števki v vsakem paru enaki (npr. #AA22CC), lahko uporabite trimestno okrajšavo #A2C. Orodje to prikaže samodejno.

Pogoste napake in kako se jim izogniti

• Manjkajoč simbol %: Vnos 243, 75, 59 je neveljaven. Orodje zahteva 243, 75%, 59%.
• Hue izven obsega: Hue mora biti med 0 in 360. Vrednosti kot 400 ali −20 povzročijo napako.
• Napačno razumevanje trimestne HEX kode: #abc pomeni #aabbcc. Ne morete sami skrajšati poljubne kode, ker to spremeni barvo. Orodje prikaže okrajšavo le, kadar so podvojitve prisotne.
• Zamenjava HSL z HSB/HSV: HSB (ali HSV) uporablja drugačno definicijo svetlosti/brightness. HSL in HSB nista neposredno zamenljiva – pretvorba med njima zahteva dodatne korake.
• Predpostavljanje, da je HEX koda univerzalna: HEX brez alfa kanala (osemmestna oblika, npr. #4f46e5ff) ne prenaša prosojnosti. HSL pa prosojnosti naravno ne vsebuje – zato je pretvorba pravilna le za polno neprosojne barve.

Pogosto zastavljena vprašanja

Ali lahko pretvorim barvo, ki je zunaj obsega sRGB? Ne. HSL, kot ga definira ta stran, temelji na sRGB barvnem prostoru. Vse vrednosti znotraj 0–360 za H in 0–100 % za S ter L so znotraj sRGB. Če bi uporabili drug barvni prostor (npr. ProPhoto RGB), bi se obseg spremenil, vendar to orodje tega ne podpira.

Zakaj se CMYK vrednost razlikuje od tiste v profesionalnem tiskarskem programu? CMYK prikazan na zaslonu je ocena, pridobljena s približnim algoritmom. Profesionalne tiskarne uporabljajo ICC profile in namenske barvne knjižnice, ki upoštevajo tiskarski stroj in papir. Te vrednosti so zato informativne.

Kaj pomeni trimestna HEX koda? Trimestna HEX koda je okrajšava za šestmestno, kadar so v vsakem paru števke enake. Na primer #aabbcc lahko zapišemo kot #abc. V CSS deluje enako, zato oblikovalci pogosto uporabljajo krajši zapis za enostavnejše barve.

Ali stran deluje brez internetne povezave? Prvi nalog zahteva prenos orodja v brskalnik. Ko je stran enkrat naložena, vsa pretvorba poteka lokalno – za nadaljnje delo ne potrebujete internetne povezave. To pomeni, da se vneseni podatki nikoli ne pošiljajo na strežnik.

Kako pretvorim HSL s prosojnostjo v HEX? HEX v šestmestni obliki ne podpira prosojnosti. Če potrebujete HEX z alfa kanalom, uporabite osemmestno obliko (#RRGGBBAA), kjer AA predstavlja prosojnost v šestnajstiškem zapisu. HSL pa prosojnosti ne vsebuje, zato morate alfa vrednost določiti ločeno. To orodje prikazuje le šestmestno HEX kodo.

Zakaj se ob vnosu napačnega formata prikaže angleško sporočilo? Sporočilo je del osnovnega vmesnika orodja in je zapisano v angleščini, da ostane skladno z drugimi deli spletnega mesta. Sporočilo natančno pove, kakšen vnos je pričakovan: »Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.«