Pretvarač HSL u RGB

HSL u RGB: Pretvorba boje za dizajnere i developere

Šta radi ova stranica?

Ova stranica omogućava trenutnu pretvorbu boje iz HSL modela (Hue – nijansa, Saturation – zasićenje, Lightness – svjetlina) u RGB vrijednosti (0–255) i još pet drugih formata. Unesete HSL vrijednost – nijansu u stepenima (0–360), zasićenje i svjetlinu u postocima – i alat odmah prikazuje odgovarajući RGB triplet. Pritom se automatski ažuriraju i HEX, HSV, CMYK i LAB zapisi. Pretvorba se odvija isključivo u vašem pretraživaču; ništa što unesete ne napušta vaš uređaj.

Ovo nije samo puko prikazivanje brojeva. Alat vam omogućava da se iz modela dizajniranog za ljudsko razmišljanje o boji (gdje promjena svjetline zadržava nijansu netaknutom) prebacite u tačne brojke koje monitor koristi za emitiranje svjetlosti. RGB je radni prostor za sve on-screen računanje boja, a HSL je jezik kojim dizajneri prirodnije opisuju palete.

Zašto je ova stranica drugačija

Većina pretvarača boja na internetu jednostavno preslika brojeve iz jednog formata u drugi. Ova stranica se izdvaja jer ističe fundamentalnu razliku između HSL i RGB modela:

• HSL je izgrađen za ljudsko rezonovanje. Kada povećate svjetlinu (Lightness) u HSL, nijansa ostaje ista. Zato HSL koristimo za generiranje paleta i tema – možete lako napraviti svjetliju ili tamniju varijantu iste boje, a da se ne pomjeri njezin ton. U RGB-u takva operacija nije intuitivna; promjena jedne komponente često neočekivano utiče na percipiranu nijansu.
• Pretvorba je bez gubitaka. Svaka validna HSL vrijednost mapira se u jedinstven RGB triplet unutar prikazivog opsega. Za razliku od konverzija iz LAB ili CMYK u RGB, ovdje nema odsjecanja izvan gamuta (out‑of‑gamut clipping). Boja koju vidite na ulazu identična je boji na izlazu. Kada pretvorite HSL u RGB pa ponovo u HSL, dobit ćete iste brojeve – nema pomaka boje.
• Nema potrebe za profilima ili kalibracijom. CMYK izlaz je procijenjen na osnovu sRGB prostora i namijenjen je samo za orijentaciju; za stvarni tisak potrebni su printer profili. No za sve ostale formate (HEX, RGB, HSV, LAB) konverzija je direktna i zasnovana na standardnim matematičkim formulama.

Ova razlika čini alate posebno korisnim za front‑end developere koji prenose boje iz dizajnerskih alata (Figma, Sketch, Adobe XD – svi koriste HSL ili HSB) u CSS koji očekuje RGB ili HEX.

Kako funkcioniše pretvorba

Iako korisnik ne vidi matematiku, potrebno je razumjeti princip. HSL je cilindrični model boje. Nijansa (H) je kut na krugu boja: 0° ili 360° je crvena, 120° zelena, 240° plava. Zasićenje (S) je radijalna udaljenost od centra (siva) do ruba (čista boja). Svjetlina (L) je visina: 0% je crna, 100% bijela, a 50% je čista boja (za maksimalno zasićenje).

RGB je aditivni model: crvena, zelena i plava komponente sabiraju se da bi stvorile boju. Svaka komponenta kreće se od 0 (isključeno) do 255 (puno svjetlo).

Alat iza ove stranice implementira standardnu konverziju HSL → RGB, koja se oslanja na međukorak: HSL → HSV (ili direktno korištenjem normalizacije na i tzv. „chroma” vrijednost). Potpuni postupak uključuje:

1. Normalizacija H na opseg [0,1) dijeljenjem sa 360.
2. S i L dijeljenjem sa 100 da bi se dobile decimalne vrijednosti.
3. Izračunavanje relativne svjetline (lightness) i hromatske komponente.
4. Mapiranje u RGB uz pomoć funkcije koja interpolira između primarnih i sekundarnih boja.
5. Zaokruživanje na cijele brojeve 0–255.

Sve ovo se događa u milisekundama, a korisnik vidi samo osvježene brojeve.

Ulazni i izlazni podaci

Ulazni parametri obavezno uključuju:

Alat prihvata unos u obliku H, S%, L% (npr. 243, 75%, 59%) ili sličan format sa zarezima i postocima.

Izlazni formati – sva polja se ažuriraju istovremeno:

1. HEX – šestocifreni heksadecimalni zapis, npr. #4F46E5.
2. RGB – tri broja 0–255, npr. 79, 70, 229.
3. HSL – ulazni podaci (potvrda tačnosti).
4. HSV (ili HSB) – nijansa, zasićenje, vrijednost (0–100% za S i V).
5. CMYK – cijan, magenta, žuta, crna (procijenjene vrijednosti za sRGB).
6. LAB – CIE L*a*b* (L od 0 do 100, a i b u teorijskom opsegu – približne vrijednosti za sRGB).

