Värien määrittäminen rgb-muodossa CSS:ssä

Oppaiden alussa, kun opimme väreistä, kerroin teille, että värin voi määrittää joko englanninkielisellä sanalla, joko rgb:n kautta, tai #:n kautta. Nämä kaksi jälkimmäistä muotoa mahdollistavat minkä tahansa sävyisen värin saamisen. Käsitellään, kuinka nämä muodot tarkalleen toimivat.

Ymmärtääksemme nämä tavat, meidän on ensin ymmärrettävä, kuinka haluttu väri saadaan aikaan tietokoneen näytöllä.

Itse asiassa yksittäinen näytön piste (pikseli) ei voi loistaa kaikilla tarvittavilla väreillä, koska se olisi teknisesti erittäin vaikeaa. Jokainen näytön piste voi loistaa vain kolmella värillä: punaisella, vihreällä ja sinisellä. Kuitenkin samanaikaisesti ja erilaisissa suhteissa.

Yhdistämällä nämä värit saamme minkä tahansa tarvitsemamme värin, samaan tapaan kuin taiteilijat tekevät maaleilla: sekoittamalla useita värejä he saavat vielä yhden uuden.

Värien sekoittamiseksi CSS:ssä on ominaisuuden arvoksi määritettävä avainsana rgb, joka jälkeen luetellaan pilkuin erotettuina suhteet, joissa nämä kolme perusväriä tulisi ottaa. Itse värit voivat vaihdella välillä 0 - 255. Lisäksi nolla - on värin puuttuminen, ja 255 on puhdas väri (esimerkiksi puhdas punainen).

Kirjaimet rgb tulevat sanoista red, green, blue.

Katsotaan esimerkkien avulla.

Esimerkki

Sekoitetaan puhdas punainen ja puhdas sininen väri. Tätä varten asetamme ensimmäiseksi arvoksi 255, toiseksi 0, ja kolmanneksi - 255. Saamme liilan värin:

<p>
	teksti
</p>

p {
	color: rgb(255, 0, 255);
}

Esimerkki

Asetetaan nyt ensimmäinen arvo 255:ksi, ja kaikki muut - nolliksi. Tuloksena saamme puhtaan punaisen värin:

<p>
	teksti
</p>

p {
	color: rgb(255, 0, 0);
}

Esimerkki

Näin saamme puhtaan vihreän värin:

<p>
	teksti
</p>

p {
	color: rgb(0, 255, 0);
}

Esimerkki

Ja jos vihreälle asetetaan 255:n sijaan 100, saadaan osittain vihreä:

<p>
	teksti
</p>

p {
	color: rgb(0, 100, 0);
}

Esimerkki

Sekoitetaan kaikki kolme väriä mielivaltaisissa suhteissa. Katsokaa, mitä syntyi:

<p>
	teksti
</p>

p {
	color: rgb(200, 100, 125);
}

Esimerkki

Jos asetetaan kaikki arvoksi 255, saadaan puhdas valkoinen väri:

p {
	color: rgb(255, 255, 255);
}

Esimerkki

Jos asetetaan kaikki arvoksi 0, saadaan puhdas musta väri:

p {
	color: rgb(0, 0, 0);
}

Käytännön tehtävät

Määrittämällä värin rgb:n kautta, tee kaikista kappaleista punaisia.

Määrittämällä värin rgb:n kautta, tee kaikista h2-otsikoista vihreitä.

Määrittämällä värin rgb:n kautta, tee kaikista h3-otsikoista sinisiä.

Sekoita puhdas punainen ja puhdas vihreä. Mikä väri syntyy?