CSS: Väri 2008-01-12 17:47

Värejä voidaan muutetaan edustalta color-ominaisuudella. Värien määrittely kannattaa tehdä eksplisiittiseksi, eikä lueteta selaimen oletusväreihin.

Colors and backgrounds

Värit ja taustat W3C:n CSS-spesifikaatiossa.

color (heksadesimaali | rgb-arvo | värinimi | transparent)

color-ominaisuudella muutetaan edustavärejä (teksti, luettelomerkit).

Muutetaan koko sivun fontin väri sinivihreäksi antamalla väri heksadesimaaliarvona.

body {
	color: #007777;
}

Osa väreistä voidaan ilmoittaa väriniminä, kuten black ja white. Kannattaa kuitenkin välttää värinimien käyttämistä arvoina. Ne eivät vielä välttämättä toimi kaikilla selaimilla.

p {
	color: black;
}

Määritetään a-elementin (linkin) pseudoluokkien ja -elementtien väritys rgb-arvoina.

a:link {
	color: rgb(0,0,0);
}
a:visited {
	color: rgb(0,0,0);
}
a:hover {
	color: rgb(97,97,97);
}
a:active {
	color: rgb(0,0,0);
}

Yksinkertaisempaa on yleensä määrittää a-valitsimelle kaikki ne pseudoluokat- ja elementit jotka näkyvät samanlaisina, ja ne erikseen jotka muuttuvat. Edellinen esimerkki yksinkertaisemmin:

a {
	color: rgb(0,0,0);
}
a:hover {
	color: rgb(97,97,97);
}

Jos muutat linkkien ulkoasua, muista että linkkien on hyvä erottua jollakin tavalla muusta tekstistä, varsinkin leipätekstin keskellä. Nyt tehty musta voisi toimia lähinnä navigointilistassa. Värit täytyy myös antaa oikeassa järjestyksessä. Muistisääntönä toimii alkukirjaimista muodostettu LoVe/HAte eli järjestyksessä :link (normaali linkki), :visited (linkki jossa käyty), :hover (hiiri linkin päällä), :active (hiiren nappi pohjassa).

Väriarvot

Värien arvot voidaan antaa kolmella tavalla:

• heksadesimaaliarvo: esim. #000000, #ffffff. Luvut järjestyvät pareihin, jolloin kaksi ensimmäistä numeroa antavat arvon punaiselle kanavalle, kaksi seuraavaa vihreälle, kaksi viimeistä siniselle. Heksadesimaali l. kuusitoistajärjestelmässä lukuarvot ovat järjestyksessä 0-9 ja a-f (kymmenjärjestelmässä vastaavat arvot olisivat 0-15). Mitä suurempi arvo, sitä kirkkaampi sävy.
• rgb-arvo: esim. rgb(0,0,0), rgb(255,255,255). Väriarvot järjestyksessä punaiselle, vihreälle ja siniselle. Arvot väliltä 0-255.
• värinimi: esim. black, white. Arvolla transparent alue määritetään läpinäkyväksi.

RGB to Hexadecimal Chart

RGB- ja heksadesimaaliarvojen muunnostaulukko.

Värityökalut

Väriluettelot

HTML Colors

Tavallisimpien värien hex- ja rgb-koodit.

SVG color keywords

Värinimiä CSS3:n värimoduulissa. Mukana hex- ja rgb-arvot.

Väripaletit

Työkaluja sopivien väriyhdistelmien löytämiseksi:

ColorBlender.com

Työkalu yhteensopivien värien ja väripalettien etsimiseen.

Color Scheme Generator 2

Väripalettityökalu. Näyttää myös miltä väriyhdistelmä näyttää erilaisilla näkörajoitteilla.

Colors.tobani.com

Väripalettien muotoiluun.

EasyRGB

Erilaisia värityökaluja.

Näytön kalibrointi

Näytön värit kannattaa säätää oikein, että värit toistuvat mahdollisimman hyvin. Lisätietoja GIMP-kuvankäsittelykurssin osiossa Näytön kalibrointi.