Veebivärvid: RGB, heksatripletid, sRGB ja värvihaldus
Õpi veebivärve: RGB, heksatripletid, sRGB ja värvihaldus — praktilised näpunäited täpseks värivalikuks, koodideks ja usaldusväärseks kuvamiseks veebis.
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.
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.
Hex-triplet
Heksa-triplet on kuuekohaline kolmbaideline number, mida kasutatakse HTML-is, CSS-is, SVG-s ja muudes arvutiprogrammides värvide tähistamiseks. Baidid tähistavad värvi punast, rohelist ja sinist osa. Üks bait esindab arvu vahemikus 00 kuni FF ehk 0 kuni 255 kümnendmärgis. See tähistab iga värvikomponendi väikseimat (0) kuni suurimat (255) intensiivsust. Heksa-triplet moodustatakse kolme baidi ühendamisel heksadekaalarvudes järgmises järjekorras:
1. bait: punane väärtus (värvitüüp punane)
Byte 2: roheline väärtus (värvitüüp roheline)
Byte 3: sinine väärtus (värvitüüp sinine)
Võtame näiteks värvi, kus punase/rohelise/sinise väärtused on kümnendarvud: punane=36, roheline=104, sinine=160 (hallikas-sinine värv). Kümnendarvud 36, 104 ja 160 on sarnased vastavalt numbritele 24, 68 ja A0. Heksa-triplaat saadakse 6 kuuekohalise numbri kombineerimisel, antud näites 2468A0.
HTML veebivärvid
1997. aastal väljatöötatud värvitoonide arv oli algselt 16. Hiljem lisati oranž, nii et neid oli kokku 17. Need algsed 16 olid osa millestki, mida nimetatakse "Windows VGA malliks", mis tähendab, et need on värvid, mida saab kasutada sellisteks tegevusteks nagu esiletõstmine. []
| Värv | Hexadecimal | Värv | Hexadecimal | Värv | Hexadecimal | Värv | Hexadecimal |
| #00FFFF | #808080 | merevägi | #000080 | hõbe | #C0C0C0C0 | ||
| must | #000000 | #008000 | #808000 | teal | #008080 | ||
| #0000FF | #00FF00 | lilla | #800080 | valge | #FFFFFFFF | ||
| #FF00FF | maroon | #800000 | #FF0000 | kollane | #FFFF00 |
HTML-värv lisatakse hiljem
| Värv | Hexadecimal |
| #FFA500 |
X11 värvid (sõnastatud 1987. aastal)
Neid nimetatakse "X11 veebivärvideks", kuna World Wide Web leiutati 1991. aastal.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Valitud veebivärvide graafik
See diagramm näitab valitud HTML- ja X11-värve ning valitud mitteametlikke konsensuslikke veebivärve, mille veebidisainerid on välja töötanud alates 2002. aastast. Mitteametlikke värve kasutava koodi sisestamisel tuleb värvi nime kirjutamise asemel märkida värvi heksakood.
| · vaadata · räägi · redigeeri Veebivärvid (nimekiri) | |||||||||||||||
| Valge | hõbe | must | merevägi | taevasinine | türkiissinine | asuur | teal | ||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| kollane | merevaigukollane | pruun | oranž-punane | maroon | roos | roosa | lilla | ||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| elevandiluu | violetne | virsik | aprikoos | ooker | ploomi | ||||||||||
|
|
|
|
|
|
|
| |||||||||
Küsimused ja vastused
K: Millised on veebi värvid?
V: Veebivärvid on veebilehtede kujundamisel kasutatavad värvid ning nende värvide kirjeldamise ja loetlemise viisid.
K: Kui palju erinevaid värve saab RGB-triipude abil luua?
V: RGB-tripletidega saab luua 16 777 216 erinevat värvi.
K: Kas mõnele neist värvidest on olemas üldkasutatavad ingliskeelsed nimed?
V: Jah, paljude tavaliste värvide puhul saab valida ka nende tavalisi ingliskeelseid nimesid.
K: Millist tarkvara kasutatakse tavaliselt värviväärtuste loomiseks?
V: Sageli kasutatakse värviväärtuste loomiseks värvitööriista või muud graafikatarkvara.
K: Milline oli algsete Mosaic'i ja Netscape Navigatori värviloendite alus?
V: Mosaic'i ja Netscape Navigator'i esimestes versioonides kasutati värviloendite alusena X11 värvinimesid, sest mõlemad alustasid X Window System'i rakendustena.
K: Millega on sRGB seotud, kui tegemist on veebivärvidega?
V: Igal veebivärvil on oma määratlus, sRGB, mis on seotud ühe fosforikomplekti kromaatilisusega, antud ülekandekõveraga, adaptiivse valgepunktiga ja vaatamistingimustega.
K: Kuidas näitavad kasutajaagendid neid värve täpselt?
V: Paremad kasutajaagendid kasutavad värvihaldust, et luua parem värvitruudus, mis on oluline veebist trükkimiseks mõeldud rakenduste puhul.
Otsige