Kleuren in HTML/CSS

In dit onderdeel komen aan de orde Introductie, Kleuren definiëren, RGB-kleuren, Kleurnamen, Systeemkleuren, Veilig kleurenpalet, Kleuren in HTML en Kleuren in CSS.

Introductie

Kleuren kunnen voor meerdere onderdelen van een HTML-document vastgelegd worden, bijvoorbeeld voor:

• de achtergrond, de tekst en de hyperlinks van een document via de attributen BGCOLOR, TEXT, LINK, VLINK en ALINK van het BODY element
• tekst via de elementen FONT en BASEFONT
• de achtergrond van (delen van) een tabel via het BGCOLOR attribuut van de elementen TABLE, THEAD, TBODY, TFOOT, TR, TD en TH.

Meer mogelijkheden heb je als je gebruik maakt van verschillende stijleigenschappen in Cascading Style Sheets:

• met de color eigenschap kan de voorgrondkleur van een element worden vastgelegd
• met de eigenschappen background-color en background kan de achtergrondkleur van een element worden vastgelegd
• met de border-color kan de kleur van de rand om een element worden vastgelegd.

In dit onderdeel wordt beschreven op welke manieren kleuren gedefinieerd kunnen worden. Ook wordt aangegeven welke van deze manieren gebruikt kunnen worden voor HTML en CSS.

Kleuren definiëren

Door een kleurenmonitor worden kleuren weergegeven als een bepaalde combinatie van rood, groen en blauw. Daarom ligt het voor de hand ook in HTML en CSS kleuren vast te leggen als een mix van deze basiskleuren. Er zijn verschillende manieren om de intensiteit van elk van de kleuren rood, groen en blauw vast te leggen. Het kan door middel van percentages, numerieke getallen en hexadecimale notatie.

Behalve als een RGB-kleur bieden HTML en CSS ook de mogelijkheid een kleur te definiëren door middel van een kleurnaam. Een bijzondere vorm hiervan is het gebruik van systeemkleuren.

De verschillende manieren worden hierna beschreven. Vervolgens wordt ingegaan op het veilig kleurenpalet, dat de kleuren bevat welke door elke browser op elk systeem kunnen worden weergegeven.

RGB-kleuren

De eerste manier om een RGB-kleur te definiëren is door de intensiteit van elk van de basiskleuren rood, groen en blauw in een percentage uit te drukken. De waarde van de kleur heeft hierbij de volgende vorm:

rgb(rood%,groen%,blauw%)

Elke basiskleur heeft een waarde tussen 0% en 100%. Bij 0% ontbreekt een kleur, bij 100% is de intensiteit maximaal. Indien een waarde hoger dan 100% wordt opgenomen, wordt deze terug gebracht tot 100%. Decimale waarden (bijvoorbeeld 45.8%) zijn toegestaan, maar het gebruik ervan wordt afgeraden, omdat een browser die geen decimalen ondersteunt de waarde verkeerd kan interpreteren. Wanneer de intensiteit van de drie basiskleuren gelijk is, wordt als resultaat een grijstint weergegeven.

Ter illustratie enkele voorbeelden:

rgb(100%,0%,0%):      rood
rgb(100%,100%,100%):  wit
rgb(0%,0%,0%):        zwart
rgb(13%,75%,60%):     een zeegroene kleur

Behalve als percentage kan de intensiteit van elk van de basiskleuren rood, groen en blauw ook uitgedrukt worden in een numeriek getal in de range van 0 t/m 255. Daarbij komt 0 overeen met 0% en 255 met 100%. De waarde van de kleur heeft de volgende vorm:

rgb(getal_rood,getal_groen,getal_blauw)

Bij het getal 0 ontbreekt een kleur, bij 255 is de intensiteit maximaal. Indien een waarde hoger dan 255 wordt opgenomen, wordt deze terug gebracht tot 255. Decimale waarden zijn niet toegestaan.

Als voorbeeld de kleuren die al eerder genoemd zijn:

rgb(255,0,0):         rood
rgb(255,255,255):     wit
rgb(0,0,0):           zwart
rgb(32,178,154):      een zeegroene kleur

De numerieke getallen kunnen ook in hexadecimale notatie opgenomen worden. Hierbij wordt de intensiteit van elke kleur vastgelegd door middel van een paar van twee karakters uit de range 0 t/m 9 en A t/m F. Hierbij staan de getallen voor zichzelf, A voor 10, B voor 11, C voor 12, D voor 13, E voor 14 en F voor 15. Het verband tussen het numerieke getal en de hexadecimale notatie is als volgt: het eerste karakter geeft aan hoeveel keer het numerieke getal door 16 gedeeld kan worden, het tweede karakter is het restgetal (het numerieke getal minus het eerste karakter maal 16). Als voorbeeld de zeegroene kleur met de numerieke getallen 32, 178 en 151:

numeriek  32 =  2 x 16 +  0 = 20  hexadecimaal
numeriek 178 = 11 x 16 +  2 = B2  hexadecimaal
numeriek 154 =  9 x 16 + 10 = 9A  hexadecimaal

