HEX, RGB, HSL ja CMYK sekä tekstin kontrastin tarkistus

Värikoodi on yksi väri kirjoitettuna toisella tavalla. HEX, RGB ja HSL kuvaavat samaa valoa ruudulla, joten ne muuntuvat toisikseen tarkasti, pyöristystä lukuun ottamatta. CMYK kuvaa mustetta paperilla, joten sen muunnos ruudun arvoista on vain arvio. WCAG-kontrastisuhde on erillinen luku, joka vertaa kahden värin vaaleutta ja ratkaisee, onko teksti luettavaa. Liitä väri värimuuntimeen nähdäksesi kaikki muodot kerralla.

VärimuunninTarvitsen värin toisessa muodossaTee se ilmaiseksi

Jos tarvitsemasi väri on valokuvassa, logossa tai kuvakaappauksessa, lue se ensin pikselistä Kuvan väripoimijalla ja liitä sitten HEX-koodi tähän. Näin valitset tarkan värin kuvasta kertoo vaiheet.

HEX ja RGB ovat samat luvut

HEX-koodi koostuu kolmesta heksadesimaalilukuparista. #34D6A0 sisältää punaisen, vihreän ja sinisen arvon. Jokainen pari on luku väliltä 00–FF, eli desimaalilukuna 0–255. Siis 34 on 52, D6 on 214 ja A0 on 160, ja RGB-muoto on rgb(52, 214, 160).

Luvun kirjoittaminen heksadesimaalina muuttaa vain sen ulkoasua. Lyhennetty #abc tarkoittaa #aabbcc, eli jokainen numero on kahdennettu. Kahdeksanmerkkinen koodi lisää loppuun läpinäkyvyysparin, 00 on täysin läpinäkyvä ja FF täysin peittävä, joten #34D6A080 on noin puoliksi läpinäkyvä. RGBA kirjoittaa saman läpinäkyvyyden lukuna väliltä 0–1.

CSS hyväksyy myös värinimet. rebeccapurple on #663399. Muunnin lukee nimet selaimen kautta, joten jokin selaimen tuntema nimi toimii.

HSL kuvaa värin samalla tavalla kuin ihmiset sen kuvaavat

HSL tulee sanoista hue, saturation ja lightness, eli sävy, kylläisyys ja vaaleus. Sävy on kulma värikehällä: punainen on 0 astetta, vihreä 120 ja sininen 240. Kylläisyys kertoo, kuinka kaukana väri on harmaasta, ja vaaleus kuinka kaukana se on mustasta tai valkoisesta.

Sama #34D6A0 on hsl(160, 66%, 52%). Sen sävy on vihreän ja sinisen välissä, kylläisyys on korkea ja vaaleus juuri keskiarvon yläpuolella. HSL on helpoin muoto muokata käsin, koska voit pitää sävyn ja siirtää vain vaaleutta, jolloin saat vaaleamman tai tummemman sävyn.

HSV on lähellä HSL:ää, mutta siinä käytetään arvoa (value) vaaleuden sijaan. Osa väripoimijoista käyttää sitä, joten saatat törmätä siihen muissa työkaluissa. Muunnin näyttää HSV:n HSL:n rinnalla, jotta voit verrata niitä.

CMYK on mustetta varten, joten se on arvio

Näytöt lisäävät valoa: punainen, vihreä ja sininen yhdessä tuottavat valkoisen. Tulostimet vähentävät valoa musteella: syaani, magenta, keltainen ja musta valkoisella paperilla. Kaksi järjestelmää ei täsmää tarkasti, joten CMYK-arvo on aina käännös.

Muunnin käyttää yksinkertaista kaavaa. Musta eli K on yksi miinus punaisen, vihreän ja sinisen suurin arvo asteikolla 0–1. Syaani, magenta ja keltainen lasketaan sen jälkeen, mitä K jättää jäljelle. Kaava ei huomioi tulostimen mustetta, paperia tai väriprofiilia. Tulostettu tulos eroaa siksi, ja hyvin kirkkaat värit voivat jäädä kokonaan CMYK-musteiden ulottumattomiin. Käytä CMYK-arvoa keskustelun aloittamiseen painon kanssa ja pyydä koevedos ennen suurta painoerää.

Kontrasti koskee valoa, ei sävyä

