Värinvalitsimen työkalu - Muunna RGB, Hex, CMYK ja HSV-värikoodit

Mikä on värinvalitsin?

Värinvalitsin on työkalu, jolla voi valita värin ja lukea sen arvon eri värimuodoissa. Tämä värinvalitsin näyttää värin samanaikaisesti RGB-muodossa (punainen, vihreä, sininen), heksadesimaalimuodossa, CMYK-muodossa (syaani, magenta, keltainen, musta) ja HSV-muodossa (värisävy, kylläisyys, kirkkaus). Kun jotakin muotoa muutetaan, muut päivittyvät heti.

Värinvalitsimen käyttö

Värin voi valita kolmella tavalla.

Valitse värisävy ja kylläisyys napsauttamalla mitä tahansa kohtaa värikentässä. Vaakasuora sijainti määrittää värisävyn eli väriperheen, kuten punaisen tai sinisen. Pystysuora sijainti määrittää kylläisyyden eli sen, kuinka voimakkaalta tai haalistuneelta väri näyttää. Värikentän alapuolella oleva liukusäädin säätää kirkkautta mustasta vasemmalla täyteen kirkkauteen oikealla.

Myös tarkkojen arvojen kirjoittaminen toimii. Heksadesimaalikenttä hyväksyy esimerkiksi koodin #2ECC71 sekä ilman merkkiä # että sen kanssa. Kuhunkin RGB-kenttään voi syöttää kokonaisluvun väliltä 0–255. Kuhunkin CMYK-kenttään voi syöttää kokonaisluvun väliltä 0–100. Sallitun alueen ylittävä arvo rajataan enimmäisarvoon.

Jokaisen värimuodon vieressä on kopiointipainike. Sen napsauttaminen kopioi arvon leikepöydälle ja näyttää lyhyen viestin ”Kopioitu!”.

Värimallien selitykset

RGB

RGB kuvaa värin punaisen, vihreän ja sinisen valon sekoituksena. Näitä samoja kolmea väriä näyttö käyttää jokaisen pikselin muodostamiseen. Kukin kanava voi saada arvon 0–255. RGB(255, 0, 0) on puhdas punainen, ja RGB(0, 0, 0) on musta. Selaimet, sovellukset ja video-ohjelmistot käyttävät kaikki RGB:tä, koska se vastaa näyttöjen toimintaa.

Heksadesimaalimuoto

Heksadesimaalikoodi esittää RGB-värin kantaluvulla 16 kantaluvun 10 sijaan. #2ECC71 sisältää kolme merkkiparia: 2E punaiselle, CC vihreälle ja 71 siniselle. Kunkin parin arvo on välillä 00–FF. Heksadesimaalikoodit ovat yleisiä verkkosuunnittelussa, koska CSS hyväksyy ne suoraan ja ne ovat lyhyempiä kirjoittaa kuin rgb(). Myös kolmen merkin lyhyt muoto on mahdollinen: #0F0 tarkoittaa samaa kuin #00FF00.

CMYK

CMYK-mallia käytetään painamisessa. Painokone muodostaa värin kerrostamalla syaania, magentaa, keltaista ja mustaa mustetta valkoiselle paperille, joten väri syntyy valoa vähentämällä eikä lisäämällä. Kukin kanava ilmoitetaan prosenttina välillä 0–100. CMYK(0, 0, 0, 0) tarkoittaa, ettei mustetta ole lainkaan, jolloin valkoinen paperi näkyy. CMYK ei pysty tuottamaan kaikkia värejä, joita näyttö voi näyttää. Jotkin kirkkaat näytön värit, erityisesti tietyt sinisen ja vihreän sävyt, näyttävät painettuina himmeämmiltä.

HSV

HSV kuvaa värisävyn, kylläisyyden ja kirkkauden erikseen. Värisävy on väriperhe, joka ilmoitetaan asteina välillä 0°–360°. Arvo 0° tarkoittaa punaista, 120° vihreää ja 240° sinistä. Kylläisyys ilmaisee värin voimakkuuden välillä 0 % (harmaa) – 100 % (täysin kylläinen). Kirkkaus ilmaisee värin valoisuuden välillä 0 % (musta) – 100 % (täysi kirkkaus). HSV vastaa melko hyvin tapaa, jolla ihmiset luonnostaan kuvaavat värejä. Siksi tämän työkalun värikenttä ja kirkkauden liukusäädin perustuvat siihen.

RGB:n muuntaminen heksadesimaalimuotoon

Kukin RGB-kanava, jonka arvo on välillä 0–255, muunnetaan kaksinumeroiseksi heksadesimaaliluvuksi. Sen jälkeen kolme paria yhdistetään siten, että niiden eteen lisätään #.

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

RGB:n muuntaminen CMYK-muotoon

Ensin kukin RGB-kanava skaalataan murtoluvuksi väliltä 0–1. Mustan (K) arvo määritetään suurimman kanava-arvon perusteella. Syaani, magenta ja keltainen lasketaan sen jälkeen jäljelle jäävistä kanavista ja K-arvosta.

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