De vorm waarin de kleur in hexadecimale waarden wordt opgenomen wijkt duidelijk af van die, waarin gebruik gemaakt wordt van percentages of numerieke getallen. In dit geval is het een hekje gevolgd door de drie paren karakters, zonder komma's er tussen en haakjes er omheen:

#RRGGBB

Ter illustratie weer eerder genoemde kleuren:

#FF0000:     rood
#FFFFFF:     wit
#000000:     zwart
#20B29A:     een zeegroene kleur

Wanneer in de hexadecimale waarde elk paar bestaat uit twee dezelfde karakters, kan deze waarde ook op een verkorte wijze worden opgenomen:

#RGB

Als hiervan gebruik gemaakt wordt, zal de browser bij de interpretatie elk karakter dupliceren.

Van de eerdere voorbeelden kunnen alleen de eerste drie in verkorte vorm worden opgenomen:

#FF0000   =   #F00
#FFFFFF   =   #FFF
#000000   =   #000

Kleurnamen

De meest eenvoudige manier om een kleur vast te leggen is door middel van een naam, welke veel makkelijker te onthouden is dan een of andere combinatie van cijfers en/of letters.
In de specificaties van HTML en CSS is vastgelegd dat je de volgende 16 kleurnamen kunt gebruiken:

white, yellow, fuchsia, red, aqua, lime, blue, black, gray, lime, purple, maroon, teal, green, navy en silver

Deze kleuren zijn afkomstig uit het originele palet met 16 Windows VGA-kleuren.

Naast de 16 kleurnamen ondersteunen veel browsers nog eens 124 extra namen, zoals MediumSpringGreen, LightGoldenrodYellow, Gainsboro en BurlyWood. Het gebruik van dit soort namen wordt niet aanbevolen. Niet elke naam wordt door elke browser ondersteund en bovendien maken ze geen deel uit van het veilig kleurenpalet.

Kleurnamen zijn case-insensitive, dat wil zeggen dat het niet uitmaakt of ze in hoofdletters of in kleine letters worden geschreven.

In de volgende afbeelding zijn de 16 standaard kleurnamen weergegeven. Tevens zijn daarbij de bijbehorende RGB-waarden vermeld. Te zien is dat in het eerste blok de kleuren steeds de volle intensiteit (100%) hebben en in het tweede blok de halve intensiteit (50%). In het laatste blok zijn de waarden voor rood, groen en blauw per kleur gelijk en dat betekent dat het om grijstinten gaat.

Systeemkleuren

Nieuw in CSS2 is de mogelijkheid tot het definiëren van systeemkleuren. Dat zijn geen vaste kleuren, maar verwijzingen naar de kleuren die gebruikt worden door het systeem, waarop het document wordt weergegeven. Bijvoorbeeld een verwijzing naar de kleur van de titelbalk van het actieve venster (ActiveCaption), of naar de kleur van de tekst in de titelbalk (CaptionText). Het idee achter de mogelijkheid om systeemkleuren te definiëren is, dat hiermee de kleuren afgestemd kunnen worden op wat de gebruiker (blijkbaar) plezierig vindt of nodig heeft vanwege een visueel handicap.

In de volgende afbeelding is een overzicht van de systeemkleuren voor een standaard Windows 98 systeem te zien. Op een ander systeem dan Windows 98, of als de gebruiker via de voorkeuren andere kleuren heeft gekozen, zullen de weergegeven kleuren van die op de afbeelding afwijken. Klik op de afbeelding voor een toelichting op de systeemkleuren en om te zien of en zo ja, hoe ze door de browser worden weergegeven.

Omdat je als auteur geen invloed hebt op hoe de systeemkleuren worden weergegeven, is het verstandig ze altijd te gebruiken in een combinatie van voor- en achtergrondkleur. Bovendien wordt geadviseerd ze niet door elkaar heen te gebruiken met kleuren die op een andere manier gedefinieerd zijn.

De namen van de systeemkleuren zijn case-insensitive, dat wil zeggen dat het niet uitmaakt of ze in hoofdletters of in kleine letters worden geschreven. Vanwege de leesbaarheid wordt evenwel geadviseerd de in het overzicht opgenomen schrijfwijze aan te houden.

Veilig kleurenpalet

