HTML-Kleurcodes

Kleuren Toepassen in HTML

Kleurcodes | Webdesign KennisbankDe kleurcodes in HTML maken 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 het 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 HTML-Kleuren te Definiëren

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 alleen in het Engels, rechtstreeks worden opgegeven in de broncode;

<html>
<body>
<table bgcolor=”#f8f8f8;”>
<tr>
<td>
<font color=”black”>Zwarte tekst op een licht grijze achtergrond.</font>
</td>
</tr> 
</table>
</body>
</html>

2. RGB Kleuren

De afkorting van het kleurenmodel RGB staat voor; red, green en blue. Dit is een kleurcodering waarbij een combinatie van de drie primaire kleuren; Rood, Groen en Blauw worden gemengt, om uiteindelijk een kleur te definiëren. Zoals bijvoorbeeld de basiskleur mint-groen; rgb(204,255,255); en voor zwart; rgb(00,00,00); enz.

<html>
<body>
<table bgcolor=”rgb(248,248,248)”>
<tr>
<td>
<font color=”rgb(00,00,00)”>Zwarte tekst op een licht grijze 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 mind-groen; #ccffff; en voor zwart; #000000;.

Deze Hex-codes mogen overigens ook in hoofdletters worden geschreven en worden bovendien het meest gebruikt;

<html>
<body>
<table bgcolor=”#f8f8f8;”>
<tr>
<td>
<font color=”#000000″>Zwarte tekst op een licht grijze 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.

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.

Een kleuren-pallet van alle Hexadecimale (veilige) kleurcodes;

#FFFFFF#FFCCFF#FF99FF#FF66FF#FF33FF#FF00FF
#FFFFCC#FFCCCC#FF99CC#FF66CC#FF33CC#FF00CC
#FFFF99#FFCC99#FF9999#FF6699#FF3399#FF0099
#FFFF66#FFCC66#FF9966#FF6666#FF3366#FF0066
#FFFF33#FFCC33#FF9933#FF6633#FF3333#FF0033
#FFFF00#FFCC00#FF9900#FF6600#FF3300#FF0000
#CCFFFF#CCCCFF#CC99FF#CC66FF#CC33FF#CC00FF
#CCFFCC#CCCCCC#CC99CC#CC66CC#CC33CC#CC00CC
#CCFF99#CCCC99#CC9999#CC6699#CC3399#CC0099
#CCFF66#CCCC66#CC9966#CC6666#CC3366#CC0066
#CCFF33#CCCC33#CC9933#CC6633#CC3333#CC0033
#CCFF00#CCCC00#CC9900#CC6600#CC3300#CC0000
#99FFFF#99CCFF#9999FF#9966FF#9933FF#9900FF
#99FFCC#99CCCC#9999CC#9966CC#9933CC#9900CC
#99FF99#99CC99#999999#996699#993399#990099
#99FF66#99CC66#999966#996666#993366#990066
#99FF33#99CC33#999933#996633#993333#990033
#99FF00#99CC00#999900#996600#993300#990000
#66FFFF#66CCFF#6699FF#6666FF#6633FF#6600FF
#66FFCC#66CCCC#6699CC#6666CC#6633CC#6600CC
#66FF99#66CC99#669999#666699#663399#660099
#66FF66#66CC66#669966#666666#663366#660066
#66FF33#66CC33#669933#666633#663333#660033
#66FF00#66CC00#669900#666600#663300#660000
#33FFFF#33CCFF#3399FF#3366FF#3333FF#3300FF
#33FFCC#33CCCC#3399CC#3366CC#3333CC#3300CC
#33FF99#33CC99#339999#336699#333399#330099
#33FF66#33CC66#339966#336666#333366#330066
#33FF33#33CC33#339933#336633#333333#330033
#33FF00#33CC00#339900#336600#333300#330000
#00FFFF#00CCFF#0099FF#0066FF#0033FF#0000FF
#00FFCC#00CCCC#0099CC#0066CC#0033CC#0000CC
#00FF99#00CC99#009999#006699#003399#000099
#00FF66#00CC66#009966#006666#003366#000066
#00FF33#00CC33#009933#006633#003333#000033
#00FF00#00CC00#009900#006600#003300#000000

HTML-Attributen voor Kleuren gebruiken

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.

 

body bgcolor=”kleur” text=”kleur” link=”kleur” vlink=”kleur” alink=”kleur”

Zie ook: Elementen en Attributen
 

Zie ook deze Categoriën in de Kennisbank over Webdesign:

 

Back to Top