Pretvarač iz HSL u RGB

Što ovaj alat radi i zašto je drugačiji

Alat HSL–RGB trenutačno pretvara boju zadanu u HSL modelu (nijansa u stupnjevima, zasićenje i svjetlina u postocima) u RGB vrijednosti (0–255) koje monitori koriste za emitiranje svjetla. Ono što ovu stranicu izdvaja od desetaka sličnih kalkulatora jest fokus na HSL kao model koji je izvorno oblikovan za ljudsko rasuđivanje o bojama. Promjena svjetline u HSL-u ne dira nijansu – to svojstvo je razlog zašto HSL dominira pri izradi paleta i tema. RGB je, s druge strane, radni prostor za svako računanje boje na ekranu: svaki piksel na zaslonu definiran je trima brojkama od 0 do 255. Alat premošćuje taj jaz bez ikakvih kompromisa.

Pretvorba iz HSL u RGB je bezgubitna – svaka valjana HSL vrijednost preslikava se u točno jedan RGB triplet unutar prikazivog raspona. Ne dolazi do odsjecanja izvan gamuta, za razliku od konverzija iz LAB ili CMYK u RGB, gdje boje često "iskaču" izvan dosega monitora. Zato je povratna pretvorba (RGB → HSL) potpuno simetrična: nema pomaka nijanse, nema neželjenog zasićenja. To je kritično za dizajnere koji rade s temama i trebaju točnost.

HSL kao model za ljudsko razumijevanje boja

HSL – Hue, Saturation, Lightness – modelira boju na način koji odgovara ljudskoj percepciji: prvo odaberemo nijansu (crvena, plava, zelena itd.), zatim odredimo koliko je boja "živahna" (zasićenje), i naposljetku koliko je svijetla ili tamna (svjetlina). Nijansa se izražava u stupnjevima na krugu boja: 0° = crvena, 120° = zelena, 240° = plava, a 360° se vraća na crvenu. Zasićenje i svjetlina su u postocima: 0% zasićenja daje sivu, 100% zasićenja daje čistu nijansu; 0% svjetline uvijek je crna, 100% uvijek bijela.

Ovaj model izbjegava zamke RGB sheme u kojoj istovremena promjena tri broja (npr. (255, 0, 0) → (200, 20, 0)) ne čini očiglednim koliko se nijansa zapravo promijenila. U HSL-u podešavanje samo svjetline (Lightness) ostavlja nijansu netaknutom, što je neophodno za generiranje harmoničnih shema poput monokromatskih ili komplementarnih. Dizajneri stoga HSL koriste kao jezik za opisivanje boja, a zatim ga pretvaraju u RGB za kodiranje u CSS-u, SVG-u ili bilo kojem drugom formatu koji očekuje brojčane RGB vrijednosti.

Pretvorba bez gubitaka i bez izlaska iz gamuta

Svaki HSL triplet (h, s, l) s h između 0 i 360 te s i l od 0% do 100% jednoznačno se preslikava u RGB triplet (r, g, b) s vrijednostima od 0 do 255. U pozadini se primjenjuje standardna formula koja prvo preračunava relativnu svjetlinu i zasićenje u međuvrijednosti, zatim u RGB. Bitno je da ova formula ne stvara "nedozvoljene" boje – za razliku od CMYK-a (vidi dolje) ili LAB-a, gdje neke boje postoje u ljudskom vidu, ali ih monitor ne može prikazati. Kod HSL → RGB nema izlaska iz gamuta sRGB, što znači da je svaki rezultat fizički moguće prikazati na standardnom ekranu.

Zbog toga se vrijednosti mogu slobodno mijenjati naprijed-natrag bez gubitka informacije. Ako unesete h=243, s=75%, l=59%, dobit ćete rgb(79, 70, 229); ako to RGB vratite u HSL, ponovno ćete dobiti isti triplet. Ovo je presudno za rad s alatima za uređivanje boja, gdje je točnost reprodukcije ključna.

Unos i izlaz – što dobivate

Alat očekuje HSL vrijednosti u formatu: hue (0–360), zasićenje (s postotkom), svjetlina (s postotkom), odvojeni zarezom ili razmakom – npr. 243, 75%, 59%. Čim polje za unos promijenite, sve ostale vrijednosti ažuriraju se trenutačno:

CMYK izlaz je označen kao "okvirna procjena na ekranu". Razlog je jednostavan: CMYK je model za subtraktivni ispis (bojila na papiru), a njegove stvarne vrijednosti ovise o vrsti papira, tintama i profilu pisača. Alat prikazuje matematički preračunatu vrijednost, ali se ona može značajno razlikovati od onoga što će profesionalni tisak dati. Nikada ne koristite prikazane CMYK brojeve za konačnu pripremu za tisak bez provjere na stvarnom uređaju.

Svi izlazi osim CMYK-a su točni unutar sRGB prostora. Lab vrijednost izračunava se posredno preko XYZ, što je standardni put za inženjerske konverzije.

Pravila i rubni slučajevi

Alat je dizajniran da prihvati samo točno formatiran unos. Ako upišete nešto što nije prepoznatljivo – primjerice h=300 bez postotaka, ili slova umjesto brojki – pojavit će se poruka:

