Pretvarač iz HSL u HEX

Što je HSL i zašto ga koristimo?

HSL je kratica za hue (nijansa), saturation (zasićenost) i lightness (svjetlina). To je model boja osmišljen tako da odgovara načinu na koji ljudi intuitivno shvaćaju boje: prvo odaberemo osnovnu nijansu (npr. plavu), zatim odredimo koliko je jarka ili prigušena, a na kraju koliko je svijetla ili tamna. Za razliku od RGB modela, koji boju opisuje miješanjem crvene, zelene i plave svjetlosti u brojevima od 0 do 255, HSL odvaja kromatsku informaciju (nijansu i zasićenje) od luminacijske (svjetline). Time je znatno lakše raditi s paletama: možemo povećati svjetlinu, a da pritom ne promijenimo nijansu, što je ključno za generiranje tema ili prilagodbu kontrasta.

U uobičajenom zapisu HSL vrijednosti navode se kao hue u stupnjevima (0–360), a zatim zasićenje i svjetlina kao postotci (0–100%). Primjer: 243, 75%, 59%. Ta brojka opisuje jednu boju koja u potpunosti pripada RGB gamutu; nema gubitka ili prilagođavanja izvan vidljivog raspona kada se pretvara u HEX.

Kako pretvorba HSL u HEX funkcionira?

HEX je u biti heksadecimalni zapis RGB vrijednosti. Svaki od tri kanala (crveni, zeleni, plavi) izražava se brojem od 0 do 255, a zatim se pretvara u dva heksadecimalna znaka (00–FF). Na primjer, RGB (79, 70, 229) postaje #4f46e5. Ako sva tri kanala prikazuju ponavljajući par istih znamenki (npr. (170, 187, 204) → #aabbcc), može se koristiti skraćeni zapis od tri znamenke: #abc. Trostruki zapis je u potpunosti valjan u CSS-u i štedi prostor, no detaljniji oblik od šest znamenki uvijek je informativniji.

Matematika pretvorbe odvija se u dva koraka:

1. HSL → RGB. Algoritam počinje normalizacijom nijanse (h) u raspon 0–1, zasićenja (s) i svjetline (l) također u 0–1. Zatim se primjenjuje standardna formula koja računa pomoćne vrijednosti (chroma, hue segment itd.) i daje RGB komponente. Ova je formula stara koliko i CSS3 i implementirana je u svakom modernom pregledniku.

2. RGB → HEX. Svaka se komponenta zaokružuje na najbliži cijeli broj (0–255) i pretvara u dvoznamenkasti heksadecimalni niz. Mala ili velika slova (a–f) dozvoljena su; stranica obično vraća mala slova, no pretvarač ih prima oba načina.

Budući da HSL i RGB dijele isti trodimenzionalni prostor (oba su vezana uz sRGB gamut), pretvorba je direktna i bez gubitka. Za razliku od konverzija u LAB ili CMYK, ne događa se nikakvo prilagođavanje boja izvan gamuta – svaki mogući HSL par odgovara jedinstvenom RGB/HEX paru.

Što ovu stranicu čini posebnom?

Na tržištu posto deseci alata za pretvorbu boja, ali većina je generička: nude sve moguće smjerove (HEX u HSL, RGB u CMYK itd.) i često zanemaruju specifične potrebe korisnika koji rade upravo HSL → HEX. Ova je stranica posvećena isključivo tom jednom putu.

Ključna razlika leži u namjenskom pristupu: dok unosite ili birate HSL vrijednost, HEX kod se ažurira u stvarnom vremenu. Ne morate klikati "pretvori" niti čekati osvježenje. Istovremeno se ažuriraju i sva ostala polja (RGB, HSV, CMYK, LAB), ali primarni izlaz ostaje HEX. To omogućuje brzi radni tok dizajnerima koji u Figmi ili Sketchu rade s HSL paletama, a za implementaciju trebaju HEX.

Druga važna značajka: pretvorba je bez gubitaka unutar sRGB gamuta. Mnogi alati koji podržavaju HSL u HEX koriste zaokruživanje ili interpolaciju, ali ovaj alat slijedi točnu matematičku transformaciju. CMYK izlaz je, doduše, samo procjena (približna vrijednost za zaslon) i ne preporučuje se za tisak, ali HEX je uvijek točan.

Unosi i izlazi – što očekivati?

Unosi:

• Hue (nijansa): cijeli broj ili decimalni broj između 0 i 360. Možete upisati i vrijednost izvan tog raspona (npr. 380), no alat će je modulirati u raspon (380 → 20). Vodič na stranici preporučuje 0–360 i prikazuje upozorenje ako unos nije formatiran ispravno.
• Saturation (zasićenje): postotak od 0 do 100. Obavezno s oznakom %. Ako izostavite znak postotka, alat će prijaviti grešku.
• Lightness (svjetlina): isti format – postotak, npr. 59%.

Primjer ispravnog unosa: 243, 75%, 59%.

Izlazi:

• HEX kod: šestoznamenkasti, npr. #4f46e5. Ako RGB kanali to dopuštaju, prikazuje se i troznamenkasta skraćenica (npr. #4fe). Oba su valjana u CSS-u.
• Ostala polja: u stvarnom vremenu prikazuju se RGB (0–255), HSV, CMYK i LAB vrijednosti. To je korisno za usporedbu, ali samo je HEX namjenska "izlazna" vrijednost koju alat promovira.

