Kleuren in webpagina's
Introductie
U kunt kleuren toevoegen aan bepaalde onderdelen van uw web pagina. U krijgt een kleur door de eigenschap color="#kleur-code" toe te voegen aan een HTML element. In de tabel staat hoe u kleur moet toevoegen aan de verschillende onderdelen. Een voorbeeld: <span style="color: #F3182A">dit is nu rood</span>.
| Onderdeel van de web pagina | HTML element met eigenschap voor kleur |
| achtergrond web pagina | <body bgcolor="#kleur-code">HTML document</body> |
| tekst | <span type="color: #kleur-code">een tekst</span> |
| cel van een tabel | <td color="#kleur-code">inhoud cel</td> |
De kleur-code nader uitgelegd
De kleur-code bestaat uit drie hexadecimale getallen. Het eerste hexadecimale getal geeft aan hoeveel rood aanwezig moet zijn, het tweede getal hoeveel groen en het derde getal hoeveel blauw. De laagste hexadecimale waarde voor elke kleur is 00 en de hoogste waarde is FF. Met 00 is de kleur niet aanwezig en met FF is de kleur zo helder mogelijk. In deze tabel staan alle mogelijke waarden voor één kleur:
00 01 02 03 04 05 06 07 08 09 0A 0B 0C 0D 0E 0F 10 11 12 13 14 15 16 17 18 19 1A 1B 1C 1D 1E 1F 20 21 22 23 24 25 26 27 28 29 2A 2B 2C 2D 2E 2F 30 31 32 33 34 35 36 37 38 39 3A 3B 3C 3D 3E 3F 40 41 42 43 44 45 46 47 48 49 4A 4B 4C 4D 4E 4F 50 51 52 53 54 55 56 57 58 59 5A 5B 5C 5D 5E 5F 60 61 62 63 64 65 66 67 68 69 6A 6B 6C 6D 6E 6F 70 71 72 73 74 75 76 77 78 79 7A 7B 7C 7D 7E 7F 80 81 82 83 84 85 86 87 88 89 8A 8B 8C 8D 8E 8F 90 91 92 93 94 95 96 97 98 99 9A 9B 9C 9D 9E 9F A0 A1 A2 A3 A4 A5 A6 A7 A8 A9 AA AB AC AD AE AF B0 B1 B2 B3 B4 B5 B6 B7 B8 B9 BA BB BC BD BE BF C0 C1 C2 C3 C4 C5 C6 C7 C8 C9 CA CB CC CD CE CF D0 D1 D2 D3 D4 D5 D6 D7 D8 D9 DA DB DC DD DE DF E0 E1 E2 E3 E4 E5 E6 E7 E8 E9 EA EB EC ED EE EF F0 F1 F2 F3 F4 F5 F6 F7 F8 F9 FA FB FC FD FE FF |
Hierboven staan 256 getallen. Het hexadecimale getal voor rood kan dus 256 waarden aannemen. Hetzelfde geldt voor groen en blauw. Kortom met de eigenschap "color" heeft u de keuze uit 256 x 256 x 256 kleuren. Dit zijn 16.777.216 kleuren, ongeveer 16 miljoen dus. Een aantal voorbeelden van de kleur-code zijn: F4D955, 114477, 33FF33, 49A27C. Stel u wilt de achtergrond van een cel geel maken, geel is een combinatie van rood en groen. Dan gebruikt u de volgende code: <td color="#FFFF00">cel inhoud</td.
| cel inhoud |
Laten we het simpel houden
Ruim 16 miljoen kleuren, dat is wel een erg grote keuze. Kijkt u nu eens naar de volgende reeks kleuren:
| 000000 |
| 010000 |
| 020000 |
| 030000 |
| 040000 |
| 050000 |
| 060000 |
| 070000 |
| 080000 |
| 090000 |
| 0A0000 |
| 0B0000 |
| 0C0000 |
| 0D0000 |
| 0E0000 |
| 0F0000 |
U zult zeggen: "ja leuk, ze zijn dus allemaal zwart". Dat klopt, dit zijn de eerste 16 kleuren rood, van de 16 miljoen. Alleen het tweede cijfer van het getal voor rood verandert. De conclusie is dus dat bij het gebruik van de kleur-code het tweede cijfer van elk getal irrelevant is. Men ziet toch geen verschil. De regel is luidt dan ook als volgt:
Laat het tweede cijfer in elk hexadecimaal getal hetzelfde zijn als het eerste cijfer.
Het gevolg is dat de mogelijkheden voor elke kleur beperkt zijn tot 16, namenlijk 00, 11, 22, 33, 44, 55, 66, 77, 88, 99, AA, BB, CC, DD, EE en FF. Enkele voorbeelden van kleur-codes die aan deze regel voldoen: 3399FF, 5555AA, 000000 en FF6600. Door deze regel toe te passen heeft u nog 16 x 16 x 16 kleuren tot u beschikking, met andere woorden 4096 kleuren.
De basis kleuren volgens deze regel
In onderstaande tabel staan de 16 basiskleuren van rood, van groen en de 16 basiskleuren van blauw. Deze basiskleuren kunnen dan weer gecombineerd worden zodat men weer aan de 4096 komt. Het voorbeeld genoemd helemaal bovenin deze pagina zou volgens de regel veranderen in: <span type="color: #FF0000">dit is nu rood</span>.
| Rood | Groen | Blauw |
| 000000 | 000000 | 000000 |
| 110000 | 001100 | 000011 |
| 220000 | 002200 | 000022 |
| 330000 | 003300 | 000033 |
| 440000 | 004400 | 000044 |
| 550000 | 005500 | 000055 |
| 660000 | 006600 | 000066 |
| 770000 | 007700 | 000077 |
| 880000 | 008800 | 000088 |
| 990000 | 009900 | 000099 |
| AA0000 | 00AA00 | 0000AA |
| BB0000 | 00BB00 | 0000BB |
| CC0000 | 00CC00 | 0000CC |
| DD0000 | 00DD00 | 0000DD |
| EE0000 | 00EE00 | 0000EE |
| FF0000 | 00FF00 | 0000FF |
Nu kunt u zelf kleuren bepalen
Met behulp van deze regel kunt u uit het hoofd kleuren bepalen. Stel u wilt lichtgroen. Het tweede getal vertegenwoordigt groen. Rood (het eerste getal) en blauw (het derde) "zetten we uit", door hier 00 van te maken. Lichtgroen is dus bijvoorbeeld 00CC00:
| cel inhoud |
Wilt u oranje? U weet oranje is een combinatie van rood en groen, met meer rood dan groen: FF9900:
| cel inhoud |