"Unesite HSL kao hue 0–360 s dva postotka, npr. 243, 75%, 59%."

Ovo pokriva sljedeće česte pogreške:

• Zaborav postotnog znaka: 243, 75, 59 nije valjano – potrebni su % za zasićenje i svjetlinu.
• Predznak: HSL hue može biti 0–360; negativne vrijednosti nisu podržane (iako neki konverteri dopuštaju kružno omatanje, ovaj alat to ne radi).
• Decimalni brojevi: Hue može biti decimalni (npr. 243.5), ali zasićenje i svjetlina moraju biti postoci (npr. 75.5%).
• Razmaci: Dopušteni su i zarez i razmak kao razdjelnici, ali format mora biti konzistentan.

Ako je unos ispravan, sva polja se trenutno ažuriraju – nema gumba za izračun. Sva se obrada odvija u vašem pregledniku; ništa ne odlazi na poslužitelj. To znači da alat radi i u potpuno offline okruženju, bez ikakve latencije.

Kome je ovaj alat namijenjen

Tri skupine korisnika najviše profitiraju od ove stranice:

1. Dizajneri koji grade palete boja ili teme koristeći HSL za ljudsko rasuđivanje, a zatim trebaju RGB vrijednosti za implementaciju u CSS varijable, SVG ili JavaScript. Na primjer, podešavaju svjetlinu nijanse plave dok testiraju kontrast za pristupačnost – alat im daje točan RGB za svaki korak.

2. Frontend developeri koji preuzimaju boje iz dizajnerskih alata (Figma, Sketch) koji često izvoze HSL ili HSB, pa ih moraju prevesti u CSS kod. Umjesto ručnog računanja ili pretraživanja tablica, unesu vrijednost i odmah kopiraju HEX ili RGB.

3. Svatko tko razmišlja o boji u ljudskim terminima – od hobista koji uređuju fotografije do edukatora koji objašnjavaju teoriju boja. Alat pruža konkretan most između apstraktnog HSL modela i fizičkih brojeva koje monitor razumije.

Dodatne teme koje alat neizravno pokriva uključuju:

• Razliku između aditivnog (RGB) i subtraktivnog (CMYK) modela.
• Ograničenja prikaza boja na ekranu za tisak – CMYK procjena je upravo ilustracija tog fenomena.
• Pristupačnost boja: podešavanje svjetline u HSL-u izravno utječe na kontrast, a alat omogućava brzu provjeru ekvivalentnog RGB-a za alate za validaciju kontrasta.
• Praktične primjene u web razvoju (dinamičko generiranje tema, CSS prilagođene osobine) i grafičkom dizajnu (palete za branding).

Često postavljana pitanja

1. Zašto dobiveni RGB nije isti kao kad koristim neki drugi konverter?

Standardna formula za HSL → RGB definirana je W3C specifikacijom za CSS. Svi usklađeni konverteri trebali bi dati isti rezultat. Ako se razlikuje, provjerite koristi li drugi alat isti kut hue (npr. neki koriste 0–255 umjesto 0–360) ili drugačiji model (HSV umjesto HSL). Ovaj alat koristi klasični HSL s kružnim hue-om i linearnom svjetlinom.

2. Mogu li unijeti hue veći od 360 ili manji od 0?

Ne. Alat prihvaća samo hue u rasponu 0–360. Ako imate vrijednost poput 400°, prvo je svedite modulo 360 (400 mod 360 = 40°). Za negativne vrijednosti najčešće se dodaje 360 dok ne postane pozitivno (npr. −20° → 340°), ali alat to ne radi automatski – morate sami preračunati.

3. Zašto CMYK izgleda drugačije od onoga što ispiše moj pisač?

CMYK vrijednosti prikazane u alatu su matematička konverzija iz sRGB, bez uzimanja u obzir profila pisača, vrste papira ili tinte. Pravi tisak zahtijeva ICC profile i softversku simulaciju. Koristite prikazane brojeve samo kao grubu referencu; za točan ispis obratite se profesionalnom pripremnom uredu.

4. Alat ne prikazuje HEX s alpha kanalom (RGBA/HSLA). Zašto?

Ovaj alat radi isključivo s punom neprozirnošću. Ako trebate prozirnost, jednostavno dodajte alfa vrijednost u CSS: rgba(79, 70, 229, 0.5). Sama konverzija boje ne ovisi o alfa kanalu.

5. Kako da brzo dobijem obrnutu pretvorbu (RGB → HSL)?

Na istoj stranici ne postoji poseban alat za obratnu konverziju, ali većina preglednika ima ugrađene alate za provjeru boja (npr. DevTools). Alternativno, većina HSL tripletova može se lako provjeriti unosom u polje – alat će pokazati i HSL i RGB, iako je smjer unosa fiksan (slijeva na desno). Za serijsku konverziju preporučujemo korištenje CSS hsl() funkcije izravno.

6. Zašto neki HSL unosi daju RGB s jednakim vrijednostima (sive boje)?

Kada je zasićenje 0%, nijansa postaje nebitna – boja je akromatska (siva). Tada su R=G=B i jednaki su vrijednosti svjetline preslikanoj na 0–255. Na primjer, h=100, s=0%, l=50% daje RGB(128,128,128). To je ispravno ponašanje, a ne greška.