Alat za odabir boja - Pretvorba RGB, Hex, CMYK i HSV kodova boja

Što je birač boja?

Birač boja alat je za odabir boje i prikaz njezine vrijednosti u različitim formatima boja. Ovaj alat istodobno prikazuje boju u formatima RGB (crvena, zelena, plava), heksadekadskom, CMYK (cijan, magenta, žuta, crna) i HSV (nijansa, zasićenost, vrijednost). Promjena bilo kojeg formata odmah ažurira ostale.

Kako se koristi birač boja

Boju je moguće odabrati na tri načina.

Kliknite bilo gdje u okviru spektra kako biste odabrali nijansu i zasićenost. Vodoravni položaj određuje nijansu (skupinu boja, primjerice crvenu ili plavu). Okomiti položaj određuje zasićenost (koliko boja izgleda živo ili isprano). Klizač ispod spektra upravlja svjetlinom, od crne na lijevoj strani do pune svjetline na desnoj.

Funkcionira i upisivanje točnih vrijednosti. Polje za heksadekadski zapis prihvaća kodove kao što je #2ECC71, sa znakom # ili bez njega. Svako RGB polje prihvaća cijeli broj od 0 do 255. Svako CMYK polje prihvaća cijeli broj od 0 do 100. Vrijednost upisana iznad dopuštenog raspona ograničava se na najveću vrijednost.

Uz svaki format boje nalazi se gumb za kopiranje. Klikom na njega vrijednost se kopira u međuspremnik i prikazuje se kratka poruka „Kopirano!”.

Objašnjenje modela boja

RGB

RGB opisuje boju kao mješavinu crvene, zelene i plave svjetlosti, iste tri boje koje zaslon koristi za stvaranje svakog piksela. Svaki kanal ima raspon od 0 do 255. RGB(255, 0, 0) čista je crvena, a RGB(0, 0, 0) crna. Preglednici, aplikacije i softver za videozapise koriste RGB jer odgovara načinu rada zaslona.

Heksadekadski zapis

Heksadekadski kod zapisuje RGB boju u bazi 16 umjesto u bazi 10. #2ECC71 ima tri para znakova: 2E za crvenu, CC za zelenu i 71 za plavu. Svaki se par kreće od 00 do FF. Heksadekadski su kodovi uobičajeni u web-dizajnu jer ih CSS prihvaća izravno, a kraći su za upis od rgb(). Postoji i skraćeni zapis od tri znaka: #0F0 znači isto što i #00FF00.

CMYK

CMYK se koristi za tisak. Pisač stvara boju nanošenjem slojeva cijan, magenta, žute i crne tinte na bijeli papir, pa radi oduzimanjem svjetlosti umjesto njezinim dodavanjem. Svaki je kanal postotak od 0 do 100. CMYK(0, 0, 0, 0) znači da uopće nema tinte, pa se vidi bijeli papir. CMYK ne može reproducirati svaku boju koju zaslon može prikazati; neke jarke boje zaslona, osobito određene plave i zelene, nakon tiska izgledaju zagasitije.

HSV

HSV zasebno opisuje nijansu, zasićenost i vrijednost. Nijansa je skupina boja izražena u stupnjevima od 0° do 360°, pri čemu je 0° crvena, 120° zelena, a 240° plava. Zasićenost označuje koliko je boja živa, od 0 % (siva) do 100 % (potpuno obojena). Vrijednost označuje svjetlinu, od 0 % (crna) do 100 % (puna svjetlina). HSV je blizak načinu na koji ljudi prirodno opisuju boje, pa se na njemu temelje spektar i klizač svjetline u ovom alatu.

Formula za pretvorbu iz RGB-a u heksadekadski zapis

Svaki RGB kanal, broj od 0 do 255, pretvara se u dvoznamenkasti heksadekadski broj, a zatim se ta tri para spajaju sa znakom # na početku.

