HTML-värit ja verkkovärit – määritelmä, RGB, heksadesimaali ja sRGB
HTML-värit ja verkkovärit, selkeä opas RGB-triplettiin, heksadesimaaleihin ja sRGB-määrittelyihin, värinhallinta, käytännön esimerkit ja työkaluvinkit
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.
Kuvagalleria
1 Kuva
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.
Heksatripletti
Heksatripletti on kuusinumeroinen, kolmen tavun numero, jota käytetään HTML-, CSS- ja SVG-ohjelmissa sekä muissa tietokoneohjelmissa värien esittämiseen. Tavut edustavat värin punaista, vihreää ja sinistä osaa. Yksi tavu edustaa numeroa alueella 00-FF tai 0-255 desimaalilukuna. Tämä edustaa kunkin värikomponentin pienimmästä (0) suurimpaan (255) intensiteettiä. Heksatripletti muodostetaan yhdistämällä kolme tavua heksadesimaalimuodossa seuraavassa järjestyksessä:
Tavu 1: punainen arvo (värityyppi punainen)
Tavu 2: vihreä arvo (värityyppi vihreä)
Tavu 3: sininen arvo (värityyppi sininen)
Tarkastellaan esimerkiksi väriä, jossa punaisen/vihreän/sinisen arvot ovat desimaalilukuja: punainen=36, vihreä=104, sininen=160 (harmaansininen väri). Desimaaliluvut 36, 104 ja 160 vastaavat numeroita 24, 68 ja A0. Heksadripletti saadaan yhdistämällä kuusi heksadesimaalilukua yhteen, tässä esimerkissä 2468A0.
HTML-verkkovärit
Vuonna 1997 kehitettyjä värejä oli alun perin 16. Oranssi lisättiin myöhemmin, jolloin värejä oli yhteensä 17. Alkuperäiset 16 olivat osa niin sanottua "Windows VGA -mallia", mikä tarkoittaa, että niitä värejä voidaan käyttää korostuksen kaltaisiin toimintoihin.
| Väri | Heksadesimaaliluku | Väri | Heksadesimaaliluku | Väri | Heksadesimaaliluku | Väri | Heksadesimaaliluku |
| aqua | #00FFFF | #808080 | #000080 | hopea | #C0C0C0 | ||
| musta | #000000 | #008000 | #808000 | teal | #008080 | ||
| #0000FF | #00FF00 | violetti | #800080 | #FFFFFF | |||
| #FF00FF | #800000 | #FF0000 | keltainen | #FFFF00 |
Luettelo HTML-värin nimistä
Alla oleva taulukko sisältää kaikki 140 HTML-väriä. Kaikki nykyaikaiset selaimet tukevat niitä.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
X11-värit (muotoiltu vuonna 1987)
Näitä kutsutaan "X11-verkkoväreiksi", koska World Wide Web keksittiin vuonna 1991.
|
|
| |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
Valittujen verkkovärien kaavio
Tässä taulukossa esitetään valitut HTML- ja X11-värit sekä valitut epäviralliset konsensusvärit, jotka verkkosuunnittelijat ovat kehittäneet vuodesta 2002 lähtien. Epävirallisia värejä käyttävää koodia syötettäessä on ilmoitettava värin heksakoodi sen sijaan, että kirjoitettaisiin värin nimi.
Verkkovärit (luettelo) | |||||||||||||||||||
| Vaaleanpunainen | Ruskea | Misty Rose | Lohi | Oranssi-punainen | Suklaa | Kulta | Norsunluu | Keltainen | Nurmikon vihreä | ||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ||
| Lime | Kevään vihreä | Turkoosi | Azure | Teal | Luumu | Violetti | |||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| ||
| Tan | Beige | liuskekiven harmaa | Tumma liuskekivi harmaa | Hopea | Musta | ||||||||||||||
|
|
|
|
|
|
|
|
|
|
|
|
| ||||||||
Kysymyksiä ja vastauksia
K: Mitä ovat verkkovärit?
V: Verkkovärit ovat verkkosivujen suunnittelussa käytettäviä värejä sekä tapoja kuvata ja luetella näitä värejä.
K: Kuinka monta erilaista väriä voidaan luoda RGB-kolmioilla?
V: RGB-kolmioilla voidaan luoda 16 777 216 erilaista väriä.
K: Onko joillekin näistä väreistä olemassa yleisiä englanninkielisiä nimiä?
V: Kyllä, monet yleiset värit voidaan valita myös niiden yleisten englanninkielisten nimien perusteella.
K: Mitä ohjelmistoa käytetään yleensä väriarvojen luomiseen?
V: Väriarvojen luomiseen käytetään usein värityökalua tai muuta grafiikkaohjelmistoa.
K: Mihin alkuperäiset Mosaic- ja Netscape Navigator -väriluettelot perustuivat?
V: Mosaicin ja Netscape Navigatorin ensimmäiset versiot käyttivät X11-värinimiä väriluetteloidensa pohjana, koska molemmat alkoivat X Window System -sovelluksina.
K: Mihin sRGB liittyy, kun on kyse web-väreistä?
V: Jokaisella verkkovärillä on oma määritelmänsä, sRGB, joka liittyy yhden fosforisarjan kromaattisuuteen, tiettyyn siirtokäyrään, mukautuvaan valkoiseen pisteeseen ja katseluolosuhteisiin.
K: Miten käyttäjäagentit näyttävät nämä värit tarkasti?
V: Paremmat käyttäjäagentit käyttävät värinhallintaa parempaan väritarkkuuteen, mikä on tärkeää Web-tulostussovelluksissa.
Aiheeseen liittyvät artikkelit
Tekijä
AlegsaOnline.com HTML-värit ja verkkovärit – määritelmä, RGB, heksadesimaali ja sRGB Leandro Alegsa
URL: https://fi.alegsaonline.com/art/107055
Lähteet
- purei.com : "Web design details"
- w3.org : HTML 4.01 Specification section 6.5 "Colors"