Pretvarač iz RGB u HSL

Što ova stranica radi i po čemu se razlikuje

Ova stranica prima RGB boju — tri broja od 0 do 255 koji opisuju kako monitor miješa crveno, zeleno i plavo svjetlo — i u trenu prikazuje njezin ekvivalent u HSL formatu (nijansa u stupnjevima, zasićenje i svjetlina kao postotci). Uz to, alat prikazuje istu boju u HEX, HSV, CMYK (približna vrijednost za zaslon) i LAB formatu, tako da možete kopirati točno onaj oblik koji trebate za svoj projekt.

Ono što ovu stranicu izdvaja jest priroda same pretvorbe. RGB je model namijenjen elektroničkim zaslonima — svaki kanal direktno kontrolira intenzitet jedne primarne boje. HSL je, nasuprot tome, model građen za ljudsko rasuđivanje o boji. U RGB-u promjena jedne brojke (recimo, povećanje crvene) gotovo uvijek promijeni i percipirani ton boje. Kod HSL-a možete nezavisno mijenjati svjetlinu, a nijansa ostaje ista — to ga čini nezamjenjivim za generiranje paleta, tema i pristupačnih kontrastnih varijanti. RGB su sirove razine intenziteta; HSL izražava nijansu na krugu od 360°, a zasićenje i svjetlinu kao postotke.

Svaki unos automatski osvježava sva ostala polja. Sve pretvorbe izvode se u vašem pregledniku; ništa što upišete ne šalje se na poslužitelj.

Kako unijeti podatke i što očekivati kao izlaz

Ulaz: RGB kao tri cijela broja od 0 do 255, odvojena zarezom ili razmakom. Primjer: 79, 70, 229 ili 79 70 229.

Izlazi:

