Hex-värimuunnin – HEX, RGB, HSL ja kontrastisuhde
Hex-värimuunnin muuntaa värikoodin HEX-, RGB- ja HSL-muotoon ja laskee kontrastisuhteen WCAG-ohjeen kaavalla. Syötä väri mihin tahansa kenttään, niin muut päivittyvät heti.
Työkalu hyväksyy myös lyhyen muodon #abc. Kontrastikortti kertoo, läpäiseekö valkoinen tai musta teksti värin päällä rajat 4,5:1 (AA), 3:1 (AA iso teksti) ja 7:1 (AAA), ja voit verrata väriä mihin tahansa taustaan. Paletti näyttää värin vaaleammat ja tummemmat sävyt sekä vastavärin, vierekkäiset värit ja kolmisoinnun. CMYK-arvo on naiivi kaava ilman väriprofiilia eikä sovi painotyön pohjaksi.
Miten HEX-koodi muunnetaan RGB:ksi?
HEX-koodi jaetaan kolmeen kahden merkin pariin, ja jokainen pari muunnetaan kuusitoistajärjestelmästä kymmenjärjestelmään. #FF5733 on siis FF = 255, 57 = 87 ja 33 = 51 eli rgb(255, 87, 51), HSL-muodossa hsl(11, 100%, 60%). Valkoisen tekstin kontrasti tällä värillä on 3,15:1, joten se kelpaa isolle tekstille mutta ei leipätekstille.
Ladataan työkalua...
Etkö tiedä mihin ryhtyä seuraavaksi? Selaa kaikki työkalut
Hae työkalua →Hex-värimuunnin muuntaa värikoodit ja kertoo, erottuuko teksti värin päällä saavutettavuusohjeen mukaan.
Syötä väri HEX-, RGB- tai HSL-muodossa tai valitse se värinvalitsimella.
- HEX ↔ RGB ↔ HSL, lisäksi naiivi CMYK.
- Kontrastisuhde valkoiselle ja mustalle tekstille sekä valitsemallesi taustalle.
- Paletti: seitsemän sävyä vaaleasta tummaan, vastaväri, vierekkäiset (±30°) ja kolmisointu (±120°).
- Jokaisen koodin voi kopioida, ja uuden värin voi arpoa.
WCAG 2.2 edellyttää tekstille vähintään 4,5:1 (taso AA).
- Iso teksti (vähintään 18 pt tai 14 pt lihavoituna) tarvitsee 3:1, samoin painikkeiden ja kuvakkeiden reunat.
- AAA-taso vaatii 7:1 (isolle tekstille 4,5:1).
- Suhde näytetään alaspäin pyöristettynä: #777777 valkoisella on 4,47:1 eikä läpäise AA-tasoa, #767676 on 4,54:1 ja läpäisee.
Näytön värit ja painovärit eivät vastaa toisiaan suoraan.
- CMYK on tässä yksinkertainen kaava ilman ICC-profiilia. Painotalo tarvitsee oikean profiilin mukaan tehdyn muunnoksen.
- Kontrasti ei kerro kaikkea luettavuudesta: myös kirjasinkoko ja -paino vaikuttavat.
- Lähteet: W3C, WCAG 2.2 (1.4.3, 1.4.6, 1.4.11, määritelmät contrast ratio ja relative luminance); W3C, CSS Color Module Level 4.