Er zijn vele manieren om op een HTML-pagina met behulp van CSS kleuren te definiëren. Deze kleuren zijn op diverse manieren toepasbaar, zoals bijv. de tekstkleur (color), de achtergrondkleur (background-color) en de kaderkleur (border-color)

Kleurnamen

Allereerst kan dat met behulp van engelstalige namen:

color: white;

Er is een lijst van 140 kleurnamen, die in alle browsers gebruikt kunnen worden (zie onder aan deze pagina).

Het nadeel is, dat het 'slechts' 140 kleuren zijn, die ook nog eens foutgevoelig zijn, vanwege de exacte spelling ervan, hoewel ze niet hoofdlettergevoelig zijn.

Hexadecimale codes

Ten tweede kan gebruik worden gemaakt van hexadecimale codes. Voor een beginnend gebruiker ziet dat er vaak wat dreigender uit, maar als je het systeem begrijpt, dan kun je daar zelf behoorlijk wat mee bereiken.

color: #01940E;

De uitleg hierbij is, dat het gaat om 3 blokjes van 2 cijfers, die net als bij het hieronder genoemde RGB-systeem voor de kleuren Rood, Groen en Blauw staan. In bovenstaand voorbeeld staat dus eigenlijk een kleur 01 94 0E. Dat hierbij een letter staat vermeld, komt omdat het geen decimale getallen zijn die we hier gebruiken, maar hexadecimale getallen. We nummeren daarbij niet van 0 t/m 9, maar gaan na de 9 nog door: 0-1-2-3-4-5-6-7-8-9-a-b-c-d-e-f. In onze decimale telling staat F dan voor 15. Net als in de decimale nummering gaan we daarna verder met 10 (=16) t/m 1F (=31), 20 (=32) t/m 2F (=47), 30 (=48) t/m 3F (63), enz.

Het hoogste getal, dat je met een hexadecimale waarde van 2 posities kunt bereiken is dan FF, oftewel: 255.

In onze hexadecimale kleurcode #01940E staat dus eigenlijk: Rood(01), Groen(94), Blauw(0E) of in decimalen: Rood(01), Groen(148), Groen(14).

Letters staan in hexadecimale codes voor de leesbaarheid vaak in hoofdletters vermeld, maar dat is niet verplicht. #F9A3EA betekent precies het zelfde als #f9a3ea.

