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


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 154:

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


Vervolg: Kleurnamen



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

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 18 mei 2003