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:
- 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.
- Achtergrondkleuren: Je kunt de achtergrondkleur van een HTML-element, zoals de achtergrond van de hele pagina, specificeren met behulp van de juiste kleurcode.
- 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. - 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.
- 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.
- 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
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” |