Als een RGB-kleur gedefinieerd wordt door middel van numerieke getallen, kan voor elk van de kleuren rood, groen en blauw een getal in de range van 0 t/m 255 gebruikt worden. Dat betekent dat er in totaal 256x256x256 = 16.777.216 verschillende combinaties zijn. Of elk van deze ruim 16 miljoen kleuren ook echt op het scherm van de gebruiker te zien zal zijn, hangt af van de mogelijkheden van de monitor. Hoewel de standaard de laatste jaren aanzienlijk verschoven is, zullen veel gebruikers het nog moeten doen met maximaal 65.536 of zelfs maximaal 256 kleuren. Wanneer je uit de beschikbare mogelijkheden een willekeurige kleur kiest, is de kans dus groot dat de browser deze niet kan weergeven. In dat geval zijn er twee mogelijkheden. De eerste is dat de browser uit de beschikbare kleuren er een kiest, die zo dicht mogelijk bij de bedoelde kleur komt. De andere mogelijkheid is dat de browser de kleur probeert te simuleren. Dat kan door pixels te wijzigen in verschillende kleuren, welke gecombineerd de bedoelde kleur benaderen. Dit heet dithering. In beide gevallen zal de weergave anders zijn dan bedoeld, maar met name bij dithering kan het resultaat minder geslaagd zijn.

In de volgende afbeeldingen is te zien tot welk resultaat beide mogelijkheden kunnen leiden. In de bovenste rij hebben de afbeeldingen hun originele grootte, in de onderste rij is een deel van de afbeelding uitvergroot om de dithering beter te kunnen zien. Om in de eerste afbeelding de originele kleur te kunnen zien, moet het systeem minstens 65.536 kleuren (hi-color) kunnen weergeven.

Om te voorkomen dat de browser de gekozen kleur vervangt door de dichtstbijzijnde kleur of simuleert door dithering, kun je het beste gebruik maken van één van de kleuren uit het veilig kleurenpalet. Dat is een set van 216 RGB-kleuren, welke door alle browsers op alle systemen zonder kleurwijziging of dithering kunnen worden weergegeven, ook als het systeem over slechts 256 kleuren beschikt. Op het aantal van 216 RGB-kleuren kom je uit, omdat er van elk van een basiskleuren rood, groen en blauw een gelijk aantal mogelijkheden gebruikt moet kunnen worden en er binnen 256 kleuren dan niet meer dan 6x6x6 = 216 combinaties passen. De resterende 40 kleuren verschillen per systeem.

De waarden die binnen het veilig kleurenpalet voor elke basiskleur toegepast mogen worden, zijn gelijkmatig over de beschikbare range verdeeld. Naast 0%, 0 en 00, gaat het daarom om veelvouden van 20%, 51 en 33 voor respectievelijk de weergave in percentages, numerieke getallen en hexadecimale notatie:

In de volgende afbeelding zijn de 216 kleuren van het veilig kleurenpalet te zien.

Kleuren in HTML

In HTML kunnen kleuren gedefinieerd worden door middel van:

• één van de 16 kleurnamen
• een RGB-waarde in niet verkorte hexadecimale notatie.

Voorbeelden:

<BODY TEXT="#black" BGCOLOR="white" LINK="#blue" VLINK="#red"> </BODY>

<BODY TEXT="#FFFFFF" BGCOLOR="#000000" LINK="#0000FF" VLINK="#FF0000"> </BODY>

Incidenteel wordt door een browser ook één van de andere besproken mogelijkheden ondersteund. Het gebruik ervan wordt echter afgeraden, omdat het in andere browsers tot ongewenste resultaten zal leiden.

Het is belangrijk altijd een voor- én een achtergrondkleur vast te leggen. Daarmee wordt voorkomen een document onleesbaar wordt, bijvoorbeeld doordat de voorgrondkleur van het document te weinig verschilt van de door de bezoeker ingestelde standaard achtergrondkleur van de browser.

Kleuren in CSS

In CSS kunnen kleuren gedefinieerd worden door middel van:

• één van de 16 kleurnamen
• een RGB-waarde in percentages
• een RGB-waarde in numerieke getallen
• een RGB-waarde in al dan niet verkorte hexadecimale notatie
• systeemkleuren.

Voorbeelden:

BODY        { color: #FFFFFF;
              background: #000000; }

A:link      { color: rgb(255,0,0);
              background: rgb(0,0,0); }

A:visited   { color: rgb(0%,0%,100%);
              background: rgb(0%,0%,0%); }

BODY        { color: WindowText;
              background: Window; }

Ondersteuning:

• Internet Explorer 3: alleen de 16 kleurnamen en RGB-waarden in al dan niet verkorte hexadecimale notatie
• Internet Explorer 4 en hoger: alle mogelijkheden
• Netscape Navigator 4: alle mogelijkheden met uitzondering van systeemkleuren (deze worden echter ten onrechte niet genegeerd, maar in plaats ervan worden tamelijk willekeurige andere kleuren weergegeven)
• Netscape Navigator 6: alle mogelijkheden
• Opera 3.5 en hoger: alle mogelijkheden met uitzondering van systeemkleuren (welke correct genegeerd worden).

Gezien de foutieve wijze waarop Netscape Navigator 4 systeemkleuren weergeeft, wordt het gebruik ervan alleen aanbevolen, als gewerkt wordt met browser-specifieke stijlbladen.

Net als bij HTML is het van belang altijd zowel de voor- als de achtergrondkleur te vast te leggen.

  Inhoud Handleiding HTML   Index

Laatste wijziging 23 september 2000
Copyright © 1995-2000 Hans de Jong