Met HTML-Kleurcodes is het mogelijk, zelf allerlei verschillende kleuren toe te passen. Want het internet zou toch te saai zijn, als er voor tekst en allerlei andere elementen in een ontwerp, geen enkele kleur uitgekozen kon worden!
De gekozen kleuren op een website kunnen bezoekers aantrekken of afstoten. Door gebruik te maken van een goede kleuren combinatie, vergroot je de juiste indruk die een website maakt op haar bezoekers.
Zo is het mogelijk om met kleurcodes de achtergrondkleur van een website in te stellen en kleur in de tekst weer te geven. Tevens is het mogelijk om cellen in tabellen in te kleuren en nog veel meer. Daar komt nog bij, dat kleurcodes op verschillende manieren zijn te definiëren.
3 Manieren om met HTML te kleuren
In de onderstaande tabellen staan 3 voorbeelden weergegeven voor het coderen van kleuren. Allereerst met de term (attribuut); bgcolor=”…” voor een gekleurde achtergrond en vervolgens door; font color=”…” voor het kleuren van tekst.
1. Kleur Namen
De geldende namen van kleuren kunnen in het Engels, rechtstreeks worden opgegeven in de broncode:
| <html> <body> <table bgcolor=”lavender”> <tr> <td> <font color=”black”>Zwarte tekst op een lavender gekleurde achtergrond.</font> </td> </tr> </table> </body> </html> |
2. RGB Kleuren
De afkorting van het kleurenmodel RGB staat voor; Rood, Groen en Blauw. Dit is een kleurcodering waarbij een combinatie van deze 3 primaire kleuren worden gemengd, om uiteindelijk een kleur te definiëren:
| <html> <body> <table bgcolor=”rgb(230,230,250)”> <tr> <td> <font color=”rgb(00,00,00)”>Zwarte tekst op een lavender gekleurde achtergrond.</font> </td> </tr> </table> </body> </html> |
3. Hexadecimale Kleuren
Een hex-code bestaat uit 6 cijfers (hexadecimaal), die aangeven om welke kleur het gaat. Verder begint een hex-code met het ‘#’-teken en eindigt met het ‘;’-teken. Zoals bijvoorbeeld de basiskleur groen: #008000; en voor zwart: #000000;.
Deze hex-codes mogen zowel met kleine letters, alsook in hoofdletters worden geschreven:
| <html> <body> <table bgcolor=”#E6E6FA;”> <tr> <td> <font color=”#000000″>Zwarte tekst op een lavender gekleurde achtergrond.</font> </td> </tr> </table> </body> </html> |
Welke HTML-Kleurcodes zijn veilig?
Binnen een enorm assortiment aan kleurcodes in HTML, bestaan er gemakshalve ook “veilige kleurcodes”. Zo kan met een moderne videokaart wel 16.777.216 verschillende kleuren worden weergegeven! Een webbrowser kan echter veroudert zijn, waardoor deze niet in staat is om alle HTML-kleurcodes te herkennen.
Veilige en standaard HTML-kleuren
Daarom staat hieronder een kleuren-pallet met alle veilige kleurcodes. Met de rechter muisknop “kopiëren en plakken” zijn deze eenvoudig in de broncode over te nemen.
Kleuren-pallet van Hexadecimale (veilige) kleurcodes
#000000 |
#000033 |
#000066 |
#000099 |
#0000CC |
#0000FF |
#003300 |
#003333 |
#003366 |
#003399 |
#0033CC |
#0033FF |
#006600 |
#006633 |
#006666 |
#006699 |
#0066CC |
#0066FF |
#009900 |
#009933 |
#009966 |
#009999 |
#0099CC |
#0099FF |
#00CC00 |
#00CC33 |
#00CC66 |
#00CC99 |
#00CCCC |
#00CCFF |
#00FF00 |
#00FF33 |
#00FF66 |
#00FF99 |
#00FFCC |
#00FFFF |
#990000 |
#990033 |
#990066 |
#990099 |
#9900CC |
#9900FF |
#993300 |
#993333 |
#993366 |
#993399 |
#9933CC |
#9933FF |
#996600 |
#996633 |
#996666 |
#996699 |
#9966CC |
#9966FF |
#999900 |
#999933 |
#999966 |
#999999 |
#9999CC |
#9999FF |
#99CC00 |
#99CC33 |
#99CC66 |
#99CC99 |
#99CCCC |
#99CCFF |
#99FF00 |
#99FF33 |
#99FF66 |
#99FF99 |
#99FFCC |
#99FFFF |
#330000 |
#330033 |
#330066 |
#330099 |
#3300CC |
#3300FF |
#333300 |
#333333 |
#333366 |
#333399 |
#3333CC |
#3333FF |
#336600 |
#336633 |
#336666 |
#336699 |
#3366CC |
#3366FF |
#339900 |
#339933 |
#339966 |
#339999 |
#3399CC |
#3399FF |
#33CC00 |
#33CC33 |
#33CC66 |
#33CC99 |
#33CCCC |
#33CCFF |
#33FF00 |
#33FF33 |
#33FF66 |
#33FF99 |
#33FFCC |
#33FFFF |
#CC0000 |
#CC0033 |
#CC0066 |
#CC0099 |
#CC00CC |
#CC00FF |
#CC3300 |
#CC3333 |
#CC3366 |
#CC3399 |
#CC33CC |
#CC33FF |
#CC6600 |
#CC6633 |
#CC6666 |
#CC6699 |
#CC66CC |
#CC66FF |
#CC9900 |
#CC9933 |
#CC9966 |
#CC9999 |
#CC99CC |
#CC99FF &nbsnbsp; |
#CCCC00 |
#CCCC33 |
#CCCC66 |
#CCCC99 |
#CCCCCC |
#CCCCFF |
#CCFF00 |
#CCFF33 |
#CCFF66 |
#CCFF99 |
#CCFFCC |
#CCFFFF |
#660000 |
#660033 |
#660066 |
#660099 |
#6600CC |
#6600FF |
#663300 |
#663333 |
#663366 |
#663399 |
#6633CC |
#6633FF |
#666600 |
#666633 |
#666666 |
#666699 |
#6666CC |
#6666FF |
#669900 |
#669933 |
#669966 |
#669999 |
#6699CC |
#6699FF |
#66CC00 |
#66CC33 |
#66CC66 |
#66CC99 |
#66CCCC |
#66CCFF |
#66FF00 |
#66FF33 |
#66FF66 |
#66FF99 |
#66FFCC |
#66FFFF |
#FF0000 |
#FF0033 |
#FF0066 |
#FF0099 |
#FF00CC |
#FF00FF |
#FF3300 |
#FF3333 |
#FF3366 |
#FF3399 |
#FF33CC |
#FF33FF |
#FF6600 |
#FF6633 |
#FF6666 |
#FF6699 |
#FF66CC |
#FF66FF |
#FF9900 |
#FF9933 |
#FF9966 |
#FF9999 |
#FF99CC |
#FF99FF |
#FFCC00 |
#FFCC33 |
#FFCC66 |
#FFCC99 |
#FFCCCC |
#FFCCFF |
#FFFF00 |
#FFFF33 |
#FFFF66 |
#FFFF99 |
#FFFFCC |
#FFFFFF |
HTML-Attributen | Kleuren
Bij het coderen van HTML-Kleurcodes kun je zogenaamde ‘Attributen’ opnemen. Deze worden gebruikt bij het instellen (inregelen) van verschillende kleuren voor diverse toepassingen:
| • | bgcolor: Zo wordt de kleur voor de achtergrond aangegeven |
| • | text: Zo wordt de tekstkleur aangegeven |
| • | link: Zo wordt de kleur van een hyperlink aangegeven |
| • | vlink: Zo wordt de kleur van een hyperlink aangeven die is aangeklikt |
| • | alink: Zo wordt de kleur van geselecteerde hyperlinks aangegeven |
Dit wordt in de barcode als volgt weergegeven:
| body bgcolor=”kleur” text=”kleur” link=”kleur” vlink=”kleur” alink=”kleur” |