Kleuren in CSS

In CSS kun je op verschillende manieren kleur geven aan tekst. Hieronder worden er vier manier besproken.

Kleurnaam

Er zijn 147 kleurnamen gedefinieerd. Veel mensen vinden dit een te beperkt palet, en het is moeilijk om de naam voor elk van de kleuren te onthouden, zodat ze (met uizondering van 'white' en 'black') niet vaak gebruikt owrden.

Voorbeelden:

• color: red
• color: darkgreen
• color: mediumaquamarine

Hexadecimale code

Dit zijn zescijferige codes die de hoeveelheid rood, groen, en blauw (RGB) in een kleur vertegenwoordigen, voorafgegaan door een hekje (#).

Hoeveelheid van een kleur wordt aangegeven in het hexadecimale stelsel. Dit is een 16-tallig stelsel waarmee je van 0 tot F kunt tellen. Hoe hoger het 'getal', hoe meer van een kleur.

Voorbeelden (herken je het patroon?):

• color: #ff0000; [rood]
• color: #00ff00; [groen]
• color: #0000ff; [blauw]
• color: #000000; [zwart]
• color: #ffffff; [wit]

RGB-waarde

Net als bij de hexadecimale code druk je hiermee de kleur ook uit in hoeveelheden rood, groen en blauw. Alleen gebruik je bij RGB-waarden decimale getallen die van 0 tot 255 lopen.

Voorbeelden (probeer de kleur aan de code te herkennen, en vul de kleuren hieronder in):

• color: rgb(255,0,0); [rood]
• color: rgb(0,255,0); [groen]
• color: rgb(150,0,255); [paars]
• color: rgb(100,100,100); [grijs]

Hue, saturation, luminosity (HSL)

Een laatste manier om kleur aan te geven is via HSL-waarden. Lees meer over deze manier op de websites van W3Schools en The New Code.

Voorbeelden:

• color: hsl(0,100%,51%) [rood]
• color: hsl(212,100%,50%) [blauw]
• color: hsl(212,0%,100%) [wit]
• color: hsl(212,0%,0%) [zwart]