3.1 Värit

Värien määrittämiseen voidaan käyttää ns. nimettyjä värejä:

silver C0C0C0	gray 808080	maroon 800000	green 008000	navy 000080	purple 800080	olive 808000	teal 008080
white FFFFFF	black 000000	red FF0000	lime 00FF00	blue 0000FF	magenta FF00FF	yellow FFFF00	cyan 00FFFF

Nimien ulkoa muistaminen on kuitenkin hankalaa eikä noita nimettyjä värejä ole kovin paljoa. Siksi lähes kaikki HTML-ohjelmoijat käyttävät menetelmää, missä kolmea perusväriä - punainen, vihreä ja sininen - sekoitetaan tietyssä suhteessa halutun lopputuloksen saavuttamiseksi (englanniksi Red Green Blue => RGB, aina tässä järjestyksessä).

Ajatellaan, että kun perusvärejä ei ole lainkaan, niin tuloksena on musta. Ja kun kaikkia kolmea on paljon, saadaan valkoinen.

Jos haluan vihreän värin, otan punaista perusväriä 0 yksikköä, vihreää 100 ja sinistä 0 (R=0, G=100, B=0 => 0,100,0). Ja jos haluan sinistä niin vastaavasti 0,0,100. Tummansininen olisi sitten 0,0,40, eli otan sinistä vähemmän jolloin väri tummenee (lähenee mustaa).

Kirkkaankeltaisen värin saan sekoittamalla paljon punaista ja vihreää: 100,100,0. Lila taas sekoittamalla punaista ja sinistä: 100,0,100 tai tumma lila 70,0,70.

Näillä perusväreillä ja niiden sekoituksilla voidaan määrittää ihan riittävä määrä värejä, yhteensä yli 16 miljoonaa.

HTML:ssä kunkin perusvärin määrää ei kerrota luvulla 0-100, vaan tässä käytetään apuna heksadesimaalilukuja, esim. #4400FF:

   R   G   B
#  44  00  FF

• Risuaita kertoo, että kyseessä on heksadesimaaliluku (ks. alla)
• kaksi ensimmäistä numeroa kertovat punaisen värin määrään - mitä suurempi luku, sitä enemmän punaista (pienin arvo on 00, suurin taas FF, ks. alla)
• seuraavat kaksi taas vihreän ja loput kaksi sinisen värin määrän.

Täysin punainen väri: #FF0000
Täysin vihreä väri: #00FF00
Tummanvihreä: #004400
Täysin sininen väri: #0000FF
Musta: #000000
Valkoinen: #FFFFFF
Keltainen (punaisen ja vihreän yhdistelmä) #FFFF00
Oranssi (myöskin punaisen ja vihreän yhdistelmä): #FF9900 eli vähemmän vihreää
Lila: #AA0ABC (aika paljon punaista, aavistus vihreää ja reippaasti sinistä, enemmän kuin punaista)

Kuten huomaat, on aika yleistä käyttää lukupareja eli toistaa sama numero kaksi kertaa kunkin värielementin kohdalla. Tällä koetetaan varmistaa, että väri näyttää samalta myös sellaisen tietokoneen näytöllä, jonka värien toisto on hyvin rajallinen (vanhat tietokoneet). Tästä syystä voit törmätä netissä joskus termiin turvalliset web-värit (websafe colors).

Tulet samantien hyvin toimeen värikoodien kanssa jos käytät apuna värikarttaa. Netistä näitä löytyy useita, muutamia suomeksikin:
http://www.mcmweb.com/help/help.nsf/0/c22567600030a6c3c2256693002873e6/$FILE/HexaCol.html
http://www.saunalahti.fi/wpoet/fin/colornames.htm

Yleensä väreistä:
http://www.saunalahti.fi/wpoet/fin/color.htm

ja tässä muutamia värikarttoja englanniksi:
http://www.webreference.com/html/reference/color/

Netistä löytyy myös ohjelmia, jonka avulla voit valita värin vapaasti ja ohjelma kertoo valitsemasi värin heksakoodin:
http://www.webreference.com/html/tools/colorizer/

Näitä koodeja ei siis todellakaan ole välttämätöntä osata ulkoa tai oikeastaan kovin paljoa edes ymmärtää. Sen kun etsit haluamasi värin ja kopioit tuon numerosarjan omaan koodiisi.

---

Harjoitus

Testaa miten tämä värihomma toimii esimerkiksi sivu_2.html-tiedostoon tai mihin tahansa HTML-koodiin. Tätä testausta ei tarvitse palauttaa, eli tarkoitus on vain käytännössä tutustua värien toimintaan ja saada aikaiseksi sen väristä tekstiä kuin itse haluaa.

Ja jos et keksi mitään värejä niin kokeile saada aikaiseksi vaikkapa seuraavat värit (älä kopioi koodista vaan kokeile itse päästä mahdollisimman lähelle kutakin väriä - muuten et opi valitsemaan värejä itsenäisesti):

Jäänsininen

Kiva punaisenruskea

Hillitty vihreä

Toinen ruskea

Raju violetti

---