Pretvarač HEX u HSL

Pretvaranje HEX u HSL – brzi referentni vodič

Ova stranica vam omogućava da unesete hex kod boje (puni šestocifreni oblik poput #1E90FF ili skraćeni trocifreni poput #abc) i odmah dobijete ekvivalentnu HSL vrijednost (hue u stepenima, saturation i lightness kao procente). HSL prikaz je dizajniran za ljudsko razmišljanje – lako je prilagoditi svjetlinu ili zasićenost dok hue ostaje isti. Istovremeno, stranica prikazuje boju u svim drugim podržanim formatima (RGB, HSV, CMYK, LAB) tako da možete kopirati onaj koji vam treba.

Zašto je ova stranica drugačija

• HEX je sirova RGB notacija – šest heksadecimalnih cifara (ili trocifrena skraćenica) direktno kodiraju crvenu, zelenu i plavu vrijednost. Kompaktna je i široko korištena u CSS-u i dizajnerskim alatima, ali nije intuitivna za prilagođavanje koje čovjek lako razumije.
• HSL je napravljen za ljudsko razmišljanje – hue se mjeri u stepenima (0–360), dok su saturation i lightness procenti. Mijenjanje samo lightness-a ostavlja hue nepromijenjenim, zbog čega je HSL glavni format za generiranje paleta boja i sistema tema.
• Nema alpha kanala – standardni HEX (šestocifreni ili trocifreni) ne nosi informaciju o prozirnosti, a HSL također ne uključuje alpha komponentu. Konverzija uvijek radi sa potpuno neprozirnim bojama.

Ulazi i izlazi

Ulaz – hex kod boje, ili šest cifara (npr. #4f46e5) ili trocifrena skraćenica (npr. #abc).
Izlaz – HSL ekvivalent (hue 0–360, saturation 0–100%, lightness 0–100%) plus prikaz boje u HEX, RGB, HSV, CMYK i LAB. Sva polja se ažuriraju istovremeno dok uređujete.

Pravila i rubni slučajevi

• Stranica prihvata samo validne šestocifrene ili trocifrene hex kodove (sa ili bez vodećeg #).
• Unošenje nevažeće vrijednosti prikazuje grešku: “Unesite hex boju poput #4f46e5 ili #abc.”
• Ako pređete u drugi prostor boja (npr. LAB ili CMYK) i unesete vrijednost izvan vidljivog RGB gamuta, boja se prilagođava najbližoj prikazivoj boji; konvertovanje te boje natrag u hex može proizvesti mali pomak.
• CMYK vrijednosti su procjena na ekranu i ne smiju se koristiti za profesionalnu štampu bez kalibracije.
• Sve konverzije se dešavaju unutar vašeg pretraživača – ništa što unesete nije otpremljeno niti pohranjeno.

Kome ovo treba

• Front-end developerima koji pišu CSS i žele pretvoriti hex boju iz dizajnerskog mockupa u HSL kako bi lako prilagodili svjetlinu za hover stanja ili varijante tema.
• UI/UX dizajnerima koji razmišljaju u pojmovima hue, saturation i lightness i trebaju uskladiti brend boju datu u hex-u.
• Svakome ko gradi paletu boja – HSL čini jednostavnim kreiranje komplementarnih, analognih ili monokromatskih shema podešavanjem samo hue-a ili saturation-a.
• Revizorima web pristupačnosti koji trebaju provjeriti kontrastne omjere i kojima je HSL lakši za razmišljanje od sirovog hex-a ili RGB-a.

Kako hex kodovi boja rade

Hex kod je kompaktna reprezentacija RGB vrijednosti u bazi 16. Svaki par heksadecimalnih cifara (00–FF) predstavlja intenzitet crvene, zelene, odnosno plave komponente. Na primjer, #4f46e5 ima crvenu = 0x4F = 79, zelenu = 0x46 = 70, plavu = 0xE5 = 229. Trocifrena skraćenica poput #abc se proširuje udvostručavanjem svake cifre: #aabbcc.

Struktura HSL

HSL stoji za Hue, Saturation, Lightness. Hue je ugao na krugu boja: 0° = crvena, 120° = zelena, 240° = plava, 360° = opet crvena. Saturation je postotak (0% = siva, 100% = puna boja). Lightness je postotak (0% = crna, 100% = bijela). Ovo olakšava stvaranje varijacija: za tamniju verziju iste boje smanjite lightness, za pastelnu smanjite saturation.

Matematička konverzija HEX → HSL

Konverzija se odvija u dva koraka:

1. HEX → RGB: Heksadecimalni parovi se pretvaraju u decimalne vrijednosti između 0 i 255, zatim se normaliziraju na opseg.

2. RGB → HSL: Formula koristi maksimum i minimum od tri komponente:

   • max = max(R, G, B), min = min(R, G, B), delta = max - min
   • lightness = (max + min) / 2
   • Ako je delta = 0, saturation = 0, hue = 0
   • Inače:
     • saturation = delta / (1 - |2 * lightness - 1|)
     • hue se računa na osnovu toga koja je komponenta maksimalna:
       • Ako je max = R: hue = 60 * (((G - B) / delta) mod 6)
       • Ako je max = G: hue = 60 * ((B - R) / delta + 2)
       • Ako je max = B: hue = 60 * ((R - G) / delta + 4)
   • Rezultujući hue se normalizuje na [0, 360).

Ova formula je standardna CSS specifikacija (CSS Color Module Level 4) i koristi se u svim modernim pretraživačima.

Aditivne vs. subtraktivne boje i mjesto HSL

RGB i HEX su aditivni modeli – boja se stvara dodavanjem svjetla (monitor, ekran). CMYK je subtraktivan – boja se stvara oduzimanjem svjetla (štampa). HSL je perceptivni model dizajniran da odgovara ljudskom iskustvu: hue je osnovna boja, saturation njena čistoća, lightness njena svjetlina. Zato se HSL često koristi u alati za pristupačnost: možete povećati lightness da biste poboljšali kontrast bez mijenjanja hue-a.

Gamut i upozorenja

Kada pređete u LAB ili CMYK i unesete vrijednost koja je izvan RGB gamuta (npr. jako zasićena žuta u CMYK-u koja se ne može prikazati na ekranu), stranica automatski prilagođava boju na najbližu prikazivu. Ovo je neophodno jer HSL, kao derivat RGB, uvijek daje boju unutar RGB gamuta. Profesionalni štampači trebaju imati na umu da je CMYK ovdje samo aproksimacija.

Razlike između HSL i HSV

Mnogi ljudi miješaju HSL i HSV (HSB). Oba koriste hue na isti način, ali se saturation i lightness/brightness razlikuju:

• U HSL, lightness = 0% je uvijek crna, 100% je uvijek bijela. Zasićenost 100% pri lightness=50% daje čistu boju.
• U HSV, brightness = 100% daje maksimalnu svjetlinu, saturation = 0% daje sivu tonu. Pri brightness=100% i saturation=100% boja je čista, ali može biti vrlo svijetla.

Ova razlika je važna prilikom konverzije – alat na ovoj stranici koristi HSL, ne HSV, tako da ne očekujte iste vrijednosti ako ste navikli na HSV.

Primjena u web razvoju

U CSS-u možete koristiti HSL direktno: color: hsl(220, 80%, 50%). To omogućava dinamičke varijacije pomoću CSS varijabli:

:root {
  --hue: 220;
  --sat: 80%;
  --light: 50%;
}
.element {
  background: hsl(var(--hue), var(--sat), var(--light));
}
.element:hover {
  --light: 40%;
}

Ova stranica olakšava pronalaženje tačnih HSL vrijednosti iz dizajnerskih hex kodova.

Često postavljana pitanja

1. Da li mogu unijeti hex kod bez #?
Da, stranica prihvata i kodove bez vodećeg #, npr. 4f46e5 ili abc.

2. Zašto se CMYK vrijednosti razlikuju od onih u Photoshopu?
CMYK vrijednosti su ovdje matematički izvedene iz RGB bez ICC profila. To je gruba aproksimacija; za tačan CMYK uvijek koristite softver za štampu.

3. Šta znači "boja prilagođena najbližoj prikazivoj"?
Kada u LAB ili CMYK unesete vrijednost koja nije u RGB gamutu (npr. ekstremno zasićena boja), stranica je klipinguje ili preslikava na rub RGB gamuta. Ponovna konverzija u hex može dati blago drugačiju boju.

4. Da li stranica pamti moje unose?
Ne. Sve konverzije se dešavaju u vašem pretraživaču – nijedna informacija se ne šalje na server.

5. Mogu li koristiti HSL direktno u CSS-u?
Da, HSL je standardna CSS funkcija od CSS3. Potpuno je podržana u svim modernim pretraživačima.

6. Kako da dobijem HSL vrijednost za prozirnu boju?
HEX i HSL na ovoj stranici ne uključuju alpha kanal. Za prozirne boje koristite HSLA (HSL + alpha) u CSS-u, ali ova stranica ne podržava konverziju sa alpha.