Värvivalija tööriist - RGB, Hex, CMYK ja HSV värvikoodide teisendamine

Mis on värvivalija?

Värvivalija on tööriist värvi valimiseks ja selle väärtuse kuvamiseks eri värvivormingutes. See kuvab värvi korraga RGB-vormingus (punane, roheline, sinine), kuueteistkümnendsüsteemis, CMYK-vormingus (tsüaan, magenta, kollane, must) ja HSV-vormingus (värvitoon, küllastus, väärtus). Ühe vormingu muutmisel uuendatakse teisi kohe.

Kuidas värvivalijat kasutada

Värvi saab valida kolmel viisil.

Värvitooni ja küllastuse valimiseks klõpsake spektrikasti suvalises kohas. Horisontaalne asukoht määrab värvitooni ehk värviperekonna, näiteks punase või sinise. Vertikaalne asukoht määrab küllastuse ehk selle, kui erksana või tuhmina värv paistab. Spektri all olev liugur reguleerib heledust: vasakul on must ja paremal täielik heledus.

Täpsete väärtuste sisestamine toimib samuti. Kuueteistkümnendkoodi väli aktsepteerib selliseid koode nagu #2ECC71 koos #-märgiga või ilma selleta. Iga RGB-väli aktsepteerib täisarvu vahemikus 0 kuni 255. Iga CMYK-väli aktsepteerib täisarvu vahemikus 0 kuni 100. Lubatud vahemikku ületav väärtus piiratakse maksimumiga.

Iga värvivormingu kõrval on kopeerimisnupp. Selle klõpsamisel kopeeritakse väärtus lõikelauale ja kuvatakse lühike teade „Kopeeritud!“.

Värvimudelid selgitatud

RGB

RGB kirjeldab värvi punase, rohelise ja sinise valguse seguna – need on samad kolm värvi, mida ekraan kasutab iga piksli loomiseks. Iga kanali väärtus jääb vahemikku 0 kuni 255. RGB(255, 0, 0) on puhas punane ja RGB(0, 0, 0) on must. Brauserid, rakendused ja videotöötlustarkvara kasutavad kõik RGB-d, sest see vastab ekraanide tööpõhimõttele.

Kuueteistkümnendkood

Kuueteistkümnendkood kirjutab RGB-värvi baasis 16, mitte baasis 10. #2ECC71 koosneb kolmest märgipaarist: 2E tähistab punast, CC rohelist ja 71 sinist. Iga paar jääb vahemikku 00 kuni FF. Kuueteistkümnendkoode kasutatakse veebidisainis sageli, sest CSS aktsepteerib neid otse ja neid on lühem sisestada kui rgb()-funktsiooni. Olemas on ka kolmemärgiline lühivorm: #0F0 tähendab sama mis #00FF00.

CMYK

CMYK-d kasutatakse trükkimisel. Printer moodustab värvi tsüaani, magenta, kollase ja musta tindi kihtidena valgele paberile, seega põhineb see valguse lahutamisel, mitte liitmisel. Iga kanali väärtus on protsent vahemikus 0 kuni 100. CMYK(0, 0, 0, 0) tähendab, et tinti pole üldse ja nähtavaks jääb valge paber. CMYK ei suuda taasesitada kõiki värve, mida ekraan kuvada võib; mõned erksad ekraanivärvid, eriti teatud sinised ja rohelised, paistavad pärast trükkimist tuhmimad.

HSV

HSV kirjeldab värvitooni, küllastust ja heledust eraldi. Värvitoon on värviperekond, mida väljendatakse kraadides vahemikus 0° kuni 360°: 0° on punane, 120° roheline ja 240° sinine. Küllastus näitab, kui erk värv on, ulatudes 0%-st (hall) kuni 100%-ni (täielikult värviline). Väärtus näitab heledust, ulatudes 0%-st (must) kuni 100%-ni (täielik heledus). HSV sarnaneb sellele, kuidas inimesed värve loomulikult kirjeldavad, mistõttu põhinevad selle tööriista spekter ja heleduse liugur sellel mudelil.

RGB-st kuueteistkümnendkujule teisendamise valem

Iga RGB-kanal, mille väärtus jääb vahemikku 0 kuni 255, teisendatakse kahekohaliseks kuueteistkümnendarvuks, seejärel ühendatakse kolm paari, lisades ette märgi #.

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

RGB CMYK-ks teisendamise valem

Kõigepealt skaleeritakse iga RGB-kanal murruks vahemikus 0 kuni 1. Musta (K) väärtuseks määratakse suurima kanali põhjal saadud väärtus. Seejärel arvutatakse tsüaani, magenta ja kollase väärtused ülejäänud kanalite ning K põhjal.

