banner

4.2: Kleurcodes

In plaats van vaste kleurnamen, waarmee je slechts een beperkt aantal kleuren tot je beschikking hebt, kun je ook gebruik maken van kleurcodes.

§ 4.2.1: RGB kleurcodes

Kleuren in beeldschermen worden gevormd door de combinatie van 3 kleuren: Rood, Groen en Blauw. Elk beeldpunt (picture element = pixel) wordt gevormd door de aan- of afwezigheid van de genoemde kleuren. elke van deze drie kleuren kan aanwezig zijn in 256 verschillende tinten van heel weinig van die kleur tot heel veel van die kleur.
Elk beeldpunt kun je aangeven met de code rgb(hoeveelheid rood, hoeveelheid groen, hoeveelheid blauw). Die hoeveelheid geef je aan in een getal tussen 0 en 255 (=256 mogelijkheden) waarbij geldt dat 0 betekent dat die kleur niet aanwezig is en waarbij 255 betekent dat die kleur maximaal aanwezig is.


Enkele voorbeelden:

RGB Kleurcodekleur
rgb(0,0,0)Zwart
rgb(255,0,0)Rood
rgb(0,255,0)Groen
rgb(0,0,255)Blauw
rgb(255,255,0)Yellow
rgb(255,0,255)Magenta
rgb(0,255,255)Cyan
rgb(255,255,255)Wit
rgb(100,20,150)
rgb(128,128,0)
rgb(70,70,70)Donkergrijs
rgb(200,200,200)Lichtgrijs


§ 4.2.2: Hexadecimale kleurcodes

Hexa staat voor 6. Decimaal staat voor 10. Hexadecimaal is dus een 16-tallig stelsel. Wij hebben geleerd om te tellen/rekenen in een tientallig stelsel. dit gaat echter uit van een 16 tallig stelsel hetgeen betekent dat er 16 tekens zijn voor één positie

De codes worden dan niet alleen gevormd uit de cijfers 0-9 maar ook uit de letters A, B, C, D, E en F. Hierbij geldt dat de kleur donkerder is naarmnate de tint dichtert is bij de 0 en lichter is naarmate hij dichter is bij de F.
Zoals je in de vorige paragraaf geleerd hebt worden kleuren op onze beeldschermen gevormd door de kleuren Rood, Groen en Blauw.
Bij een hexadecimale kleurcode worden voor elk van deze kleuren 2 posities gereserveerd. Een hexadecimale kleurcode wordt voorafgegaan door een hekje (#) en ziet er dan als volgt uit: #RRGGBB;. Hierbij staat de RR voor Rood, de GG voor Groen en de BB voor Blauw.

Per kleur heb je 16 (0-F) x 16 (0-F) mogelijkheden. Dat betekent weer 256 verschillende tinten Rood, 256 verschillende tinten Groen en 256 verschillende tinten Blauw. Uiteindelijk zijn er dus 256 (roodtinten) x 256 (groentinten) x 256 (blauwtinten) = ruim 16,7 miljoen verschillende kleuren mogelijk. Ook hier heb je dus weer aanzienlijk meer mogelijkheden dan met kleurnamen.

Voorbeelden van de kleuren zwart, rood, groen, blauw en wit, zie hieronder:

#000000 is zwart
#ff0000 is vuurrood
#00ff00 is felgroen
#0000ff is blauw
#ffffff is wit

Hieronder zie je een volledige tabel met 256 verschillende combinaties. De combinatie 00 wil zeggen dat er géén licht van die kleur doorgelaten wordt. FF betekent dat deze kleur volledig open staat.
Stel dat onderstaande tabel geldt voor de rode tint dan betekent 2A dat de kleur rood maar weinig open staat (donkerrood dus). E6 betekent dat de kleur rood bijna helemaal open staat (fel rood dus).

  0 1 2 3 4 5 6 7 8 9 A B C D E F
0000102030405060708090A0B0C0D0E0F
1101112131415161718191A1B1C1D1E1F
2202122232425262728292A2B2C2D2E2F
3303132333435363738393A3B3C3D3E3F
4404142434445464748494A4B4C4D4E4F
5505152535455565758595A5B5C5D5E5F
6606162636465666768696A6B6C6D6E6F
7707172737475767778797A7B7C7D7E7F
8808182838485868788898A8B8C8D8E8F
9909192939495969798999A9B9C9D9E9F
AA0A1A2A3A4A5A6A7A8A9AAABACADAEAF
BB0B1B2B3B4B5B6B7B8B9BABBBCBDBEBF
CC0C1C2C3C4C5C6C7C8C9CACBCCCDCECF
DD0D1D2D3D4D5D6D7D8D9DADBDCDDDEDF
EE0E1E2E3E4E5E6E7E8E9EAEBECEDEEEF
FF0F1F2F3F4F5F6F7F8F9FAFBFCFDFEFF

Wanneer je een <h2> in een andere kleur wilt, kun je dit doen met de volgende code:
<h2 style="color: #ff6623;">Kop in het oranje</h2>

Kop in het oranje

Je zult begrijpen dat je kleuren in allerlei elementen kunt gebruiken, zoals bijvoorbeeld de achtergrondkleur van je webpagina, de randkleur van een afbeelding etc.

Als je de achtergrondkleur van een element wilt wijzigen, kan dat door de toevoeging:

background-color: kleurnaam;
of
background-color: rgb(rrr,ggg,bbb);
of
background-color: #rrggbb;

Opdracht 12: Kleurcodes

Open index.html en geef deze pagina een lichte kleur als achtergrond.

Verander ook enkele paragrafen uit verschillende webpagina's in een andere achtergrond- en letterkleur. Zorg ervoor dat je alle drie de methoden gebruikt om kleuren te beschrijven.