$\text{Hex} = \text{\#} + \text{toHex}(R) + \text{toHex}(G) + \text{toHex}(B)$

Formula za pretvorbu iz RGB-a u CMYK

Najprije se svaki RGB kanal skalira na razlomak između 0 i 1. Crna (K) određuje se prema najvećem kanalu. Cijan, magenta i žuta zatim se izračunavaju iz preostalih kanala i vrijednosti K.

$R' = R/255,\quad G' = G/255,\quad B' = B/255$ $K = 1 - \max(R', G', B')$ $C = \frac{1-R'-K}{1-K}\times 100\%,\quad M = \frac{1-G'-K}{1-K}\times 100\%,\quad Y = \frac{1-B'-K}{1-K}\times 100\%$

Kada je K jednak 1 (boja je potpuno crna), C, M i Y postavljaju se na 0 kako bi se izbjeglo dijeljenje nulom.

Formula za pretvorbu iz RGB-a u HSV

RGB se najprije skalira na razlomke između 0 i 1. Neka je $C_{max}$ najveća od te tri vrijednosti, $C_{min}$ najmanja, a $\Delta$ njihova razlika.

$V = C_{max}\times 100\%$ $S = 0 \text{ if } C_{max}=0,\text{ inače } \frac{\Delta}{C_{max}}\times 100\%$

Nijansa ovisi o tome koji je kanal najveći:

0° & \Delta = 0 \\ 60°\times\left(\dfrac{G'-B'}{\Delta}\bmod 6\right) & C_{max}=R' \\ 60°\times\left(\dfrac{B'-R'}{\Delta}+2\right) & C_{max}=G' \\ 60°\times\left(\dfrac{R'-G'}{\Delta}+4\right) & C_{max}=B' \end{cases}$$ ## Primjer izračuna Počnimo s RGB(46, 204, 113), nijansom zelene boje. **Heksadekadski zapis:** 46 u heksadekadskom zapisu je `2E`, 204 je `CC`, a 113 je `71`, što daje `#2ECC71`. **CMYK:** Nakon skaliranja, R′ = 0,180, G′ = 0,800, B′ = 0,443. Najveći je G′, pa je K = 1 − 0,800 = 0,20, što znači 20 % crne. Zatim je C = (1 − 0,180 − 0,20) / 0,800 × 100 ≈ 77 %, M = (1 − 0,800 − 0,20) / 0,800 × 100 = 0 %, a Y = (1 − 0,443 − 0,20) / 0,800 × 100 ≈ 45 %. Rezultat je CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0,800 (zelena), $C_{min}$ = 0,180, pa je Δ = 0,620. Vrijednost = 80 %. Zasićenost = 0,620 / 0,800 × 100 ≈ 77 %. Budući da je zelena najveća, H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Rezultat je HSV(145°, 77 %, 80 %). ## Kako odabir boja učiniti pristupačnim Otprilike 1 od (2,5 cm) 12 muškaraca i oko 1 od (2,5 cm) 200 žena ima neki oblik poremećaja raspoznavanja boja, najčešće smanjenu sposobnost razlikovanja crvene od zelene. Dizajn koji se oslanja samo na boju za prenošenje značenja, primjerice crvena poruka o pogrešci bez ikone ili oznake, neće funkcionirati za te korisnike. Dodavanje tekstualne oznake, ikone ili uzorka uz boju rješava taj problem. Tekst također mora imati dovoljan kontrast u odnosu na pozadinu. Smjernice za pristupačnost web-sadržaja (WCAG) preporučuju omjer kontrasta od najmanje 4,5:1 za običan tekst i 3:1 za veliki tekst. Za mjerenje je potreban poseban alat za provjeru kontrasta jer ovaj alat sam ne izračunava omjere kontrasta. ## Često postavljana pitanja **Koja je razlika između RGB-a i CMYK-a?** RGB je namijenjen zaslonima i stvara boju dodavanjem crvene, zelene i plave svjetlosti. CMYK je namijenjen tisku i stvara boju nanošenjem slojeva tinte na papir, čime se svjetlost oduzima. RGB može proizvesti jarkije boje od CMYK-a jer tinta ne može obuhvatiti raspon boja koji zaslon može emitirati. **Zašto se ispisane boje razlikuju od onih na zaslonu?** Zaslon izravno emitira svjetlost, dok ispisana stranica samo odbija svjetlost koja pada na nju. CMYK tinta također obuhvaća manji raspon boja od RGB svjetlosti, pa se neke jarke boje zaslona ne mogu potpuno jednako prikazati na papiru. **Što simbol # znači u heksadekadskom kodu?** On označuje da su znakovi koji slijede heksadekadski kod boje, prema konvenciji iz ranih verzija HTML-a i CSS-a. Bez njega preglednik neće prepoznati vrijednost kao boju. **Zašto neki heksadekadski kodovi imaju samo tri znaka?** Kod od tri znaka skraćeni je oblik koda od šest znakova u kojem se svaka znamenka u paru ponavlja. `#0F0` proširuje se u `#00FF00`. **Jesu li pretvorbe između formata točne?** Pretvorba iz RGB-a u heksadekadski zapis točna je jer se radi o istim brojevima zapisanima u drugoj bazi. Pretvorba iz RGB-a u CMYK približna je jer se pretvaraju svjetlost i tinta, odnosno dva različita fizička procesa s različitim rasponima boja. **Može li ovaj alat odabrati boju izravno sa slike ili web-stranice?** Ne. Proširenje preglednika ili ugrađeni birač boja operacijskog sustava (primjerice Digital Color Meter u sustavu macOS) može očitati boju sa zaslona; dobivena se vrijednost zatim može upisati u ovaj alat radi pretvorbe.