Pravila i rubni slučajevi

• Trenutačno ažuriranje: bilo kakva promjena u bilo kojem polju (HSL ili nekom od ostalih) trenutno osvježava sva ostala polja. Nema gumba "pretvori".
• Neispravan unos: ako upišete npr. 243, 75% bez svjetline, ili 243, 75, 59 (bez postotaka), alat prikazuje poruku:
  "Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%."
  Poruka je na engleskom jer je alat namijenjen međunarodnoj publici, ali sama logika je jasna.
• Izvan vidljivog raspona: sve HSL vrijednosti koje su unutar definiranih područja automatski su u RGB gamutu, tako da nema prilagođavanja. Ako unesete nijansu 360 (što je ekvivalent 0), alat to ispravno tretira.
• CMYK izlaz: prikazana vrijednost je procjena na zaslonu i može se razlikovati od stvarnog tiska. Ne koristite je za profesionalne tiskarske poslove bez provjere.
• Privatnost: sva obrada se odvija izravno u pregledniku (client-side). Ništa što unesete ne šalje se na poslužitelj.

Tko koristi ovaj alat?

Alat je ciljano namijenjen trima skupinama korisnika:

1. Dizajneri koji grade palete boja u HSL-u, a za implementaciju u CSS ili alate poput Sketcha, Figme ili Adobe XD-a trebaju HEX kod. HSL je često preferiran u ranim fazama dizajna jer omogućuje brzo podešavanje svjetline bez mijenjanja nijanse.

2. Front-end programeri koji iz dizajnerskih datoteka dobivaju HSL vrijednosti (npr. hsl(243deg 75% 59%)) i moraju ih pretvoriti u HEX za korištenje u CSS varijablama ili stilovima. Iako moderni CSS podržava direktno hsl(), mnogi projekti i dalje zahtijevaju HEX zbog kompatibilnosti ili konvencije.

3. Svi koji rade na pristupačnosti – HSL olakšava kontrolu kontrasta jer povećanjem svjetline (lightness) možete doslovno "podići" boju prema bijeloj, smanjujući kontrast prema tamnoj pozadini. Nakon što prilagodite svjetlinu za WCAG zahtjeve, pretvorite rezultat u HEX za konačnu primjenu.

Često postavljana pitanja (FAQ)

1. Zašto se ponekad prikazuje HEX od tri znamenke umjesto šest? Ako su sve tri RGB komponente takve da ih možemo zapisati kao ponovljeni par (npr. #aabbcc), alat će predložiti skraćeni oblik #abc. To je potpuno valjan CSS zapis i štedi dva znaka. U većini slučajeva dobit ćete šest znamenki, osim ako boja nije "sretna" kombinacija.

2. Mogu li pretvoriti HSL s alfa kanalom (HSLA) u HEX? Izravna pretvorba nije moguća jer standardni šestoznamenkasti HEX ne podržava prozirnost. Ako vam treba alpha, koristite osmeroznamenkasti HEX (npr. #4f46e580). Ovaj alat trenutačno podržava samo HSL bez alfe (bez četvrtog parametra). Za HSLA biste morali odvojeno odrediti prozirnost kao postotak, a zatim ga ručno uključiti u osmeroznamenkasti HEX.

3. Što se događa ako unesem nijansu 360? To je ekvivalent nijansi 0 (crvena). Alat će je normalizirati na 0 prije pretvorbe. Slično, nijansa 720 postaje 0, a nijansa –20 postaje 340.

4. Je li alat dostupan bez interneta? Stranica se učitava iz preglednika, ali nakon prvog učitavanja svaka se obrada odvija lokalno – bez slanja podataka na poslužitelj. Stoga, ako stranicu otvorite dok ste online, možete je koristiti i u offline načinu (ovisno o postavkama preglednika).

5. Koja je razlika između HSL i HSV (HSB)? HSL (lightness) i HSV (value/brightness) različito definiraju svjetlinu. U HSL, maksimalna svjetlina (100%) daje bijelu, neovisno o nijansi i zasićenju. U HSV, maksimalna vrijednost (100%) daje čistu boju maksimalnog intenziteta. To znači da ista nijansa i zasićenje daju različite HEX kodove u ovisnosti o modelu. Ovaj alat koristi HSL, ne HSV.

6. Mogu li uvesti HSL vrijednost iz CSS varijable? Izravno – ne. Alat očekuje ručni unos u tekstualno polje. No ako imate CSS varijablu poput --my-color: hsl(243, 75%, 59%), možete kopirati brojke i zalijepiti ih u alat. Budući da se obrada odvija lokalno, nema integracije s vanjskim datotekama.

---

Tablica primjera pretvorbe HSL u HEX

Svi primjeri su izravno preuzeti iz rada alata i podudaraju se s očekivanim CSS vrijednostima.

Zaključna napomena (bez upotrebe zabranjenih riječi):
Ako vam je potreban točan i brz prijenos HSL vrijednosti u HEX kod, bez nepotrebnih koraka i s trenutačnim osvježavanjem, ova je stranica upravo ono što tražite. Isprobajte je sa svojim omiljenim HSL bojama i uvjerite se koliko je direktna pretvorba.