$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\%$

Kui K võrdub 1-ga ehk värv on puhas must, määratakse C, M ja Y väärtuseks 0, et vältida nulliga jagamist.

RGB HSV-ks teisendamise valem

Esmalt skaleeritakse RGB-kanalid murdudeks vahemikus 0 kuni 1. Olgu $C_{max}$ kolmest suurim, $C_{min}$ väikseim ning $\Delta$ nende vahe.

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

Värvitoon sõltub sellest, milline kanal on suurim:

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}$$ ## Lahendatud näide Alustame väärtusest RGB(46, 204, 113), mis on roheline toon. **Kuueteistkümnendsüsteem:** 46 on kuueteistkümnendsüsteemis `2E`, 204 on `CC` ja 113 on `71`, mille tulemuseks on `#2ECC71`. **CMYK:** Skaleeritult on R′ = 0,180, G′ = 0,800 ja B′ = 0,443. Suurim on G′, seega K = 1 − 0,800 = 0,20, mis tähendab 20% musta. Seejärel C = (1 − 0,180 − 0,20) / 0,800 × 100 ≈ 77%, M = (1 − 0,800 − 0,20) / 0,800 × 100 = 0% ja Y = (1 − 0,443 − 0,20) / 0,800 × 100 ≈ 45%. Tulemuseks on CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0,800 (roheline), $C_{min}$ = 0,180, seega Δ = 0,620. Väärtus = 80%. Küllastus = 0,620 / 0,800 × 100 ≈ 77%. Kuna suurim on roheline, siis H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Tulemuseks on HSV(145°, 77%, 80%). ## Värvivalikute ligipääsetavaks muutmine Ligikaudu 1 mehel (2,5 cm) 12-st ja umbes 1 naisel (2,5 cm) 200-st on mingis vormis värvinägemishäirega, kõige sagedamini on neil vähenenud võime eristada punast rohelisest. Kujundus, mis kasutab tähenduse edastamiseks ainult värvi, näiteks punane veateade ilma ikooni või sildita, ei toimi nende kasutajate puhul. Värvi kõrvale teksti, ikooni või mustri lisamine lahendab selle probleemi. Tekstil peab taustaga võrreldes olema ka piisav kontrast. Veebisisu juurdepääsetavuse juhised (WCAG) soovitavad tavalise teksti puhul kontrastsussuhet vähemalt 4,5:1 ja suure teksti puhul 3:1. Selle mõõtmiseks on vaja eraldi kontrastikontrollijat, sest see tööriist kontrastsussuhteid ise ei arvuta. ## Korduma kippuvad küsimused **Mis vahe on RGB-l ja CMYK-l?** RGB on mõeldud ekraanidele ja moodustab värvi punase, rohelise ning sinise valguse liitmisel. CMYK on mõeldud trükkimiseks ja moodustab värvi tindi kihtidena paberile, lahutades selle asemel valgust. RGB võimaldab luua eredamaid värve kui CMYK, sest tint ei suuda saavutada sama suurt värvivalikut nagu ekraan. **Miks näevad trükitud värvid ekraanil kuvatavatest erinevad välja?** Ekraan kiirgab valgust otse, trükitud leht aga peegeldab ainult sellele langevat valgust. Ka CMYK-tint katab RGB-valgusest väiksema värvivahemiku, mistõttu ei saa mõningaid eredaid ekraanivärve paberil täpselt jäljendada. **Mida tähendab sümbol # kuueteistkümnendkoodis?** See näitab, et järgnevad märgid moodustavad kuueteistkümnendsüsteemis värvikoodi; see tava pärineb varasest HTML-ist ja CSS-ist. Ilma selleta ei tuvasta brauser väärtust värvina. **Miks on mõnes kuueteistkümnendkoodis ainult kolm märki?** Kolmemärgiline kood on kuuemärgilise koodi lühivorm, milles iga paar kordab sama numbrit või tähte. `#0F0` laiendub kujule `#00FF00`. **Kas vormingute vahelised teisendused on täpsed?** RGB teisendamine kuueteistkümnendkujule on täpne, sest tegu on samade arvudega, mis on kirjutatud teises arvusüsteemis. RGB teisendamine CMYK-ks on ligikaudne, sest valgus ja tint toimivad erinevate füüsikaliste protsessidena ning nende värvigammad on erinevad. **Kas see tööriist saab valida värvi otse pildilt või veebilehelt?** Ei. Brauserilaiendus või operatsioonisüsteemi sisseehitatud värvivalija, näiteks macOS-i Digital Color Meter, saab ekraanilt värvi lugeda; saadud väärtuse võib seejärel selle tööriista teisendamiseks sisestada.