HTML-Kleurcodes

HTML-Kleurcodes | Webdesign Kennisbank

HTML-kleurcodes, ook bekend als hexadecimale kleurcodes of hexcodes, zijn een manier om kleuren te specificeren in HTML- en CSS-documenten. Elke kleurcomponent wordt weergegeven door een hexadecimale waarde, variërend van 00 tot FF.

Dat komt overeen met een decimale waarde van 0 tot 255. 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 Bijvoorbeeld #FF0000; vertegenwoordigt de kleur rood, #00FF00; vertegenwoordigt groen en #0000FF; vertegenwoordigt blauw.

Door verschillende combinaties van deze drie kleurcomponenten te gebruiken, kunnen webdesigners vrijwel elke gewenste kleur produceren. HTML-kleurcodes worden veel gebruikt om de kleuren van tekst, achtergronden, randen en andere elementen op webpagina’s te specificeren.

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.

Wat kun je met HTML-Kleurcodes?

Met HTML-kleurcodes kun je de kleuren van verschillende elementen op een webpagina specificeren. Hieronder een lijst mogelijke elementen:

  1. Tekstkleuren: Je kunt de kleur van de tekst in een HTML-element, zoals paragrafen, koppen, links, enzovoort, aanpassen door de kleurcode toe te passen op het tekstgedeelte van het element.
  2. Achtergrondkleuren: Je kunt de achtergrondkleur van een HTML-element, zoals de achtergrond van de hele pagina, specificeren met behulp van de juiste kleurcode.
  3. Border-kleuren: Je kunt de kleur van de randen van HTML-elementen aanpassen door de kleurcode toe te passen op de border-color eigenschap in CSS.
  4. Kleur van grafische elementen: Als je grafische elementen gebruikt die via HTML worden weergegeven, zoals SVG-afbeeldingen, kun je de kleuren binnen die afbeeldingen ook aanpassen met behulp van HTML-kleurcodes.
  5. Stijlen en thema’s: HTML-kleurcodes zijn handig voor het definiëren van stijlen en het maken van thema’s voor websites. Door consistente kleurcodes te gebruiken, kun je een uniforme visuele identiteit voor de website behouden.
  6. Responsieve ontwerpen: Bij het maken van responsieve websites kunnen HTML-kleurcodes worden gebruikt om verschillende stijlen toe te passen op basis van schermgrootte.

3 Manieren om te kleuren met HTML

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. Kleuren met namen

De geldende namen van kleuren kunnen alleen in het Engels, rechtstreeks worden aangegeven in de broncode:

 <body>
 <table bgcolor=”lavender”>
 <tr>
 <td>
 <font color=”white”>Witte tekst op een donkerblauw gekleurde achtergrond.</font>
 </td>
 </tr>
 </table>
 </body>
 </html>

2. RGB Kleuren

 <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;.

 <html>
 <body>
 <table bgcolor=”#E6E6FA;”>
 <tr>
 <td>
 <font color=”#000000″>Zwarte tekst op een lavender gekleurde achtergrond.</font>
 </td>
 </tr>
 </table>
 </body>
 </html>

Veilige HTML-Kleurcodes

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

Wit
Zilver
Grijs
Zwart
Rood
Kastanjebruin
Geel
Olijf
Kalk
Groen
aqua
Taling
Blauw
Marine
Fuchsia
Purper

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.x

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 voor 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”