WCAG-kontrastisuhde vertaa kahta väriä niiden suhteellisen luminanssin perusteella. Luminanssi lasketaan punaisen, vihreän ja sinisen arvoista gammakorjauksen jälkeen, ja vihreä painaa eniten, koska ihmisen silmä reagoi siihen voimakkaimmin. Jokainen kanava muunnetaan ensin asteikolta 0–255, ja luminanssi on 0,2126 × punainen + 0,7152 × vihreä + 0,0722 × sininen.

Suhde on vaaleamman luminanssin + 0,05 jaettuna tummemman luminanssin + 0,05 kanssa. Musta valkoisella antaa 21:1, mahdollisen suurimman arvon. Kaksi väriä voi näyttää sävyltään hyvin erilaisilta ja silti saada matalan suhteen, jos niiden vaaleus on sama, ja juuri sitä tarkistus on tehty havaitsemaan. Sama matala kontrasti on syynä siihen, miksi QR-koodit eivät skannaudu.

Raja-arvot

WCAG 2.x määrittelee kaksi tasoa, ja vaadittu suhde riippuu tekstin koosta.

• Taso AA: 4,5:1 tavalliselle tekstille ja 3:1 suurelle tekstille.
• Taso AAA: 7:1 tavalliselle tekstille ja 4,5:1 suurelle tekstille.

Suuri teksti on vähintään 24 pikseliä tai 18,66 pikseliä lihavoituna. Tätä pienempi lasketaan tavalliseksi. Harmaa teksti valkoisella on yleinen virhe. Keskiharmaa kuten #777777 valkoisella on noin 4,48:1. Se ei läpäise AA-tasoa tavalliselle tekstille, mutta läpäisee AA-tason suurille otsikoille.

Muunnin näyttää suhteen kahden desimaalin tarkkuudella, mutta jokainen hyväksyntä tai hylkäys perustuu tarkkaan lukuun. Arvo, joka näkyy muodossa 4,50, voi siis silti epäonnistua, jos se on hieman alle rajan. Tarkistus mittaa vain yhtä asiaa. Se ei huomioi fontin paksuutta, riviväliä tai sitä, miten värisokeat näkevät suunnitelman, joten testaa myös oikea sivu oikeilla kokoillaan.

Sävyt ja varjot

Muuntimen alla oleva palkki näyttää yhdeksän askelta värin ympärillä: neljä kohti valkoista sekoitettua sävyä, värin itsensä ja neljä kohti mustaa sekoitettua varjoa. Napsauttamalla yhtä kopioit sen HEX-koodin. Tästä on apua, kun tarvitset joukon toisiinsa liittyviä värejä, kuten vaalean taustan, kohdistuksen tilan ja tumman tekstivärin, kaikki yhdestä brändiarvosta. Tarkista jokainen valitsemasi pari kontrastiosiosta ennen käyttöä.

Näin teet sen fixmintillä

1. Liitä väri Väri-kenttään HEX-, RGB- tai HSL-muodossa tai CSS-nimenä, kuten rebeccapurple.
2. Lue rivit HEX, RGB, HSL, HSV ja CMYK. Paina tarvitsemasi rivin vieressä Kopioi. CMYK on merkitty likimääräiseksi.
3. Kirjoita taustaväri Tausta-kenttään tai valitse se värinäytteestä ja lue suhde kohdista Valkoisella, Mustalla ja Omalla taustallasi.
4. Tarkista neljä merkkiä kunkin suhteen alla: AA ja AAA, kummatkin tavalliselle ja suurelle tekstille.
5. Kohdassa Sävyt ja varjot napauta väriruutua kopioidaksesi sen.

Pikavastaukset

Onko CMYK-arvo tarkka?

Ei. Se on yksinkertainen laskennallinen muunnos, joka ei huomioi tulostinta, paperia tai väriprofiilia. Pidä sitä lähtökohtana ja pyydä koevedos.

Tekeekö hyväksyttävä kontrastisuhde suunnittelusta saavutettavan?

Se tarkoittaa, että tekstin värit täyttävät yhden mitattavan raja-arvon. Saavutettavuus riippuu myös koosta, riviväleistä, liikkeestä ja sivun rakenteesta, joten suhde on suuntaa antava ohje, ei kattava arvio.

Missä muodossa minun kannattaa tallentaa väri tyylitiedostoon?

Siinä muodossa, jota luet ja muokkaat helpoiten. HEX on tiivis ja yleinen. HSL on helpompi säätää käsin, koska muutat vaaleutta ilman, että sävy muuttuu.