Pretvorba HEX u HSL: potpuni vodič kroz format boja koji razumije ljudsko oko
Stranica za pretvorbu HEX u HSL prima šestoznamenkasti heksadecimalni kod (poput #1E90FF) ili troznamenkasti zapis (#abc) i trenutno vraća ekvivalentnu HSL vrijednost – nijansu (hue) u stupnjevima, zasićenje (saturation) i svjetlinu (lightness) u postocima. Ovdje nema općih savjeta o bojama; ovaj alat postoji zbog jedne ključne razlike: HEX je kompaktna RGB notacija, dok je HSL stvoren za ljudsko rasuđivanje.
Zašto HEX nije intuitivan, a HSL jest
HEX zapis boje sastoji se od šest heksadecimalnih znamenki (ili tri u skraćenom obliku) koje izravno kodiraju crvenu, zelenu i plavu komponentu u bazi 16. Na primjer, #4f46e5 znači: crvena = 4f (79 decimalno), zelena = 46 (70), plava = e5 (229). Ovaj format je sažet i standardiziran u CSS-u i dizajnerskim alatima, ali je beskoristan za brze prilagodbe boje. Želite li tamniju nijansu iste boje? Morate ručno izračunati nove RGB vrijednosti.
HSL (hue, saturation, lightness) rješava upravo taj problem. Nijansa se mjeri u stupnjevima na kružnici boja (0–360), gdje je 0° crvena, 120° zelena, 240° plava. Zasićenje je postotak intenziteta boje (0% = siva, 100% = puna boja), a svjetlina je postotak od potpuno crne (0%) do potpuno bijele (100%). Ljudski um prirodno razmišlja u tim terminima: "želim istu nijansu, ali svjetliju" znači samo povećanje svjetline uz zadržavanje nijanse i zasićenja.
Alat prihvaća samo validne šestoznamenkaste ili troznamenkaste heksadecimalne kodove, sa ili bez vodećeg znaka #. Neispravan unos vraća poruku: "Unesite heksadecimalnu boju poput #4f46e5 ili #abc." Ni HEX ni HSL ne sadrže alfa kanal (prozirnost) – konverzija uvijek radi s potpuno neprozirnim bojama.
Matematička pozadina konverzije HEX u HSL
Iza jednostavnog sučelja krije se precizan matematički postupak. Prvo se HEX vrijednost pretvara u RGB (svaka komponenta u rasponu 0–255). Zatim se RGB normalizira na decimalne vrijednosti između 0 i 1 dijeljenjem s 255.
Formula za izračun nijanse (H) koristi maksimalnu (M) i minimalnu (m) RGB komponentu te razliku (C = M - m):
- Ako je C = 0, H = 0 (boja je akromatska, siva).
- Ako je M = crvena, H = 60° × ((zelena - plava) / C mod 6).
- Ako je M = zelena, H = 60° × ((plava - crvena) / C + 2).
- Ako je M = plava, H = 60° × ((crvena - zelena) / C + 4).
Rezultat se normalizira na raspon 0–360 stupnjeva.
Svjetlina (L) se računa kao (M + m) / 2.
Zasićenje (S) ovisi o svjetlini:
- Ako je L ≤ 0.5, S = C / (M + m).
- Ako je L > 0.5, S = C / (2 - M - m).
Sve se na kraju pretvara u postotke (S × 100%, L × 100%) i cjelobrojnu vrijednost za H.
Obrnuti postupak – iz HSL u HEX – koristi iste matematičke korake u obrnutom smjeru, ali uz mogući gubitak preciznosti zbog zaokruživanja.
Prikaz boja u svim formatima i rubni slučajevi
Osim HSL vrijednosti, stranica prikazuje istu boju u HEX, RGB, HSV, CMYK i LAB formatu. Sva polja ažuriraju se istovremeno dok uređujete unos. CMYK vrijednosti su procjena za zaslon i ne smiju se koristiti za profesionalni tisak bez kalibracije – stvarni tisak ovisi o vrsti papira, tinti i profilu boja.
Kada unesete vrijednost u drugom prostoru boja (npr. LAB ili CMYK) koja izlazi iz vidljivog RGB gamuta, alat automatski prilagođava boju najbližoj prikazivoj boji. To znači da će ponovna konverzija natrag u HEX dati blago drugačiju vrijednost od prvotne. Ovo nije greška alata, već inherentno ograničenje: sRGB prostor (u kojem rade zasloni) ne može prikazati sve boje koje opisuju LAB ili CMYK modeli.
Sve konverzije odvijaju se isključivo u vašem pregledniku. Ni jedan podatak ne napušta vaše računalo – alat ne pohranjuje i ne šalje unesene boje na poslužitelj.
Kome je ovaj alat namijenjen i zašto
Front-end developerima koji pišu CSS i trebaju pretvoriti HEX boju iz dizajnerskog mockupa u HSL radi jednostavnijeg podešavanja hover stanja ili varijanti teme. Umjesto pogađanja RGB vrijednosti za "malo tamniju verziju", dovoljno je smanjiti L (lightness) za 10%.
UI/UX dizajnerima koji razmišljaju u terminima nijanse, zasićenja i svjetline i trebaju uskladiti brend boju zadanu u HEX formatu. HSL čini stvaranje komplementarnih, analognih ili monokromatskih shema trivijalnim – samo pomaknete H za 30°, 60° ili 180°.
Svima koji grade palete boja – HSL olakšava održavanje iste nijanse uz različite razine svjetline i zasićenja, što je ključno za konzistentan dizajn.
Auditorima pristupačnosti weba koji provjeravaju omjere kontrasta prema WCAG smjernicama. HSL je intuitivniji od HEX-a ili RGB-a za procjenu potrebnog povećanja kontrasta: možete zadržati nijansu, a povećati svjetlinu pozadine i smanjiti svjetlinu teksta dok ne postignete omjer 4.5:1 (AA) ili 7:1 (AAA).
Praktične razlike HSL vs. HSV
I HSL i HSV (HSB) dijele nijansu (hue) kao zajedničku komponentu, ali definiraju zasićenje i svjetlinu/brightness na različite načine. U HSV modelu, svjetlina (brightness) je maksimalna RGB komponenta, dok je u HSL svjetlina prosjek maksimuma i minimuma. Praktična posljedica: boje s istom HSV svjetlinom mogu imati različitu HSL svjetlinu. Na primjer, čista crvena (#FF0000) ima HSL svjetlinu 50%, dok čista plava (#0000FF) također ima HSL svjetlinu 50% – ali u HSV-u crvena ima brightness 100%, a plava također 100%. Razlika postaje očita kod svjetlijih nijansi: žuta (#FFFF00) ima HSL svjetlinu 50%, ali HSV brightness 100% jer je maksimalna komponenta 255.
Alat prikazuje obje reprezentacije (HSL i HSV) tako da možete usporediti i koristiti onu koja vam više odgovara za konkretan zadatak.
Pristupačnost i HSL
WCAG smjernice za kontrast oslanjaju se na relativnu luminaciju koja se računa iz RGB komponenti, ali HSL olakšava vizualizaciju potrebnih prilagodbi. Ako imate HEX boju #4f46e5 (indigo) i želite bijeli tekst na njoj, provjerite kontrast. Ako je nedovoljan (manji od 4.5:1 za normalni tekst), možete potamniti pozadinu smanjenjem L vrijednosti u HSL-u bez mijenjanja nijanse ili zasićenja. Time zadržavate vizualni identitet boje, a povećavate čitljivost.
Alat ne računa kontrast, ali pruža HSL vrijednost koju možete direktno koristiti u CSS-u i dalje prilagođavati.
Najčešća pitanja (FAQ)
Koja je razlika između šestoznamenkastog i troznamenkastog HEX zapisa?
Troznamenkasti zapis je skraćenica gdje se svaka znamenka udvostručuje: #abc postaje #aabbcc. To omogućuje samo 4096 boja (16³) umjesto 16,7 milijuna (256³) koliko nudi šestoznamenkasti zapis. Alat podržava oba formata.
Mogu li unijeti HEX boju bez znaka #?
Da, alat prihvaća kodove i s # i bez njega. 4f46e5 i #4f46e5 daju isti rezultat.
Zašto dobivam drugačiju HEX vrijednost kada prilagodim HSL boju i vratim je natrag?
Zbog zaokruživanja u matematičkim konverzijama. RGB vrijednosti su cijeli brojevi (0–255), dok HSL koristi decimalne postotke. Mala odstupanja su normalna, posebno kod vrlo tamnih ili vrlo svijetlih boja.
Mogu li koristiti dobivenu CMYK vrijednost za profesionalni tisak?
Ne. CMYK vrijednosti su aproksimacija za zaslon bez uzimanja u obzir profila boja, papira i tinte. Za tisak koristite namjenske CMYK alate s ICC profilima.
Što se događa ako unesem boju koja odgovara boji izvan RGB gamuta?
Alat automatski prilagođava boju najbližoj prikazivoj boji na vašem zaslonu. To može uzrokovati blago pomicanje nijanse ili zasićenja. Uvijek provjerite prikazanu boju okom.
Podržava li alat HEX vrijednosti s alfa kanalom (npr. #4f46e580)?
Ne. Standardni HEX (šestoznamenkasti ili troznamenkasti) ne uključuje alfa kanal, a HSL sam po sebi ne sadrži prozirnost. Za boje s prozirnošću koristite rgba() ili hsla() u CSS-u.