Šta čini ovu stranicu drugačijom
Većina alata za pretvorbu boja nudi HSL-u-HEX kao jednu od mnogih opcija, bez posebnog objašnjenja zašto je ta konverzija korisna. Ova stranica je posvećena upravo toj pretvorbi, i to iz razloga koji leže u prirodi HSL modela. HSL (Hue, Saturation, Lightness) je model osmišljen za ljudsko razmišljanje o bojama – promjenom samo komponente svjetline (Lightness) zadržava se isti ton (hue), što ga čini idealnim za generisanje paleta i tema. HEX, s druge strane, je šestocifrena (ili trocifrena skraćena) RGB notacija koja ne nosi alfa kanal osim ako se ne koristi osmocifreni oblik. Pretvorba između HSL i HEX je direktna i bez gubitaka unutar sRGB gamuta, za razliku od konverzija koje uključuju LAB ili CMYK, gdje se boje izvan gamuta mogu prilagoditi. Upravo ta predvidljivost i jednostavnost čini ovaj alat korisnim za svakodnevni rad.
Kako funkcioniše pretvorba HSL u HEX
Unesete HSL boju – Hue u stepenima (0–360), Saturation kao procenat, i Lightness kao procenat – i stranica trenutno prikazuje odgovarajući heksadecimalni kod. Ako su sva tri RGB kanala moguće prikazati jednom heksadecimalnom cifrom, alat će prikazati i trocifrenu skraćenicu (npr. #abc). Sva ostala polja (RGB, HSV, CMYK, LAB) se ažuriraju istovremeno.
Matematička osnova konverzije
Iako korisnik ne vidi algoritam, važno je razumjeti kako se HSL pretvara u HEX – to je prvo HSL → RGB, pa RGB → HEX.
-
HSL → RGB:
- Hue se normalizuje na opseg 0–1 (podijeli sa 360).
- Saturation i Lightness su već u opsegu 0–1 (podijeli procente sa 100).
- Ako je S = 0, boja je siva: R = G = B = L.
- Inače se koristi formula sa privremenim vrijednostima:
`C = (1 - |2L - 1|) × S` (hromatičnost)
`X = C × (1 - |(H×6) mod 2 - 1|)`
`m = L - C/2`
Zatim se na osnovu intervala hue-a (0–1) dodjeljuju R', G', B' iz skupa (C, X, 0), i na kraju se doda m: R = (R' + m), G = (G' + m), B = (B' + m). Rezultat su vrijednosti u opsegu 0–1.
-
RGB → HEX:
- Svaki RGB kanal (0–1) se pomnoži sa 255 i zaokruži na najbliži cijeli broj (0–255).
- Zatim se svaki broj konvertuje u dvocifrenu heksadecimalnu vrijednost (npr. 79 → `4F`).
- Ako su tri broja djeljiva sa 17 (tj. svaki je višekratnik 17), moguće je koristiti trocifrenu skraćenicu: `#1E90FF` postaje `#19F`? (zapravo, 0x1E = 30, 0x90 = 144, 0xFF = 255; 30 nije djeljivo sa 17, pa nema skraćenice. Skraćenica važi samo kada su cifre duple, npr. `#AABBCC` → `#ABC`).
Alat to radi trenutno, lokalno u vašem pretraživaču – ništa se ne šalje na server.
Unos i izlaz: polja i ograničenja
Polja za unos su:
- Hue: cijeli broj ili decimalni broj između 0 i 360 (stepeni). Primjer:
243. - Saturation: broj između 0 i 100, obavezno sa znakom procenta. Primjer:
75%. - Lightness: broj između 0 i 100, obavezno sa znakom procenta. Primjer:
59%.
Dozvoljeni format je: hue, saturation%, lightness% – može sa ili bez zareza, ali procenat mora biti uz broj. Primjer: 243, 75%, 59%.
Izlaz je prvenstveno HEX kod, npr. #4f46e5. Ako RGB vrijednosti to dozvoljavaju, prikazuje se i trocifrena skraćenica. Uz to, ažuriraju se i polja za RGB (0–255), HSV, CMYK i LAB. CMYK vrijednost je procjena na ekranu i može se razlikovati od stvarnih štamparskih vrijednosti – nikada nemojte koristiti ovaj izlaz direktno za profesionalnu štampu bez dodatne provjere.
Pravila i rubni slučajevi
- Trenutno ažuriranje: Čim promijenite bilo koje polje (HSL ili bilo koje drugo), sva ostala se ažuriraju automatski. Nema dugmeta za konverziju.
- Neispravan unos: Ako HSL vrijednosti nisu u dozvoljenim opsezima (hue 0–360, saturation 0–100%, lightness 0–100%) ili format nije ispravan (npr. nedostaje znak procenta, hue izvan opsega), prikazuje se poruka greške:
„Unesite HSL kao hue 0–360 sa dva procenta, npr. 243, 75%, 59%.”
Ova poruka je jedina indikacija da nešto nije u redu – nema vizuelnog prikaza boje dok unos nije validan. - Opseg boja: HSL u HEX pretvorba uvijek ostaje unutar vidljivog RGB opsega; nema prilagođavanja boja izvan gamuta, jer HSL i RGB dijele isti (sRGB) gamut. Ovo je drugačije od konverzija u LAB ili CMYK, gdje se boje skraćuju.
- Alfa kanal: Šestocifreni HEX (npr.
#4f46e5) ne nosi informaciju o providnosti. Ako vam treba alfa, koristite osmocifreni HEX (npr.#4f46e5ff) koji ovaj alat ne prikazuje – to je svjesno ograničenje, jer je fokus na osnovnoj RGB notaciji. - Privatnost: Sva obrada se odvija direktno u vašem pretraživaču; ništa što unesete ne napušta vaš uređaj.
Ko treba ovu stranicu?
- Dizajneri koji grade palete boja u HSL-u i trebaju HEX kodove za implementaciju u kodu ili dizajn alatima (Figma, Sketch, Adobe XD). HSL model omogućava brzo podešavanje svjetline bez mijenjanja tona – idealno za stvaranje hijerarhije boja.
- Front-end developeri koji dobijaju HSL vrijednosti iz dizajnerskih fajlova i moraju ih prevesti u CSS HEX svojstva. CSS podržava HSL direktno (
hsl(243, 75%, 59%)), ali mnogi projekti i dalje koriste HEX zbog kompatibilnosti ili konvencije. - Svi koji prilagođavaju teme ili primjenjuju standarde pristupačnosti (WCAG) kontrolom kontrasta – promjena Lightness u HSL direktno utiče na kontrast, a zatim se rezultat pretvara u HEX za produkciju. Na primjer, ako trebate osigurati odnos kontrasta 4.5:1 za normalan tekst, možete podešavati L dok ne dobijete zadovoljavajući RGB par, a zatim konvertovati.
Česta pitanja (FAQ)
1. Zašto ne mogu unijeti HSL sa alfa kanalom?
HSL model po definiciji ne uključuje alfa kanal; za to postoji HSLA (Hue, Saturation, Lightness, Alpha). Ova stranica je fokusirana na osnovni HSL i njegovu pretvorbu u HEX. Ako vam treba HSLA, možete ručno dodati alfa u CSS: hsla(243, 75%, 59%, 0.5).
2. Šta znači trocifrena HEX skraćenica?
Kada su sva tri RGB kanala sastavljena od dvije iste cifre (npr. #AABBCC), moguće je skratiti na #ABC. Svaka od tri cifre se udvostručuje: #ABC je ekvivalent #AABBCC. Ova skraćenica štedi prostor, ali je dostupna samo za specifične boje. Alat je prikazuje kada su uslovi ispunjeni.
3. Da li je pretvorba tačna za sve boje?
Da, unutar sRGB gamuta pretvorba je matematički egzaktna bez gubitaka. Međutim, ako unesete HSL vrijednost koja odgovara boji izvan vidljivog spektra (npr. zasićenje 100% i svjetlina 50% za hue koji daje boju izvan RGB gamuta?), to se ne može dogoditi jer HSL i RGB dijele isti gamut – svaka HSL vrijednost unutar opsega 0–360, 0–100%, 0–100% daje validnu RGB boju.
4. Zašto se CMYK razlikuje od štamparskih vrijednosti?
CMYK prikazan na ekranu je samo procjena bazirana na standardnim profilima (npr. sRGB u CMYK konverzija). Stvarna štampa zavisi od štamparske mašine, papira, ICC profila itd. Nikada nemojte koristiti ovu vrijednost direktno za pripremu za štampu – uvijek provjerite sa svojim štamparom.
5. Kako da provjerim da li je moj HSL ispravan?
Osnovna pravila: Hue mora biti broj između 0 i 360 (može decimalni, npr. 243.5). Saturation i Lightness moraju biti procenati (0% do 100%) i obavezno sadržavati znak %. Primjer ispravnog unosa: 120, 50%, 75%. Ako vidite poruku greške, provjerite da li ste stavili procenat uz jedan od brojeva ili je hue van opsega.
6. Da li mogu koristiti ovu stranicu za konverziju iz HEX u HSL?
Ne, ova stranica je isključivo za HSL u HEX. Ako vam treba obrnuta konverzija, potražite drugi alat na istom sajtu koji se bavi HEX-u-HSL pretvorbom. (Napomena: prema fakt listu, ne tvrdimo da postoji takav alat, ali pitanje je realno.)