Denkoefening

Welke stijl zou goed passen bij reclame voor luiers of reclame voor parfum? Welke lettertypes zou je in beide gevallen gebruiken? Vermoedelijk andere dan wanneer je een site zou maken voor een speelgoedfabrikant of een "country&western"-artiest. Niet enkel de lettertypes zouden in al die gevallen het verschil maken, maar ook de keuze van de kleuren en de gehele vormgeving. 

Een kleurenpalet samenstellen

Over kleuren en smaken kan je niet discussiëren hoor je vaak. Dat is inderdaad zo. Maar je kan wel mathematisch berekenen welke kleuren samen passen, en welke niet. Kleuren hebben bovendien een symbolische waarde en/of culturele lading. Wat roept de kleur "rood" op als je er aan denkt? Niet voor niets vertegenwoordigt de "rode planeet" Mars, de Romeinse oorlogsgod (bloedvergieten).

1. Je kan "berekenen" welke kleuren samengaan.
2. Kleuren hebben een culturele symbolische lading.

Daarnaast zijn niet alle kleuren even geschikt voor weergave op een scherm. Als het logo van het bedrijf waarvoor je werkt heel veel blauw bevat, betekent dit niet dat je dat blauw moet gebruiken als achtergrondkleur van je website. Immers, wat goed oogt op een "bestelwagen" of "muur", oogt niet noodzakelijk ok op een scherm. Een scherm zendt immers licht uit, terwijl verf licht weerkaatst. Dit houdt in dat je goed moet nadenken vooraleer je de bedrijfskleuren zonder meer zou gaan inzetten voor de achtergrondkleur van je website. 

Een kleur die goed staat op een muur, past niet noodzakelijk op een "scherm".

Kleuren voor online gebruik: RGB-waardes

Een beeldscherm dat uitstaat, is ZWART. Het zendt immers geen licht uit. Papier is standaard wit.  Papier zendt immers geen licht uit, maar weerkaatst het enkel maar, net zoals een muur of auto. Als je zwarte letters op je papier wil, dan zal je er zwart moeten op drukken of spuiten. Wil je zwart op een scherm, dan volstaat het om het scherm uit te doen :-)

Zoals je vermoedelijk wel ooit geleerd hebt, kan je licht splitsen in alle kleuren van de "regenboog". Wit licht bevat alle kleuren. Zwart daarentegen is het "ontbreken van kleuren". Dat geldt voor alles wat licht uitzendt, van de zon tot een smartphonescherm. Wil je een scherm wit laten oplichten, dan moet je alle kleuren tegelijk mengen. Simpel toch? Een beeldscherm is opgebouwd uit een raster van kleine vakjes, die we kennen als "picture elements" of pixels. Elk van die pixels kan licht uitzenden door de drie basiskleuren ROOD, GREEN en BLAUW te mengen. 

Je kan elke pixel een bepaalde kleur geven door die drie kleuren in een bepaalde verhouding bij elkaar te mengen. Vermits een digitaal systeem (zoals een smartphone of een laptop) enkel maar cijfertjes "kent", zijn die kleurwaarden vertaalt in cijfercombinaties. Rood, groen en blauw kunnen elk afzonderlijk een waarde tussen de 0 en de 255 innemen. Dat zijn, als je goed kijkt, voor elke kleur 256 mogelijkheden. Het cijfer 0 is immers ook een mogelijkheid. 

 ZWART = 0 ROOD + 0 GROEN + 0 BLAUW 

 WIT = 255 ROOD + 255 GROEN + 255 BLAUW

Stel dat je in CSS de kleur zou instellen op color: rgb(255,0,0), dan krijg je "groen" als resultaat.   

Kleuren in CSS

Als je een kleur of achtergrondkleur wil geven aan een element, dan kan je die kleur op verschillende manieren ingeven in CSS:

1. Met een Engelstalige benaming: black, white, red, deepskyblue... Uiteraard moet CSS die benaming kennen. ApplegreenSeablue zal CSS niet herkennen. 
2. Je kan de waardes invoeren met de rgb-instructie zoals bijvoorbeeld rgb(0,0,0) zwart geeft. De drie getallen tussen de haakjes geven respectievelijk de verhouding rood, groen en blauw weer.
3. Je kan de waarde ingeven met een HEXADECIMALE code. Die code is het meest gebruikt in computertoepassingen. #000000 geeft bijvoorbeeld zwart. Wit krijgt de hexadecimale waarde #FFFFFF. Zo'n hexadecimale code maakt geen gebruik van het decimale talstelsel, maar van het hexadecimale (of zestiendelige) talstelsel. Je hoeft dat niet zelf uit je hoeft te kunnen rekenen. Beeldbewerkingsprogramma's kunnen die code voor elke pixel uit een afbeelding ophalen. 
4. Je kan een kleur ook gedeeltelijk transparant maken. De manier waarop je dit doet, is verwant met de RGB-instructie: de RGBA-instructie Je voert dan bijvoorbeeld rgba(0,0,0,0.4) in. De A-waarde staat hier op 0.4. Dit betekent dat de kleur (zwart in dit geval) aardig transparant is, alsof je ze met een combinatie van waterverf en veel water hebt geschilderd.

Een kleurenpalet op basis van een foto of logo

In een beeldbewerkingsprogramma zoals GIMP of Adobe Photoshop, kan je met het pipetgereedschap RGB-waardes (kleurcoderingen voor gebruik in webpagina's) uit een foto oppikken. 

Techniek 1: Kleuren oppikken in GIMP & palet samenstellen met RGB-Paletbouwer

1. Een foto openen in GIMP.
2. Klik op het pipetgereedschap.
3. Klik op een bepaalde kleur in de afbeelding. 
4. Klik op de "voorgrondkleur".
5. Het venster van de kleuren opent. Selecteer en/of kopieer de RGB-waarde.
6. Ga naar RGB-Paletbouwer.
7. Plak uw kleur in het invoerveld.
8. Klik op "Maak websitepalet".
9. Gebruik die waardes in je CSS-document.

Techniek 2: Een kleurenpalet samenstellen met de "Schoolvoorbeeld Paletbouwer"

Met onze Paletbouwer kan je een heel kleurenpalet samenstellen aan de hand van één (of meerdere) foto's. Open de onderstaande link, sleep een foto naar het venster en de kleurcodes verschijnen onder de foto.

Techniek 3: Een kleurenpalet samenstellen met Paletton

 Paletton

Geavanceerd: een kleurenpalet maken op basis van een RAL-kleur