Nederdev : web and Drupal stuff

Er zijn bij webdesign een aantal manieren om kleuren te definiëren. Drie veelgebruikte methodes zijn hexadecimale waardes, RGB kleuren en kleurnamen. Dit artikel legt de mogelijkheden en de voordelen van elke methode uit.

Kleurnamen

De makkelijkste manier om een kleur te definiëren is wel door de kleur bij zijn naam te noemen. Er zijn voor veel kleuren namen in omloop, maar slechts 16 namen zijn geldig:

1. aqua
2. black
3. blue
4. fuchsia
5. gray
6. green
7. lime
8. maroon
9. navy
10. olive
11. purple
12. red
13. silver
14. teal
15. white
16. yellow

Ze zijn eigenlijk alleen met CSS te gebruiken en dat gaat op de volgende manier:

Dit is de meest simpele methode om kleuren te selecteren, maar ook gelijk de meest beperkte. Je kan hiermee slechts zestien kleuren gebruiken. Vaak zal je een aantal kleuren willen gebruiken die erg op elkaar lijken, zodat je eenheid krijgt, maar dat toch niet overal dezelfde kleur terugkomt. Daarvoor moet je één van de volgende methodes gebruiken.

RGB

Bij RGB (Red, green and blue) waardes bepaal je met 3 getallen hoeveel je van de kleuren rood, groen en blauw bij elkaar mengt. De getallen hebben een waarde vanaf 0 tot en met 255. Dit in CSS gebruiken gaat zo:

De waardes staan in dezelfde volgorde als in de naam: rood, groen en daarna blauw. Vaak kan je aan de waardes al zien welke kleur gebruikt wordt. Rood is in dit voorbeeld 130, groen is 0 en blauw ook 130. Er is geen groen en rood en blauw samen wordt paars. Nog een voorbeeld:

Je ziet nu 3 gelijke waardes. Dit betekent dat je een grijstint krijgt. 0,0,0 stelt zwart voor en des te hoger de waardes worden, des te witter de kleur wordt. Volledig wit zou 255,255,255 zijn, aangezien 255 de hoogste waarde is die bij RGB gebruikt kan worden.

Hexadecimale waardes

Hexadecimale waardes vallen in het rijtje binair, decimaal, hexadecimaal. Bij binair kan je op elke positie maar twee waarden kwijt (0-1), bij decimaal zijn dat er tien (0-9) en bij hexadecimaal zestien (0-9a-f). Meer mogelijke waardes per positie betekent meer mogelijke waardes in totaal. Het totale aantal mogelijkheden met een getal (zo zou ik hexadecimale waardes ook gewoon beschouwen. A tot en met F nemen gewoon de waardes van 10 tot en met 15 in) is het aantal verschillende mogelijkheden per positie tot de macht van het aantal posities. Bij een getal van zes tekens kan je met binaire code maar 2⁶=64 waardes maken. Bij het decimale systeem wordt dit 10⁶=1.000.000 waardes en bij het hexadecimale systeem 16⁶=16.777.216 waardes. Met hexadecimale waardes kan je dus kiezen uit ruim zestien miljoen kleuren. Dit is net zoveel als bij RGB.

Hexadecimale kleuren bestaan uit 6 tekens die elk de waarde 0-9 of a-f kunnen hebben. Je krijgt dan bijvoorbeeld 67fb8f. Ook bij de hexadecimale notering kan je zeggen dat de waardes uit een rood, een groen en een blauw deel bestaan. Als je naar het vorige voorbeeld kijkt, dan heeft rood de waarde 67, blauw heeft fb en groen is 8f. Net als bij de RGB notering geldt dat gelijke waardes een grijstint voorstellen en dat een hogere waarde een lichtere kleur voorstelt. 75ffc3 is bijvoorbeeld hoger dan 67fb8f, waardoor het een lichtere kleur voorstelt.

In programma's kan je hexadecimale waardes gewoon invoeren in het veld dat daarvoor bedoeld is. Bij CSS moet je echter een hekje (#) voor de waarde zetten om aan te geven dat je een hexadecimale kleur gebruikt:

Tot slot

Ik hoop dat je nu wat meer weet over hoe je kleuren moet gebruiken: hoe je ze samenstelt en hoe je ze uitleest. Al die codes lijken vaak erg ingewikkeld, maar zodra je de logica erachter kent is er niks meer aan. In de praktijk wordt het meest gebruik gemaakt van hexadecimale waardes bij webdesign. RGB is eigenlijk net zo goed; het biedt dezelfde mogelijkheden.

Tips

• Als je bezig bent een layout te maken, dan is het vaak handig je containers een duidelijke, opvallende kleur te geven. Ik gebruik zelf altijd een kleurnaam (red, green, purple, blue of yellow) om snel een felle kleur aan een element toe te wijzen. Als je klaar bent met het positioneren, dan kan je het element de goede kleur geven met een hexadecimale- of RGB-waarde.
• Met kleuren spelen is erg leuk. Pas wel op dat je kleuren niet teveel tegen elkaar afsteken en zorg dat er een goed contrast is tussen de tekst en de achtergrond. Zo zorg je ervoor dat je bezoekers geen zere ogen krijgen als ze je site bezoeken.