In plaats van vaste kleurnamen, waarmee je slechts een beperkt aantal kleuren tot je beschikking hebt, kun je ook gebruik maken van 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.
RGB Kleurcode | kleur | |
---|---|---|
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 |
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 | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
0 | 00 | 01 | 02 | 03 | 04 | 05 | 06 | 07 | 08 | 09 | 0A | 0B | 0C | 0D | 0E | 0F |
1 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 1A | 1B | 1C | 1D | 1E | 1F |
2 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 2A | 2B | 2C | 2D | 2E | 2F |
3 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 3A | 3B | 3C | 3D | 3E | 3F |
4 | 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 4A | 4B | 4C | 4D | 4E | 4F |
5 | 50 | 51 | 52 | 53 | 54 | 55 | 56 | 57 | 58 | 59 | 5A | 5B | 5C | 5D | 5E | 5F |
6 | 60 | 61 | 62 | 63 | 64 | 65 | 66 | 67 | 68 | 69 | 6A | 6B | 6C | 6D | 6E | 6F |
7 | 70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 79 | 7A | 7B | 7C | 7D | 7E | 7F |
8 | 80 | 81 | 82 | 83 | 84 | 85 | 86 | 87 | 88 | 89 | 8A | 8B | 8C | 8D | 8E | 8F |
9 | 90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 9A | 9B | 9C | 9D | 9E | 9F |
A | A0 | A1 | A2 | A3 | A4 | A5 | A6 | A7 | A8 | A9 | AA | AB | AC | AD | AE | AF |
B | B0 | B1 | B2 | B3 | B4 | B5 | B6 | B7 | B8 | B9 | BA | BB | BC | BD | BE | BF |
C | C0 | C1 | C2 | C3 | C4 | C5 | C6 | C7 | C8 | C9 | CA | CB | CC | CD | CE | CF |
D | D0 | D1 | D2 | D3 | D4 | D5 | D6 | D7 | D8 | D9 | DA | DB | DC | DD | DE | DF |
E | E0 | E1 | E2 | E3 | E4 | E5 | E6 | E7 | E8 | E9 | EA | EB | EC | ED | EE | EF |
F | F0 | F1 | F2 | F3 | F4 | F5 | F6 | F7 | F8 | F9 | FA | FB | FC | FD | FE | FF |
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>
Je zult begrijpen dat je kleuren in allerlei elementen kunt gebruiken, zoals bijvoorbeeld de achtergrondkleur van je webpagina, de randkleur van een afbeelding etc.