HTML-Kleurcodes zijn codes die worden gebruikt in HTML en CSS om de kleur van elementen op een webpagina te specificeren.
Deze kleurcodes bestaan uit 3 verschillende combinaties van letters en cijfers die de intensiteit van Rood, Groen en Blauw aangeven, waardoor elke denkbare kleur kan worden gecreëerd.
Hexadecimale codes bestaan uit 6 cijfers (hexadecimaal), die aangeven om welke kleur het gaat. Verder begint deze code met het #-teken en eindigt met een ; -teken. De meest voorkomende vorm van HTML-kleurcodes zijn hexadecimale notatie, zoals #FF000; voor rood of #99cc00; voor groen.
RGB-Kleuren worden aangegeven 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, #99cc00; vertegenwoordigt groen en #0000ff; vertegenwoordigt blauw.
Kleuren met namen kunnen alleen in het Engels, rechtstreeks worden aangegeven in de broncode. In plaats van de hexadecimale notatie, zoals #ff0000; voor rood, kun je ook gebruik maken van namen om kleuren aan te duiden, bijvoorbeeld “red” voor rood en “green” voor groen.
Bezoek ook: HTML
3 Manieren om HTML-Kleurcodes te gebruiken
In de onderstaande tabellen staan 3 voorbeelden, 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. Hexadecimale Kleuren
| <body> <table bgcolor=”#ffffcc;”> <tr> <td> <font color=”#000000″>Zwarte tekst op een geel gekleurde achtergrond.</font> </td> </tr> </table> </body> |
2. RGB Kleuren
| <body> <table bgcolor=”rgb(255, 255, 0)”><tr> <td> <font color=”black”>Zwarte tekst op een geel gekleurde achtergrond.</font> </td> </tr> </table> </body> |
3. Kleuren met namen
| <body> <table bgcolor=”yellow”><tr> <td> <font color=”black”>Zwarte tekst op een geel gekleurde achtergrond.</font> </td> </tr> </table> </body> |
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.
- Borderkleuren: Je kunt de kleur van de randen van HTML-elementen aanpassen door de kleurcode toe te passen op de
border-coloreigenschap 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.
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 verouderd zijn, waardoor deze niet in staat is om alle HTML-kleurcodes te herkennen.
Veilige en standaard HTML-kleuren
Daarom staat hieronder een kleurenpalet met alle veilige kleurcodes. Met de rechtermuisknop “kopiëren en plakken” zijn deze eenvoudig in de broncode over te nemen.
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” |
| Meer webadressen over HTML-Kleuren |
||
| HTML Color Codes | Mijn eigen website | Katinka Hesselink |
| Wikipedia | Business Blog School | HTML Totaal |
| Codecenter | Handleiding HTML | Domoticx |