HTML Kleuren
Zodra je als webdesigner aan een nieuw ontwerp voor je website begint, spelen kleuren een grote rol, want ze zijn erg belangrijk om een goed uiterlijk te geven aan je website.
De kleuren van je website kunnen een gebruiker aantrekken of juist afstoten. Door gebruik te maken van verschillende kleuren op je website, vergroot je de indruk die je pagina maakt op gebruikers.
Je kunt onze online tool gebruiken om gemakkelijk de HTML-kleurcodes te achterhalen. Verder leer je hoe je de kleurcodes kunt toepassen in je website.
Kleuren opnemen
In het body element kan je attributen opnemen die kunnen worden gebruikt om verschillende kleuren in te stellen.
<body bgcolor="kleur" text="kleur" link="kleur" vlink="kleur" alink="kleur">
| bgcolor | - | Hiermee wordt de kleur voor de achtergrond opgegeven. |
| text | - | Hiermee wordt de tekstkleur opgegeven. |
| link | - | Hiermee wordt de kleur voor de koppelingen (links) opgegeven. |
| vlink | - | Hiermee geef je de kleur voor de koppelingen op die je al hebt aangeklikt. |
| alink | - | Hiermee wordt de kleur voor de actieve links of geselecteerde koppelingen opgegeven. |
Voorbeeld:
<body bgcolor="gray" text="white" link="purple" vlink="black" alink="silver">
Codering methoden
De kleuren worden opgebouwd uit drie primaire additieve kleuren rood, groen en blauw, ook wel genoemd (RGB). Er zijn drie verschillende methoden om de kleuren in te stellen in je webpagina:
| Kleurnaam | - | Kleurnamen rechtstreeks opgeven zoals red, green of blue. |
| Hexadecimaal | - | Hier kan de hoeveelheid van elke primaire kleur variëren tussen 00 en FF |
| RGB-systeem | - | De kleur wordt bepaald met behulp van een getal dat kan variëren tussen 0 en 255. |
Kleurnamen
Om het allemaal makkelijk te maken kun je een kleur vast leggen door middel van een naam. Hieronder is een lijst van 16 standaard kleurnamen die beschikbaar zijn voor webdesigners. Tegenwoordig zijn er meer dan 140 verschillende kleurnamen beschikbaar die ondersteund worden door moderne browsers.
| Black | Gray | Silver | White | ||||
| Yellow | Lime | Aqua | Fuchsia | ||||
| Red | Green | Blue | Purple | ||||
| Maroon | Olive | Navy | Teal |
Voorbeeld:
<html>
<body text="yellow" bgcolor="maroon">
<p>Probeer verschillende kleurnamen uit voor het body en table element.</p>
<table bgcolor="black">
<tr>
<td>
<font color="white">Witte tekst op een zwarte achtergrond.</font>
</td>
</tr>
</table>
</body>
</html>
 |
Klik hier om een uitgebreide lijst van HTML kleurnamen te weergeven. |
Hexadecimale kleurcodes
Een hexadecimale kleurcode wordt bepaald doormiddel van 6 cijfers of letters. De eerste twee cijfers of letters vormen de rode waarde (RR), de volgende twee de groene waarde (GG), en de laatste twee de blauwe waarde (BB). Je kunt de hexadecimale kleurcode achterhalen door gebruik te maken van een grafische software zoals Adobe Photoshop, Paint of eventueel via onze online tools op deze pagina.
Hexadecimale kleurcode:
Voorbeeld:
<html>
<body text="#4A8E22" bgcolor="#E5EFDE">
<p>Probeer verschillende kleuren uit voor het body en table element.</p>
<table bgcolor="#0091FF">
<tr>
<td>
<font color="#FFFFFF">Witte tekst op een blauwe achtergrond.</font>
</td>
</tr>
</table>
</body>
</html>
RGB kleurcodering
Het RGB-kleurcodering is een manier om een kleur uit te drukken met behulp van een combinatie van de drie primaire kleuren rood, groen en blauw, vandaar de afkorting RGB. De waarden kunnen lopen van 0 tot 255. Een volledige kleur kan worden aangeduid als bijvoorbeeld rgb(181,34,34). Deze aanduidingen treft men meestal aan in grafische programma's zoals Adobe Photoshop.Het RGB-kleurcodering voor de standaard kleuren:
|
|
Voorbeeld:
<html>
<body text="rgb(0,0,0)" bgcolor="rgb(192,192,192)">
<p>Probeer verschillende kleuren uit voor het body en table element.</p>
<table bgcolor="rgb(255,255,0)">
<tr>
<td>
<font color="rgb(255,0,0)">Voorbeeld van het RGB-kleurcodering.</font>
</td>
</tr>
</table>
</body>
</html>
 |
Niet alle browsers ondersteunen het RGB-kleurcodering. We raden het ook niet aan om dit kleursysteem te gebruiken. |
