Veebivärvid on veebilehtede kujundamisel kasutatavad värvid ning nende värvide kirjeldamise ja loetlemise viisid. Veebivärvid määratakse nii, et brauserid ja muud kasutajaprogrammid saaksid samamoodi aru, millist tooni, küllastust ja heledust kuvada.

RGB ja hexatripletid

Veebilehe elementide värvide valimiseks kasutatakse tavaliselt RGB-mudelit, kus üks värv koosneb kolmest kanalist: punane (Red), roheline (Green) ja sinine (Blue). Iga kanal saab väärtuse vahemikus 0–255 (kokku 256 astet), mis annab kokku kuni 16 777 216 (256³) võimalikku värvisoont — seda nimetatakse ka 24-bitiseks värviks.

RGB-väärtusi saab esitada mitmel viisil:

  • komaeraldatud kujul CSS-is: rgb(255, 0, 0) (erkspunane) või läbipaistvuse vahel rgba(255, 0, 0, 0.5);
  • heksadetsimaalsena ehk hexatriplet: vormingus #RRGGBB, näiteks #FF0000 on punane. Lühivorm #RGB (nt #F00) on ka lubatud;
  • tänapäevases CSS-is on toetatud ka 8-kohaline heks (#RRGGBBAA) ja lühike 4-kohaline vorm (#RGBA) alfa-kanaliga ning hsl()/hsla() (toon, küllastus, heledus) kirjeldused.

Nimetatud värvid ja ajalooline taust

Paljusid levinud värve saab määrata ka nende üldlevinud ingliskeelsete nimetuste järgi (nt "red", "blue", "lightgray"). Mosaici ja NetscapeNavigatori esimesed versioonid kasutasid X11 värvinimetusi oma värviloendite alusena — see tulenes asjaolust, et mõlemad alustasid X Window Systemi rakendustena. Tänapäeval sisaldavad brauserid ja CSS standardsete märksõnade loendi ning need on laialdaselt ühtlustunud.

sRGB ja värviedastus

Igal veebivärvil on oma määratlus, tavaliselt sRGB. sRGB on standardne värviruum, mis määratleb:

  • fosforikomplekti kromaatilisuse (värvused, mida kanalid tähistavad);
  • ülekandefunktsiooni ehk gammakõvera (ligikaudu 2,2);
  • valgepunkti (D65, ehk päevavalguse sarnane valge) ja oletatavad vaatamistingimused.
Need valikud tehti nii, et sRGB vastaks võimalikult hästi paljude tavaliste monitorite käitumisele. Kui kasutaja või brauser ei rakenda eraldi värvihaldust, on sRGB-põhised värvid üldjuhul sellised, nagu need on määratletud, kuid tegelik kuvatud tulemus sõltub siiski ekraani kalibreeritusest ja riistvarast.

Värvihaldus ja trükkimine

Erinevad kuvarid ja printerid ei kuva värve identse täpsusega — seepärast kasutatakse värvihaldust (ICC-profiilid ja brauseri värvihaldus), et saavutada parem värvitrükk vastavalt sihtseadmele. Kui veebipildid on mõeldud trükkimiseks või täpset värviedastust nõudvatesse rakendustesse, tuleb piltide juurde lisada sobiv ICC-profiil või töötleda neid vastava profiiliga (näiteks konverteerida sRGB-st CMYK-i trükifaili loomisel).

Hea tava veebilehtede värvide kasutamisel

  • Kasutage sRGB-d vaikimisi — see on veebis kõige laialdasemalt toetatud ja ühtlustab värviedastust erinevate seadmete vahel.
  • Määrake värvid kas heksakoodiga (#RRGGBB/#RGB) või CSS-funktsioonidega (rgb(), rgba(), hsl(), hsla()) vastavalt vajadusele. Kui vajate läbipaistvust, kasutage rgba() või 8-kohalist heksavormi.
  • Lisage piltidele, mille värvitäpsus on oluline, värviprofiil ja testige neid seadmetel ja trükimasinatel.
  • Kasutage värvivaliku tööriistu ja graafikatarkvara, et luua ja kontrollida värvitoone; need võimaldavad sageli ka automaatset teisendust eri värviruumide vahel.
  • Pöörake tähelepanu ligipääsetavusele: kontrollige teksti ja tausta kontrasti vastavalt WCAG-i juhistele, et värid oleksid loetavad ka nõrgema nägemisega kasutajatele.
  • Testige kujundust eri brauserites ja seadmetel. Mõned vanemad seadmed või ebatavalised seadistused võivad kuvada värve ootamatult.

Kokkuvõtlikult: veebivärvid põhinevad peamiselt RGB-mudelil ning neid väljendatakse heksatripletitena või CSS-i värdefunktsioonidega. sRGB on veebis de facto standard värviedastuse ühtlustamiseks, kuid täpseks värviedastuseks (eriti trükiks) on vajalik värvihaldus ja profiilide kasutamine.