Izbirnik barv - Pretvorba RGB, Hex, CMYK in HSV barvnih kod

Kaj je izbirnik barv?

Izbirnik barv je orodje za izbiro barve in prikaz njene vrednosti v različnih barvnih zapisih. Ta prikazuje barvo hkrati v zapisih RGB (rdeča, zelena, modra), šestnajstiškem zapisu, CMYK (cian, magenta, rumena, črna) in HSV (odtenek, nasičenost, vrednost). Sprememba katerega koli zapisa takoj posodobi druge.

Kako uporabljati izbirnik barv

Barvo lahko izberete na tri načine.

Kliknite kjer koli v polju spektra, da izberete odtenek in nasičenost. Vodoravni položaj določa odtenek (barvno družino, na primer rdečo ali modro). Navpični položaj določa nasičenost (kako živa ali sprana je videti barva). Drsnik pod spektrom določa svetlost, od črne na levi do polne svetlosti na desni.

Deluje tudi vnos natančnih vrednosti. Polje za šestnajstiški zapis sprejema kode, kot je #2ECC71, z znakom # ali brez njega. Vsako polje RGB sprejema celo število od 0 do 255. Vsako polje CMYK sprejema celo število od 0 do 100. Vrednost, vnesena nad dovoljenim razponom, se omeji na največjo vrednost.

Ob vsakem barvnem zapisu je gumb za kopiranje. S klikom se vrednost kopira v odložišče in prikaže se kratko sporočilo »Kopirano!«.

Razlaga barvnih modelov

RGB

RGB opisuje barvo kot mešanico rdeče, zelene in modre svetlobe, torej istih treh barv, ki jih zaslon uporablja za ustvarjanje vsake slikovne pike. Vsak kanal ima razpon od 0 do 255. RGB(255, 0, 0) je čista rdeča, RGB(0, 0, 0) pa črna. Brskalniki, aplikacije in programska oprema za video uporabljajo RGB, ker ustreza načinu delovanja zaslonov.

Šestnajstiški zapis

Šestnajstiška koda zapiše barvo RGB v osnovi 16 namesto v osnovi 10. #2ECC71 ima tri pare znakov: 2E za rdečo, CC za zeleno in 71 za modro. Vsak par sega od 00 do FF. Šestnajstiške kode so pogoste pri spletnem oblikovanju, ker jih CSS sprejema neposredno in jih je mogoče vnesti krajše kot rgb(). Obstaja tudi okrajšava s tremi znaki: #0F0 pomeni isto kot #00FF00.

CMYK

CMYK se uporablja pri tiskanju. Tiskalnik ustvari barvo z nanašanjem cianovega, magentnega, rumenega in črnega črnila na bel papir, zato deluje z odvzemanjem svetlobe namesto z njenim dodajanjem. Vsak kanal je odstotek od 0 do 100. CMYK(0, 0, 0, 0) pomeni, da črnila sploh ni, zato se vidi beli papir. CMYK ne more poustvariti vseh barv, ki jih lahko prikaže zaslon; nekatere svetle barve zaslona, zlasti določeni odtenki modre in zelene, so po natisu videti bolj medle.

HSV

HSV ločeno opisuje odtenek, nasičenost in vrednost. Odtenek je barvna družina, podana v stopinjah od 0° do 360°, pri čemer je 0° rdeča, 120° zelena in 240° modra. Nasičenost pove, kako živa je barva, od 0 % (siva) do 100 % (popolnoma obarvana). Vrednost pove, kako svetla je, od 0 % (črna) do 100 % (polna svetlost). HSV je podoben načinu, kako ljudje naravno opisujejo barve, zato ta izbirnik na njem temelji pri spektru in drsniku za svetlost.

Formula za pretvorbo RGB v šestnajstiški zapis

Vsak kanal RGB, število od 0 do 255, se pretvori v dvomestno šestnajstiško število, nato pa se trije pari združijo s # na začetku.

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

Formula za pretvorbo RGB v CMYK

Najprej se vsak kanal RGB pretvori v ulomek med 0 in 1. Črna (K) se določi iz največjega kanala. Cian, magenta in rumena se nato izračunajo iz preostalih kanalov in 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\%$

Ko je K enak 1 (barva je čista črna), se C, M in Y nastavijo na 0, da se prepreči deljenje z nič.

