RGB nije dovoljan: notacije boja HSL, CMYK i OKLCH

U prethodnom članku, Kako računala stvaraju boje: RGB, HEX i binarne vrijednosti, vidjeli smo da je boja samo tri broja — crvena, zelena, plava, svaka od 0 do 255. Zaslonima to savršeno odgovara. No čim čovjek počne raditi s bojom, RGB brzo postaje nespretan.

RGB je praktičan, ali ne intuitivan

“Malo svjetlija crvena.” Kako to postići u RGB-u? Sva tri kanala treba malo podići istovremeno. “Smanji samo zasićenost malo” — gledajući samo RGB nije jasno što treba smanjiti. “Ispiši tu boju točno na papiru” — to s RGB-om jednostavno nije moguće.

Drugi sustavi za zapisivanje boja nastali su upravo kako bi riješili te probleme.

HSL — način na koji čovjek razmišlja

HSL boju dijeli na nijansu, zasićenost i svjetlinu. hsl(14, 100%, 60%) je ista boja kao #FF5733, ali jasno je što dolazi odakle.

Ako je RGB jezik računala — HSL je jezik dizajnera. Ista boja može se promatrati iz perspektive što se želi promijeniti.

Hue — nijansa je krug od 360°

Nijansa ide u krug poput sata. Od 0° do 360°. 0° i 360° su ista crvena.

Saturation — zasićenost je intenzitet boje

Ista nijansa smanjivanjem zasićenosti postupno postaje sivija.

Lightness — svjetlina od crne do bijele

L = 0% uvijek je crna, L = 100% uvijek je bijela. 50% je “izvorna” svjetlina te boje.

Prava primjena HSL-a — izrada palete

Zadržavanjem iste nijanse (Hue) i mijenjanjem samo L-a nastaje skup boja koje prirodno harmoniraju. Da se isti posao napravi u RGB-u, svaki od 9 kvadratića trebalo bi ručno izračunati. U HSL-u dovoljno je mijenjati L korak po korak od 12% do 92%.

Obje gornje palete mogu se definirati u samo par redaka.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... samo mijenjaj L za 10 i gotovo */
}

Tu HSL najviše dolazi do izražaja pri izgradnji dizajnerskih sustava.

CMYK — jezik tinte

Za nanošenje boje na papir umjesto ekrana potreban je potpuno drugačiji sustav. CMYK su postoci četiri tinte koje koristi tiskara.

Zašto se crna zove “K” a ne “B”? Jer bi B bilo zbunjujuće s Blue. Naziv dolazi od tiskarskog pojma “Key plate” — referentna ploča na kojoj se poravnavaju ostale tinte.

Svjetlost se pojačava dodavanjem, a tinta se tamni dodavanjem

Najveća razlika između RGB-a i CMYK-a je način miješanja.

Crvena tinta izgleda crveno jer apsorbira ostalo svjetlo i reflektira samo crvenu. Tinta oduzima svjetlost. Zbog toga se miješanjem tinte boja tamni. Teorijski, miješanjem CMY nastaje crna, no u praksi ispada mutna smeđa. Zato postoji posebna crna tinta (K).

Gdje se koristi CMYK

Ako radite dizajn za ekran, CMYK gotovo nećete ni dodirnuti. Pojavljuje se samo za tisak na papir.

• Predaja datoteke tiskari — posjetnice, plakati, knjige, ambalaža. Tiskara prima RGB datoteku i pretvara je u CMYK.
• Rad za tisak u Photoshopu / Illustratoru — od početka se radi u CMYK načinu rada.
• Brand vodič — navode se HEX za ekran i CMYK za tisak zajedno, jer ista boja branda treba izgledati slično na oba medija.

Zašto se boje ekrana i tiska razlikuju — Gamut

Raspon boja koje može prikazati ekran (RGB gamut) i raspon koji može reproducirati tinta (CMYK gamut) nisu isti. Jarko neonsko ružičasto na ekranu neće ispasti jednako na ispisu — ta boja jednostavno ne postoji u tinti.

Zato tiskovni dizajneri biraju samo boje unutar CMYK dosega prije nego što počnu raditi. Dizajni izrađeni u RGB-u koji se direktno tiskaju često izgledaju beživotno.

Kako se zapisuju CMYK vrijednosti

Bilježi se koliko posto svake tinte treba nanositi. 0% znači ništa, 100% znači puno.

Korištenjem samo K 100% dobiva se mutna crna nalik sivoj. Zbog toga tiskare dodaju CMY ispod kako bi dobili dublje crno.

OKLCH — ljudske koordinate

Model boja koji se ozbiljno pojavio u 2020-ima. Ključna riječ je jedna — “prirodno za ljudsko oko.”

Tri koordinate nalikuju onima u HSL-u:

• L — Lightness (svjetlina, 0–1)
• C — Chroma (zasićenost, 0–~0.4)
• H — Hue (nijansa, 0–360°)