Sve konverzije su izvedene direktno u pregledniku, bez pozivanja servera.

Pravila i rubni slučajevi

Alat postupa po strogim pravilima kako bi spriječio nejasnoće:

• Validacija unosa. Ako korisnik unese vrijednost koja nije u očekivanom formatu (npr. nedostaje postotak, H izvan 0–360, višak zareza), alat prikazuje poruku:
  "Unesite HSL kao nijansu 0–360 sa dva procenta, npr. 243, 75%, 59%."
• Nema rezanja gamuta. RGB vrijednosti koje proizlaze iz HSL-a uvijek su unutar 0–255, pa nema potrebe za odsjecanjem. CMYK izlaz je, međutim, procijenjen i može se razlikovati od stvarnih vrijednosti u profesionalnom tisku zbog varijacija u papiru, mastilu i printer profilima. Ova napomena je važna za dizajnere koji planiraju štampu.
• Cjelobrojno zaokruživanje. RGB komponente se zaokružuju na najbliži cijeli broj, što je standardna praksa za 8‑bitne kanale. Gubitak je zanemariv (najviše 0.5 u 255).
• Sve se obrađuje lokalno. Ni jedan podatak se ne šalje na server. Ovo je bitno za privatnost prilikom rada s osjetljivim dizajnerskim materijalima.

Kome je ovo potrebno

Ova stranica nije namijenjena slučajnim posjetiocima. Korisnici su:

• Dizajneri koji grade palete boja ili teme koristeći HSL zbog njegove intuitivnosti. Kada završe s HSL podešavanjima, trebaju RGB vrijednosti za kodiranje CSS varijabli, React komponenti ili SVG elemenata.
• Front‑end developeri koji prenose boje iz dizajnerskih alata. Alati poput Figma i Sketch izvoze boje kao HSL ili HSB; CSS i većina grafičkih biblioteka zahtijevaju RGB ili HEX. Umjesto ručnog preračunavanja ili korištenja složenih ekstenzija, developer unese HSL i dobije spreman RGB triplet.
• Svako ko preferira da o boji razmišlja u ljudskim terminima. Na primjer, želite tamniju nijansu plave: smanjite L za 10%, a H i S ostanu isti. Alat vam odmah pokaže kako ta nova boja izgleda u RGB brojkama.
• Studenti i edukatori koji proučavaju modele boja – mogu eksperimentirati, unositi rubne vrijednosti (H=0, S=100%, L=50% za čistu crvenu; H=0, S=0%, L=100% za bijelu) i pratiti odnose.

Često postavljana pitanja

1. Zašto CMYK vrijednosti nisu potpuno tačne za štampu?
CMYK prikazan na ekranu je konverzija iz sRGB prostora pomoću generičkog ICC profila. Stvarni ispis zavisi od specifičnog papira, mastila i mašine. Za precizan rad s bojama u štampi koristite namjenske alate s profilima (npr. Adobe InDesign). Ovaj alat daje približnu orijentaciju.

2. Mogu li pretvoriti RGB natrag u HSL potpuno bez gubitaka?
Da, jer je preslikavanje HSL → RGB bijektivno unutar prikazivog gamuta. Ako unesete RGB triplet koji tačno odgovara nekom HSL, nakon dvostruke konverzije dobit ćete isti HSL. Međutim, neki RGB tripleti (npr. oni koji nisu dobijeni iz HSL) mogu dati drugačiji HSL, ali to je inherentno modelima.

3. Šta znači poruka o grešci "Unesite HSL kao nijansu 0–360 sa dva procenta"?
To znači da uneseni tekst ne odgovara očekivanom obrascu. Provjerite da li ste unijeli broj za nijansu između 0 i 360, zatim zarez, zatim postotak za zasićenje, zarez i postotak za svjetlinu. Dozvoljeni su razmaci, ali moraju biti prisutna dva postotna znaka.

4. Da li alat radi sa decimalnim vrijednostima nijanse?
Da, nijansa može biti decimalni broj (npr. 243.5). Međutim, RGB rezultat će biti zaokružen na cijele brojeve, pa fine promjene nijanse manje od 0.5° možda neće dati drugačiji RGB triplet.

5. Zašto kada unesem H=0, S=0%, L=100% dobijem RGB 255,255,255 (bijelo)?
Potpuno ispravno. S=0% znači da nema zasićenja, boja je siva. L=100% znači maksimalna svjetlina, što daje bijelu. Nijansa je irelevantna kada je zasićenje nula.

6. Mogu li koristiti ovaj alat na mobilnom uređaju?
Da, alat je responzivan i radi u svim modernim preglednicima. Unos se vrši tekstualno, pa nema posebnih zahtjeva. Konverzije se izvode u JavaScriptu direktno na telefonu.