Kleuren in HTML en CSS


Handleiding HTML Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin


Inhoud onderdeel: Introductie kleuren in HTML en CSS | RGB-kleuren | Kleurnamen | Systeemkleuren | Kleuren in HTML | Kleuren in CSS | Veilig kleurenpalet


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.

originele kleur dichtstbijzijnde kleur na dithering
rgb(255,189,90) rgb(255,204,51) totaal 4 kleuren


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:


percentages:

0%  20%  40%  60%  80% 100%
numerieke getallen:
 0   51  102  153  204  255
hexadecimale notatie:
00   33   66   99   CC   FF


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



Inhoud onderdeel | Inhoud HTML | Inhoud CSS | Trefwoordenregister | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 4 juli 2004