Wanneer alledrie de blokjes exact dezelfde waarden weergeven, dan kunnen we daaraan eenvoudig zien, dat het een grijstint is. Dat loopt van geheel zwart (#000000) tot geheel wit (#FFFFFF) via alle tussenliggende waarden, zoals bijv. #252525, #4F4F4F, #C7C7C7. Hoe hoger het hexadecimale getal, des te lichter wordt de grijstint. Zo blijken er dus geen 50, maar zelfs 256 tinten grijs te bestaan, waarvan hieronder een kwart te zien is (dus in stappen van 4).

Je browser ondersteunt geen html5 canvas

Opvallend is daarbij, dat de kleur met de naam DarkGray (#A9A9A9) lichter is dan Gray (#808080) en dat LightSlateGray (#778899), anders dan de naam doet vermoeden, geen echte grijstint is.

Een andere bijzonderheid, is dat wanneer alledrie de blokjes per blokje bestaan uit twee gelijke waarden (bijv. #2244AA), dan kan dat verkort worden genoteerd als #24A. Andersom geredeneerd: Wanneer je zo'n code tegenkomt, verdubbel dan alledrie de waarden (2 wordt 22, 4 wordt 44 en A wordt AA). #24A is dus het zelfde als #2244AA.

RGB / RGBA

Als derde noemen we hier RGB en RGBA. Met RGB geef je drie decimale getallen op om je kleur te mengen: Rood, Groen en Blauw.

color: rgb(1, 148, 14);

Eigenlijk is dit systeem dus hetzelfde als het zojuist genoemde hexadecimale systeem, met dat verschil, dat het voor ons mensen iets beter leesbaar is.

Per kleur kunnen hier waarden ingevuld worden van 0 t/m 255. Overigens is het ook toegestaan om 3 percentages op te geven (van 0% tot en met 100%).

Met RGBA geef je nog een vierde waarde mee, een decimaal getal tussen 0 en 1, waarmee wordt aangegeven hoe groot de doorzichtigheid van de kleur is (0=transparant, 1=niet transparant).

color: rgba(120, 44, 68, 0.45);

In de afbeelding is het RGB-kleurenwiel te zien met daarin de primaire kleuren (rood op 0°, groen op 120°, blauw op 240°) en daar tussenin de secundaire kleuren (geel op 60°, cyan op 180°, magenta op 300°). In onderstaand voorbeeld zien we hoe de primaire en secundaire kleuren opgebouwd worden met deze drie kleuren licht.

De primaire kleuren zijn hierbij rood, groen en blauw. De secundaire kleuren krijg je door het licht van deze kleuren te mengen: rood + groen = geel, groen + blauw = cyaan en blauw + rood = magenta. En dat is een hele mooie brug naar CMY(K) wat verderop besproken wordt.

HSL / HSLA

HSL staat voor Hue, Saturation, Lightness en is net als RGB een kleurcodering met behulp van 3 getallen. Het eerste getal staat voor de kleur (Hue) en kan een getal zijn vanaf 0 t/m 360. Deze getallen hebben betrekking op de 'graden' van het HSL-kleurenwiel. 0° is daarbij rood, 120° is groen en 240° is blauw. De getallen worden genoteerd zonder het gradenteken.

Het tweede en derde getal zijn allebei percentages. Het tweede getal staat daarbij voor de saturatie, ofwel de verzadiging van de kleur. Bij 100% wordt de 'volledige' kleur getoond. Hoe lager dit getal wordt, des te grijzer wordt de kleur, totdat je helemaal bij 0% bent uitgekomen.

Het derde getal (lightness) geeft de helderheid van de kleur aan. Hier is 50% de neutrale waarde. Hoe hoger dit percentage, des te lichter wordt de kleur (100% = wit). Hoe lager dit getal, des te donkerder wordt de kleur (0% = zwart).

Voorbeeld: hsl(138, 80%, 35%).

Wanneer het tweede getal (saturatie) 0% is, dan maakt het niet uit wat het eerste getal is. Dat zal altijd de zelfde grijstint opleveren. De grijstint kan eventueel lichter of donkerder gemaakt worden met het derde getal (lightness). Wanneer die waarde 0% is, dan is het resultaat altijd zwart. Is die waarde 100%, dan is het resultaat altijd wit.

Net als bij RGB / RGBA kan ook hier een vierde waarde worden toegevoegd om de doorzichtigheid van de kleur op te geven (zie hierboven).

HWB

HWB staat voor Hue, Whiteness, Blackness. Deze kleurcodering wordt in browsers nog niet ondersteund, maar er loopt een voorstel om dit in CSS4 tot een nieuwe standaard te maken.

In deze kleurcodering is Hue net als bij HSL de kleur volgens het HWB-kleurenwiel.

Whiteness en blackness zijn allebei percentages. Wanneer ze allebei 0% zijn, dan zien we de gewone heldere kleur. Door het percentage bij whiteness te verhogen wordt de kleur steeds lichter (100% = wit). Blackness werkt net andersom: Als we dit percentage verhogen, dan wordt de kleur steeds donkerder (100% = zwart).

De som van deze beide percentages kan niet hoger zijn dan 100%. Wanneer bijv. whiteness 78% is, dan kan blackness niet hoger zijn dan 22%.

Voorbeeld: hwb(138, 65%, 22%).

CMY(K)

CMYK staat voor Cyan, Magenta, Yellow en blacK. Deze kleurcodering wordt in browsers nog niet ondersteund, maar er loopt een voorstel om dit in CSS4 tot een nieuwe standaard te maken. CMYK is vooral bekend van de druk- en printwereld (denk bijv. ook aan de cartridges in je printer).

Dit kleursysteem maakt gebruik van hetzelfde kleurenwiel als RGB, alleen is het wiel daarbij 180° gedraaid.

De kleurcodering bestaat hier uit vier getallen, alle vier percentages. Hoe hoger de getallen, des te meer van die kleur wordt toegevoegd.

Voorbeeld: cmyk(80%, 0%, 96%, 45%).

Kleurnamen

* Kleurnamen met 'Gray' mogen ook worden gespeld als 'Grey'.

U bent niet geautoriseerd om reacties te plaatsen.