Kun K on 1 eli väri on puhdas musta, C-, M- ja Y-arvoiksi asetetaan 0 jakamisen nollalla välttämiseksi.

RGB:n muuntaminen HSV-muotoon

RGB skaalataan ensin murtoluvuiksi väliltä 0–1. Olkoon $C_{max}$ kolmesta arvosta suurin, $C_{min}$ pienin ja $\Delta$ niiden välinen erotus.

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

Värisävy määräytyy sen mukaan, mikä kanava on suurin:

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}$$ ## Laskuesimerkki Aloitetaan RGB-arvosta (46, 204, 113), joka on vihreän sävy. **Heksadesimaalimuoto:** 46 on heksadesimaalimuodossa `2E`, 204 on `CC` ja 113 on `71`, joten tulokseksi saadaan `#2ECC71`. **CMYK:** Skaalattuina R′ = 0,180, G′ = 0,800 ja B′ = 0,443. Suurin arvo on G′, joten K = 1 − 0,800 = 0,20, mikä tarkoittaa 20 % mustaa. Tällöin 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 %. Tulokseksi saadaan CMYK(77, 0, 45, 20). **HSV:** $C_{max}$ = 0,800 (vihreä), $C_{min}$ = 0,180, joten Δ = 0,620. Kirkkaus = 80 %. Kylläisyys = 0,620 / 0,800 × 100 ≈ 77 %. Koska vihreä on suurin, H = 60 × ((B′ − R′) / Δ + 2) = 60 × ((0,443 − 0,180) / 0,620 + 2) ≈ 145°. Tulokseksi saadaan HSV(145°, 77 %, 80 %). ## Värivalintojen saavutettavuus Noin 1 (2,5 cm) 12 miehellä ja noin 1 (2,5 cm) 200 naisella on jonkinasteinen värinäön häiriö, tavallisimmin heikentynyt kyky erottaa punaista vihreästä. Suunnittelu, jossa merkitys välitetään vain värillä, kuten punainen virheilmoitus ilman kuvaketta tai tekstiä, ei toimi näille käyttäjille. Tekstin, kuvakkeen tai kuvion lisääminen värin rinnalle ratkaisee ongelman. Myös tekstin ja taustan välillä on oltava riittävä kontrasti. Verkkosisällön saavutettavuusohjeet (WCAG) suosittelevat tavalliselle tekstille vähintään kontrastisuhdetta 4,5:1 ja suurelle tekstille 3:1. Tämän mittaamiseen tarvitaan erillinen kontrastintarkistin, koska tämä työkalu ei laske kontrastisuhteita. ## Usein kysyttyä **Mitä eroa on RGB:llä ja CMYK:llä?** RGB on tarkoitettu näytöille, ja se muodostaa värit lisäämällä punaista, vihreää ja sinistä valoa. CMYK on tarkoitettu painamiseen, ja se muodostaa värit kerrostamalla mustetta paperille, mikä vähentää valoa. RGB voi tuottaa kirkkaampia värejä kuin CMYK, koska muste ei pysty vastaamaan näytön lähettämän valon värialuetta. **Miksi painetut värit näyttävät erilaisilta kuin näytöllä?** Näyttö lähettää valoa suoraan, mutta painettu sivu heijastaa vain siihen osuvaa valoa. CMYK-musteen värialue on myös pienempi kuin RGB-valon, joten joitakin näytön kirkkaita värejä ei voi vastata paperilla täsmälleen. **Mitä #-symboli tarkoittaa heksadesimaalikoodissa?** Se merkitsee seuraavat merkit heksadesimaaliseksi värikoodiksi. Käytäntö on peräisin varhaisesta HTML:stä ja CSS:stä. Ilman sitä selain ei tunnista arvoa väriksi. **Miksi joissakin heksadesimaalikoodeissa on vain kolme merkkiä?** Kolmen merkin koodi on lyhyt muoto kuuden merkin koodista, jossa kukin pari toistaa saman numeron. `#0F0` laajenee muotoon `#00FF00`. **Ovatko muunnokset muodosta toiseen tarkkoja?** RGB:n muunnos heksadesimaalimuotoon on tarkka, koska kyse on samoista luvuista eri kantaluvussa kirjoitettuina. RGB:n muunnos CMYK-muotoon on likimääräinen, koska siinä muunnetaan valon ja musteen välillä. Ne ovat erilaisia fysikaalisia prosesseja, joilla on erilaiset värialueet. **Voiko tällä työkalulla poimia värin suoraan kuvasta tai verkkosivulta?** Ei. Selainlaajennus tai käyttöjärjestelmän oma värinvalitsin, kuten macOS:n Digital Color Meter, voi lukea värin näytöltä. Tämän jälkeen saadun arvon voi kirjoittaa tähän työkaluun muunnettavaksi.