Šta je RGB i kako ga prikazivači koriste?
RGB (crvena, zelena, plava) je aditivni model boje na kojem se zasniva svaki moderni ekran – od monitora i laptopa do pametnih telefona. Svaki piksel na ekranu sastoji se od tri subpiksela koji emituju svjetlost u crvenom, zelenom i plavom spektru. Kombinacijom tih triju svjetlosnih izvora u različitom intenzitetu dobijamo spektar boja koji ljudsko oko može vidjeti unutar granica uređaja.
Intenzitet svake komponente izražava se cijelim brojem od 0 do 255, što odgovara 8‑bitnoj dubini boje po kanalu (256 mogućih nivoa). Vrijednost 0 znači da je taj subpiksel potpuno isključen, a 255 da je maksimalno osvijetljen. Ukupan broj boja u standardnom RGB prostoru je 256³ ≈ 16,7 miliona, što je dovoljno za fotorealističan prikaz. Većina alata i operativnih sistema koristi sRGB kao referentni prostor – to je standard koji definira tačne kolorimetrijske karakteristike svjetlosnog izlaza kod tipičnih ekrana.
Kada unesete tri broja, na primjer 79, 70, 229, vaš uređaj miješa 79 jedinica crvene, 70 zelene i 229 plave svjetlosti. Rezultat je ljubičasta nijansa. Problem s RGB‑om je što promjena samo jedne komponente, recimo povećanje crvene sa 79 na 100, ne mijenja samo svjetlinu – mijenja i nijansu. To je glavni razlog zašto dizajneri i developeri radije koriste HSL kad trebaju ručno podešavati boje ili graditi palete.
HSL model – boja prilagođena ljudskoj percepciji
HSL (hue, saturation, lightness – nijansa, zasićenje, svjetlina) model boju opisuje na način koji je ljudima intuitivniji od sirovih brojeva RGB. Nijansa se izražava u stepenima na krugu od 0° do 360°: 0° je crvena, 120° zelena, 240° plava, a zatim se vraća u crvenu na 360°. Zasićenje i svjetlina daju se u postocima (0%–100%). Na primjer, boja rgb(79, 70, 229) u HSL‑u postaje hsl(243, 75%, 59%) – nijansa 243° (duboko plavoljubičasta), zasićenje 75% (prilično čista boja) i svjetlina 59% (srednje svijetla).
Ključna prednost HSL‑a jest mogućnost da nezavisno mijenjate svjetlinu bez utjecaja na nijansu. To je nemoguće u RGB‑u: ako želite tamniju verziju iste nijanse, u RGB‑u morate smanjiti sve tri komponente proporcionalno, ali suštinski mijenjate odnos. U HSL‑u jednostavno smanjite postotak svjetline. Zato se HSL koristi za generiranje boja, nijansi (tints – dodavanje bijele), tonova (tones – dodavanje sive) i sjenki (shades – dodavanje crne) bez gubitka prepoznatljivosti nijanse.
Kako alat pretvara RGB u HSL
Konverzija se odvija u dva koraka unutar vašeg preglednika – nijedan podatak ne napušta računar. Prvi korak je normalizacija RGB vrijednosti: svaki broj od 0–255 podijeli se sa 255, tako da se dobiju decimalne vrijednosti R', G', B' u opsegu 0–1. Za primjer rgb(79, 70, 229):
- R' = 79 / 255 ≈ 0,310
- G' = 70 / 255 ≈ 0,275
- B' = 229 / 255 ≈ 0,898
Drugi korak koristi tri izvedene vrijednosti: maksimum (M), minimum (m) i raspon (Δ = M – m). Ovdje je M = 0,898 (plava), m = 0,275 (zelena), Δ = 0,623.
Svjetlina (L) se računa kao aritmetička sredina normaliziranih maksimuma i minimuma:
L = (M + m) / 2 = (0,898 + 0,275) / 2 ≈ 0,586 → 58,6% (zaokruženo na 59%).
Zasićenje (S) zavisi od svjetline:
Ako je Δ = 0, boja je akromatska (siva) i S = 0%.
Inače S = Δ / (1 – |2L – 1|).
Ovdje: |2×0,586 – 1| = |0,172| = 0,172
S = 0,623 / (1 – 0,172) = 0,623 / 0,828 ≈ 0,752 → 75,2% → 75%.
Nijansa (H) računa se u stepenima prema tome koja je komponenta maksimalna:
- Ako je M = R', H = 60° × ((G' – B') / Δ mod 6)
- Ako je M = G', H = 60° × ((B' – R') / Δ + 2)
- Ako je M = B', H = 60° × ((R' – G') / Δ + 4)
Ovdje je M = B', pa:
H = 60° × ((0,310 – 0,275) / 0,623 + 4) = 60° × (0,035/0,623 + 4) = 60° × (0,0562 + 4) = 60° × 4,0562 ≈ 243,4° → 243°.
Konačni HSL ispis: hsl(243°, 75%, 59%). Sve ove računice alat obavlja u milisekundama i istovremeno prikazuje HEX, HSV, CMYK i LAB ekvivalente. Ako uredite bilo koje polje – recimo unesete HSL direktno – alat trenutno preračunava nazad u RGB primjenom inverzne formule.
Primjena HSL u web razvoju i dizajnu
CSS modernih preglednika podržava hsl() i hsla() funkcije, što omogućava direktno korištenje HSL vrijednosti u stilovima. Za razliku od HEX koda, HSL je čitljiv i lako podesiv rukom. Primjer:
.button {
background-color: hsl(243, 75%, 59%);
}
.button:hover {
background-color: hsl(243, 75%, 70%);
}
Povećali ste svjetlinu za 11 procentnih poena bez diranja nijanse. U RGB‑u biste morali promijeniti sva tri broja i testirati da li je nijansa ostala ista. Zato se HSL koristi za prilagođavanje tema: ako imate primarnu boju brenda, njenom HSL‑u lako dodajete varijacije za svijetli i tamni modus, za hover, aktivna stanja ili disabled elemente.
U pristupačnosti (accessibility) HSL je dragocjen jer možete precizno kontrolisati svjetlinu da ispunite WCAG kontrastne omjere. Potreban vam je omjer 4,5:1 za normalan tekst. Pomoću HSL‑a smanjite svjetlinu tamnog teksta ili povećate svjetlinu pozadine, dok nijansa ostaje konzistentna – identitet boje se ne gubi.
Ograničenja HSL i kada koristiti LAB
Iako je HSL koristan, nije savršen. Njegova svjetlina (lightness) nije perceptivno uniformna – na primjer, žuta boja pri 50% svjetline izgleda mnogo svjetlija od plave pri istih 50%. To je zato što ljudsko oko ima različitu osjetljivost na valne dužine. Za poslove gdje je važno da vizuelni korak između boja bude ujednačen – poput sekvencijalnih skala u vizuelizaciji podataka – bolje je koristiti perceptivno uniforman model poput CIELAB (LAB). Ovaj alat prilikom unosa LAB ili CMYK vrijednosti koje padaju izvan vidljivog RGB gamuta automatski prilagođava boju na najbližu prikazivu. Međutim, ako tu prilagođenu boju ponovo pretvorite u LAB, doći će do blagog pomaka – zato se ne preporučuje kružna konverzija bez provjere.
CMYK izlaz je samo procjena za ekran. Zbog razlika između aditivnog (ekran) i suptraktivnog (štampa) procesa, pravi CMYK za štampu može odstupati. Koristite CMYK vrijednosti iz ovog alata samo za orijentaciju, nikad za finalni print bez separacije u profesionalnom softveru.
Pravila unosa i rubni slučajevi
Alat očekuje RGB ulaz kao tri cijela broja odvojena zarezima ili razmacima. Primjer ispravnog unosa: 79, 70, 229 ili 79 70 229. Ako unesete nešto što nije prepoznatljivo (npr. 79,70 ili 79, 70, 229a), alat prikazuje poruku: “Enter RGB as three numbers 0–255, like 79, 70, 229.”
HSL direktni unos također je moguć: mora sadržati nijansu (0–360) i dva postotka, npr. 243, 75%, 59%. Neispravan HSL uzrokuje poruku: “Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”
Sva polja su dvosmjerno povezana – editiranje jednog automatski ažurira ostala. Ovdje nema servera; sve se dešava u vašem pregledniku pomoću JavaScripta. Boje koje unesete ostaju samo na vašem uređaju.
FAQ
1. Zašto bih koristio HSL umjesto RGB za pristupačnost?
HSL omogućava da nezavisno podesite svjetlinu bez promjene nijanse. Kada tražite dovoljan kontrast za tekst, možete smanjiti svjetlinu tamnog elementa ili povećati svjetlinu pozadine, dok boja ostaje prepoznatljiva. U RGB‑u biste morali pogađati.
2. Kako da unesem HSL vrijednost direktno u alat?
Napišite nijansu (0–360), zatim zarez ili razmak, pa zasićenje sa znakom postotka, pa svjetlinu sa znakom postotka. Primjer: 243, 75%, 59%. Alat će odmah prikazati RGB i ostale formate.
3. Zašto alat kaže da je CMYK samo “on‑screen estimate”?
CMYK je namijenjen štampi, a ekrani rade u aditivnom RGB prostoru. Formula za konverziju RGB → CMYK je aproksimativna i ne uzima u obzir specifične profile štampe, boje mastila ili podlogu. Za tačan CMYK potrebna je softverska separacija sa ICC profilom.
4. Šta se dešava ako unesem LAB boju koja je van vidljivog RGB gamuta?
Alat će prilagoditi boju na najbližu moguću koja se može prikazati na ekranu. Ta prilagođena boja više nije originalna LAB vrijednost. Ako je ponovo pretvorite u LAB, dobit ćete drugačije brojeve – mali pomak je neizbježan.
5. Da li alat pohranjuje ili šalje moje podatke na server?
Ne. Sve konverzije se izvršavaju u vašem pregledniku. Ni RGB, HSL ni bilo koja druga vrijednost ne napušta vaš uređaj.
6. Mogu li koristiti HSL vrijednosti direktno u CSS‑u?
Da, savremeni preglednici podržavaju hsl(h s l) i hsla(h s l / a) sintaksu. Preporučuje se korištenje bez zareza radi kompatibilnosti, iako starija sintaksa sa zarezima još uvijek radi. Alat vam daje HSL u obliku hsl(243, 75%, 59%) koji možete kopirati direktno u CSS.