Formula za pretvorbo RGB v HSV

RGB se najprej pretvori v ulomke med 0 in 1. Naj bo $C_{max}$ največji od treh, $C_{min}$ najmanjši, $\Delta$ pa razlika med njima.

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

Odtenek je odvisen od tega, kateri kanal je največji:

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}$$ ## Primer izračuna Začnite z RGB(46, 204, 113), odtenkom zelene. **Šestnajstiški zapis:** 46 v šestnajstiškem zapisu je `2E`, 204 je `CC`, 113 pa je `71`, kar da `#2ECC71`. **CMYK:** Po pretvorbi so R′ = 0,180, G′ = 0,800, B′ = 0,443. Največji je G′, zato je K = 1 − 0,800 = 0,20, kar pomeni 20 % črne. Nato je C = (1 − 0,180 − 0,20) / 0,800 × 100 ≈ 77 %, M = (1 − 0,800 − 0,20) / 0,800 × 100 = 0 %, 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, zato je Δ = 0,620. Vrednost = 80 %. Nasičenost = 0,620 / 0,800 × 100 ≈ 77 %. Ker je zeleni kanal največji, je H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Rezultat je HSV(145°, 77 %, 80 %). ## Dostopnejša izbira barv Približno 1 od (2,5 cm) 12 moških in približno 1 od (2,5 cm) 200 žensk ima določeno obliko motnje barvnega vida, najpogosteje zmanjšano sposobnost razlikovanja rdeče od zelene. Oblikovanje, ki se pri posredovanju pomena zanaša samo na barvo, na primer rdeče sporočilo o napaki brez ikone ali oznake, pri teh uporabnikih ne bo delovalo. Dodajanje besedilne oznake, ikone ali vzorca poleg barve to odpravi. Tudi besedilo mora imeti zadosten kontrast z ozadjem. Smernice za dostopnost spletnih vsebin (WCAG) priporočajo kontrastno razmerje najmanj 4,5:1 za običajno besedilo in 3:1 za veliko besedilo. Za merjenje tega je potrebno posebno orodje za preverjanje kontrasta, saj ta pripomoček sam ne izračunava kontrastnih razmerij. ## Pogosta vprašanja **Kakšna je razlika med RGB in CMYK?** RGB je namenjen zaslonom in ustvarja barve z dodajanjem rdeče, zelene in modre svetlobe. CMYK je namenjen tiskanju in ustvarja barve z nanašanjem črnila na papir, pri čemer svetlobo odvzema. RGB lahko ustvari svetlejše barve kot CMYK, ker črnilo ne more poustvariti celotnega razpona barv, ki jih lahko odda zaslon. **Zakaj so natisnjene barve videti drugače kot na zaslonu?** Zaslon svetlobo oddaja neposredno, natisnjena stran pa le odbija svetlobo, ki pade nanjo. Črnilo CMYK ima tudi manjši razpon barv kot svetloba RGB, zato nekaterih svetlih barv zaslona na papirju ni mogoče natančno poustvariti. **Kaj pomeni simbol # v šestnajstiški kodi?** Označuje naslednje znake kot šestnajstiško barvno kodo, kar je konvencija iz zgodnjih različic HTML in CSS. Brez njega brskalnik vrednosti ne bo prepoznal kot barve. **Zakaj imajo nekatere šestnajstiške kode samo tri znake?** Koda s tremi znaki je okrajšava šestmestne kode, pri kateri se vsaka dvojica ponovi z isto števko. `#0F0` se razširi v `#00FF00`. **Ali so pretvorbe med zapisi natančne?** Pretvorba iz RGB v šestnajstiški zapis je natančna, saj gre za ista števila, zapisana v drugi osnovi. Pretvorba iz RGB v CMYK je približna, ker pretvarja med svetlobo in črnilom, ki sta različna fizikalna procesa z različnima razponoma barv. **Ali lahko to orodje izbere barvo neposredno iz slike ali spletne strani?** Ne. Razširitev brskalnika ali vgrajeni izbirnik barv operacijskega sistema (na primer Digital Color Meter v sistemu macOS) lahko prebere barvo z zaslona; dobljeno vrednost lahko nato vnesete v to orodje za pretvorbo.