No HSL ima skriveni problem. Isti L = 50% kod različitih boja doživljava se kao potpuno drugačija svjetlina. Usporedite sami.

U jednoj rečenici — RGB i HSL su koordinate strojeva. OKLCH su koordinate čovjeka.

L, C i H — uloga svake koordinate

Pogledajmo što se dogodi kad se za istu boju mijenja samo jedna koordinata.

Gdje se primjenjuje

• Paleta ujednačene svjetline — kad je potrebno 8 kategorijskih boja iste percipirane svjetline
• Automatska konverzija tamne/svjetle teme — inverzijom L vrijednosti nastaje prirodna tamna tema
• Pristupačnost — kontrast svjetline između teksta i pozadine može se precizno predvidjeti
• Gradijenti — prirodan prijelaz bez sivog pojasa u sredini

Službeno je usvojen u CSS Color Level 4 i može se koristiti direktno u modernim preglednicima.

.btn { background: oklch(67% 0.18 30); }       /* narančasta */
.btn:hover { background: oklch(60% 0.18 30); } /* L smanjen za 7 → točno toliko tamnije */

Što se koristi kada

Za većinu digitalnog rada RGB/HEX je sasvim dovoljan. HSL je korisno imati na umu pri izradi paleta, a OKLCH znatno pomaže pri dizajniranju tamnih/svjetlih tema.

Rad s bojama u fns-u

Kad boje postanu brojevi, sljedeći korak je imati omiljene boje nadohvat ruke. fns objedinjuje dohvaćanje, pohranjivanje i ponovnu upotrebu boja iza jedne tipke.

Eyedropper — uzimanje boje s bilo kojeg dijela ekrana — ⌘+Shift+K

Eyedropper je alat koji hvata točnu boju bilo kojeg piksela na ekranu. Kao da se birač boja dostupan samo unutar Figme ili Photoshopa izvukao na razinu cijelog sustava.

Pritisnite ⌘+Shift+K i fns Eyedropper se pojavljuje bilo gdje na ekranu. Piksel u dizajnerskoj skici, određeno područje fotografije, boja pozadine druge aplikacije — priđite mišem i kliknite da biste uhvatili točnu boju tog mjesta.

• Svaki klik automatski sprema u međuspremnik. Nije potrebna posebna radnja “kopiraj”.
• U Eyedropper widgetu možete odabrati u kojim formatu (RGB / HEX / HSL / CMYK / OKLCH) se pohranjuje u međuspremnik.
• Prikazuje vizualni pregled uhvaćene boje zajedno s najbližim sistemskim bojama.

Eyedropper → automatsko spremanje u međuspremnik → dohvaćanje iz birača međuspremnika — tok nikad nije prekinut. Ne treba zasebno otvarati Mac Digital Color Meter niti pritiskati prečac za kopiranje svaki put.

Međuspremnik automatski prepoznaje boje

fns povijest međuspremnika automatski detektira je li kopirani tekst kod boje. Prepoznaje bez obzira na format.

Kad se kopirana boja ponovo dohvaća iz povijesti, teško je samo iz teksta zapamtiti koja je boja. fns prikazuje mali uzorak boje uz svaki unos kako biste odmah vidjeli o kojoj je boji riječ.

Pregled samo boja

Jednom tipkom možete filtrirati povijest međuspremnika da prikazuje samo kodove boja. Kad durante rada na dizajnu trebate samo nedavno korištene boje, ne morate pretraživati između teksta, URL-ova i koda.

• U istom biraču: ključna riječ filtera color: → prikazuju se samo unosi boja
• Pretraživanje po imenu boje — “blue”, “red” filtrira samo tu paletu
• Slične boje vizualno su grupirane zajedno

Konverzija jedne boje u drugi format

Ista boja može se dohvatiti konvertirana u drugi zapis. Kad kopirate #FF5733 iz Figme i trebate ga zalijepiti kao rgb(...) u CSS, odaberite taj unos u fns biraču međuspremnika i jednim prečacem automatski se konvertira.

Nema potrebe za zasebnim konverterom svaki put kad prelazite između Figme (HSB) i CSS-a (HSL/HEX/OKLCH).

Proširivanje teksta i grupiranje boja

Često korištene brand boje registriraju se kao tekstualne kratice.

Iste kratice rade svugdje — u polju za unos boje u CSS-u, Figmi, Slack porukama i uređivačima koda. Nestaje potreba za traženjem i kopiranjem boja iz brand vodiča svaki put.

Isprobajte fns i uštedite vrijeme koje ste trošili na otvaranje konvertera i prebacivanje kodova boja u različite formate.

Zanima vas odakle uopće dolaze ti brojevi — osnove triju RGB kanala, binarnog sustava i HEX notacije? Počnite s Kako računala stvaraju boje: RGB, HEX i binarne vrijednosti.