Verkkovärit ovat verkkosivujen suunnittelussa käytettäviä värejä sekä tapoja kuvata ja luetella näitä värejä.

Verkkosivujen osien värien valintaan on useita tapoja. Värit voidaan ilmoittaa RGB-tripletina (kolmen numeron joukko) heksadesimaalimuodossa (heksatripletti). RGB-tripletti voi muodostaa 16 777 216 erilaista väriä. Monet yleiset värit voidaan valita myös niiden yleisten englanninkielisten nimien perusteella. Usein väriarvojen luomiseen käytetään värityökalua tai muuta grafiikkaohjelmaa.

Mosaicin ja Netscape Navigatorin ensimmäiset versiot käyttivät X11-värinimiä väriluetteloidensa pohjana. Tämä johtui siitä, että molemmat alkoivat X Window System -sovelluksina.

Jokaisella verkkovärillä on oma määritelmänsä, sRGB. Tämä liittyy yksittäisen fosforisarjan kromaattisuuteen, tiettyyn siirtokäyrään, adaptiiviseen valkoiseen pisteeseen ja katseluolosuhteisiin. Nämä on valittu siten, että ne vastaavat monia todellisia näyttöjä ja katseluolosuhteita. Jopa ilman värinhallintaa luodut värit ovat melko lähellä annettuja arvoja. Käyttäjäagentit voivat kuitenkin olla erilaisia sen suhteen, miten tarkasti ne näyttävät värit. Paremmat käyttäjäagentit käyttävät värinhallintaa luodakseen paremman väritarkkuuden. Tämä on tärkeää Web-tulostussovelluksille.

Miten värit ilmoitetaan käytännössä

Yleisimmät tavat määritellä väri CSS:ssä ja HTMLissä ovat:

  • Heksadesimaali – muoto #RRGGBB. Esimerkiksi #ff0000 on kirkas punainen, #00ff00 vihreä ja #0000ff sininen. Lyhennetty muoto #RGB tarkoittaa samaa kuin duplikoimalla kukin merkki (esim. #f00 = #ff0000).
  • RGB-funktio – muoto rgb(255, 0, 0) käyttää kolmea 0–255 arvoa. Myös prosenttimuoto on mahdollinen, esim. rgb(100%, 0%, 0%).
  • RGBA – sama kuin RGB, mutta mukana on läpinäkyvyys (alpha) arvo 0–1, esim. rgba(255,0,0,0.5).
  • HSL/HSLA – sävy (hue), kylläisyys (saturation) ja valoisuus (lightness), esim. hsl(120, 100%, 50%). HSLA lisää alpha-kanavan.
  • Värinimet – tietyt englanninkieliset nimet kuten red, blue, lightgray yms. Nämä nimet ovat osa CSS-spesifikaatiota ja osa niistä periytyy X11-listasta.

RGB-tripletit ja väritilan laajuus

RGB-tripletillä tarkoitetaan kolmea komponenttia (R, G, B), jotka määrittävät kunkin kanavan kirkkauden. Kun kukin komponentti voi olla 0–255, yhdistelmiä on 256^3 eli 16 777 216 erilaista väriä. Tämä kuvaa väriavaruutta numeerisesti, mutta todellinen näkyvä väri riippuu aina siitä, mitä väriprofiilia ja laitteiston ominaisuuksia käyttöympäristö käyttää.

sRGB ja värinhallinta

sRGB on webin ja monien näyttöjen oletusvärirakenne (väriprofiili). Se määrittelee muun muassa:

  • siirtokäyrän (gamma) eli miten digitaaliset arvot muunnetaan valon voimakkuudeksi,
  • valkoispisteen (yleensä D65),
  • perusväriä vastaavat kromaattiset pisteet (punainen, vihreä, sininen).

Näyttöjen, tulostimien ja kuvien välisen värin toistettavuuden kannalta on tärkeää, että käytetään samaa väriprofiilia tai että laitteet tukevat värinhallintaa. Ilman värinhallintaa selain näyttää RGB-arvon usein suoraan, jolloin lopputulos on kuitenkin vain likimääräinen. Modernit selainohjelmat voivat hyödyntää ICC-profiileja ja muuntaa värejä laitekohtaisesti parempaan vastaavuuteen. Lisäksi on olemassa laajempia väriavaruuksia, kuten Display P3 ja Adobe RGB, joita käytetään esimerkiksi valokuvauksessa ja laajavärisyisissä näytöissä.

Historia lyhyesti

Mosaicin ja Netscape Navigatorin käyttämät X11-värinimet periytyivät siitä, että molemmat olivat X Window System -sovelluksia. Tästä syystä monien varhaisten selainten väriluettelot perustuivat X11-nimikkeistöön.

Vinkkejä käytännön suunnitteluun

  • Käytä sRGB-perustaisia värejä verkkosisällössä, ellei sinulla ole erityistä syytä hyödyntää laajempaa väriavaruutta.
  • Testaa värit eri laitteilla (puhelin, tabletti, tietokone) ja eri selaimilla, sillä käyttäjäagentit voivat näyttää värit eri tavoin.
  • Hyödynnä värityökaluja, näytönpipettejä ja graafisia ohjelmia, jotka näyttävät väriarvot sekä eri muodoissa (hex, rgb, hsl) että väritilassa (sRGB, Display P3 jne.).
  • Pidä saavutettavuus mielessä: varmista riittävä kontrasti tekstin ja taustan välillä WCAG-ohjeiden mukaisesti.
  • Jos lähetät kuvia webiin, varmista, että niiden sisäinen ICC-profiili on oikein (yleensä sRGB) tai että kuvat on muunnettu sRGB:hen, jotta värit toistuvat suunnitellusti useimmilla laitteilla.