• HSL: nijansa (0–360°), zasićenje (0–100 %), svjetlina (0–100 %)
• HEX: šestoznamenkasti heksadecimalni zapis (npr. #4F46E5)
• HSV: nijansa, zasićenje, vrijednost (slično HSL-u, ali s drugačijom definicijom svjetline)
• CMYK: približna vrijednost za prikaz na zaslonu (nije za profesionalni tisak bez provjere)
• LAB: boja u CIE Lab prostoru, koji je neovisan o uređaju

Alat omogućuje i obrnutu pretvorbu: unesete HSL direktno (npr. 243, 75%, 59%), a alat izračuna RGB i ostale formate.

Pravila i rubni slučajevi:

• Neispravan RGB unos (npr. slova, brojevi izvan 0–255) prikazuje poruku: “Unesite RGB kao tri broja 0–255, odvojena zarezom ili razmakom, npr. 79, 70, 229.”
• Neispravan HSL unos prikazuje: “Unesite HSL kao nijansu 0–360 s dva postotka, npr. 243, 75%, 59%.”
• Ako unesete LAB ili CMYK vrijednost koja se preslikava izvan vidljivog RGB raspona, alat je prilagođava najbližoj prikazivoj boji. Pretvorba te boje natrag može unijeti mali pomak.
• CMYK izlaz je približan i namijenjen isključivo digitalnom pregledu; za stvarni tisak potrebna je provjera na ICC profilu.

Kako RGB predstavlja boju na zaslonu

RGB je aditivni model boje. Zaslon se sastoji od sitnih izvora svjetla — crvenih, zelenih i plavih — čiji se intenzitet zbraja. Kad su sva tri kanala na maksimumu (255), dobiva se bijela; kad su na nuli, crna.

Standardni radni prostor za većinu monitora i weba je sRGB. Svaki kanal koristi 8 bita, što daje 256 mogućih vrijednosti po kanalu, odnosno ukupno 16,7 milijuna boja (256 × 256 × 256). Iako je taj broj ogroman, ljudsko oko ne percipira sve te boje jednako — zato su nastali modeli poput HSL-a i LAB-a, koji bolje opisuju kako zapravo doživljavamo boje.

RGB je izvrstan za slanje signala monitoru, ali loš za ljudsko rezoniranje. Pokušajte, na primjer, zamisliti boju (120, 90, 200). Teško je reći hoće li biti plavkasta, ljubičasta ili siva bez da je prvo vidite. Zato dizajneri i developeri preferiraju HSL.

Kako HSL modelira ljudsku percepciju

HSL stoji za Hue (nijansa), Saturation (zasićenje), Lightness (svjetlina). Nijansa je kut na krugu boja: 0° crvena, 120° zelena, 240° plava (i natrag do 360° crvene). Zasićenje je čistoća boje: 0 % znači siva, 100 % potpuno zasićena boja. Svjetlina je percipirana svjetlina: 0 % je crna, 100 % bijela, a 50 % odgovara „čistoj” boji bez dodane crne ili bijele.

Ključna prednost: možete uzeti nijansu od 240° (plava) i iz nje stvoriti niz varijanti:

• svjetlina 80 %, zasićenje 60 % — pastelno plava
• svjetlina 30 %, zasićenje 90 % — tamna, jaka plava
• svjetlina 50 %, zasićenje 0 % — siva (jer nijansa više nije važna)

Sve te boje dijele istu nijansu — plavu. U RGB-u biste za svaku varijantu morali ručno prilagođavati sva tri kanala, a rezultat bi često bio neočekivan. HSL eliminira tu nagađanje.

Zbog toga se HSL koristi za pristupačne palete: možete povećati svjetlinu teksta na tamnoj pozadini dok nijansa ostaje ista, što čuva vizualni identitet marke.

Matematika pretvorbe: od RGB do HSL

Pretvorba iz RGB u HSL nije složena, ali zahtijeva nekoliko koraka. Ovdje je objašnjenje onoga što alat radi u pozadini.

1. Normalizacija: RGB vrijednosti podijele se s 255 da se dobiju brojevi u rasponu. Za primjer (79, 70, 229):

   • R = 79 / 255 ≈ 0,310
   • G = 70 / 255 ≈ 0,275
   • B = 229 / 255 ≈ 0,898

2. Traženje min i max: Pronađe se najveća i najmanja od tri vrijednosti.

   • max = 0,898 (plava)
   • min = 0,275 (zelena)
   • delta = max - min = 0,623

3. Izračun svjetline:

   • L = (max + min) / 2 = (0,898 + 0,275) / 2 ≈ 0,586 → u postotcima: 58,6 %, zaokruženo na 59 %

4. Izračun zasićenja (ovisi o svjetlini):

   • Ako je L ≤ 0,5: S = delta / (max + min)
   • Ako je L > 0,5: S = delta / (2 - max - min)
   • U našem slučaju L ≈ 0,586 > 0,5, pa S = 0,623 / (2 - 0,898 - 0,275) = 0,623 / 0,827 ≈ 0,753 → 75,3 %, zaokruženo na 75 %

5. Izračun nijanse (u stupnjevima):

   • Ovisi o tome koji kanal je max:
     • Ako je max = R: H = 60° × ((G - B) / delta) + (ako je G < B, dodaj 360)
     • Ako je max = G: H = 60° × ((B - R) / delta) + 120°
     • Ako je max = B: H = 60° × ((R - G) / delta) + 240°
   • Kod nas je max = B: H = 60° × ((0,310 - 0,275) / 0,623) + 240° ≈ 60° × 0,056 + 240° ≈ 3,36° + 240° = 243,36° → 243°

Rezultat: HSL(243°, 75%, 59%). Točno ono što alat prikazuje.

Ova matematika omogućuje i obrnutu pretvorbu. Unesete HSL, alat izračuna RGB koristeći iste formule unatrag.

Zašto je HSL preferirani model za palete i teme

UI/UX dizajneri i front-end developeri koriste HSL iz tri razloga:

1. Generiranje tinti i tonova: Želite li svjetliju varijantu svoje primarne boje, jednostavno povećajte svjetlinu i smanjite zasićenje. Nijansa ostaje ista. U RGB-u biste morali eksperimentirati s tri brojke.

2. Pristupačnost (WCAG): Pravila o kontrastu traže specifične omjere svjetline. HSL-ova svjetlina izravno odgovara percipiranoj svjetlini, pa je lako prilagoditi boju teksta da zadovolji omjer 4.5:1 bez mijenjanja nijanse.

3. Dinamički CSS: Moderni CSS podržava hsl() i hsla() funkcije. Možete programski mijenjati svjetlinu ili zasićenje kroz varijable ili JavaScript, bez petljanja po heksadecimalnim vrijednostima. Primjer: color: hsl(var(--brand-hue), 80%, 60%); — promjenom svjetline na 90% dobivate svjetliju varijantu u cijelom sučelju.

Theme builderi posebno cijene HSL: tamna tema jednostavno smanji svjetlinu svih boja, dok nijanse ostaju netaknute. To daje vizualnu koherenciju koju RGB teško postiže.

Ostali izlazni formati i njihova ograničenja

Uz HSL, alat prikazuje boju u još pet formata:

• HEX: Kratki zapis temeljen na RGB-u, popularan u HTML/CSS. Npr. RGB(79, 70, 229) = #4F46E5.
• HSV: Sličan HSL-u, ali svjetlinu zamjenjuje „vrijednost” (Value) — maksimum od tri kanala. Često se koristi u grafičkim alatima.
• CMYK: Model za tisak (cijan, magenta, žuta, crna). Ovdje je to samo približna vrijednost izvedena iz RGB-a; ne uzima u obzir stvarni ICC profil pisača. Nemojte ga koristiti za profesionalni tisak bez provjere.
• LAB: CIE Lab prostor, neovisan o uređaju. Koristan za znanstvene ili precizne usporedbe boja. Ako unesete LAB vrijednost koja je izvan RGB gamuta (npr. vrlo zasićena žuta koja ne može biti prikazana na monitoru), alat je prilagođava najbližoj prikazivoj boji. Zbog toga povratna pretvorba u LAB može dati malo drugačiju vrijednost.

Uvijek imajte na umu da su RGB i HSL vezani uz sRGB gamut. Boje koje ne mogu biti prikazane na standardnom monitoru automatski se smanjuju („clipping”).

Često postavljana pitanja

Kako da unesem RGB vrijednosti? Tri cijela broja između 0 i 255, odvojena zarezom ili razmakom. Primjer: 79, 70, 229. Nakon unosa sva polja se automatski osvježavaju.

Mogu li unijeti HSL i dobiti RGB? Da. Unesite nijansu (0–360), zasićenje i svjetlinu kao postotke, npr. 243, 75%, 59%. Alat će izračunati RGB i sve ostale formate.

Je li CMYK izlaz točan za tisak? Ne. Ovdje se radi o gruboj procjeni na temelju jednostavne formule. Za stvarni tisak morate koristiti CMYK s odgovarajućim ICC profilom (npr. FOGRA39 ili GRACoL). Ovaj alat služi isključivo za orijentaciju.

Zašto se LAB vrijednost razlikuje nakon što je ponovno unesem? Ako originalna LAB boja izlazi izvan sRGB gamuta, alat je prilagođava prikazivoj boji. Kada tu prilagođenu boju ponovno pretvorite u LAB, dobit ćete vrijednost koja odgovara prilagođenoj boji, a ne originalnoj. To je normalno ponašanje.

Koji format da koristim u CSS-u? hsl() ili hsla() su preporučeni jer omogućuju jednostavno mijenjanje svjetline i zasićenja. Ako trebate raditi s bojom u JavaScriptu, HSL je također prirodniji od HEX-a. HEX je i dalje uobičajen za statične boje, ali za dinamičke teme HSL je bolji izbor.

Što znači poruka o pogrešci „Unesite RGB kao tri broja 0–255”? To znači da niste unijeli tri cijela broja u rasponu 0–255. Provjerite jeste li koristili zarez ili razmak kao razdjelnik i jesu li svi brojevi unutar dopuštenog raspona. Isto vrijedi i za HSL unos: nijansa mora biti broj od 0 do 360, a zasićenje i svjetlina postotci.