21 jun Weet jij waarom de kleuren van je website anders ogen dan op je visitekaartje?

Weet jij waarom de kleuren van je website anders ogen dan op je visitekaartje?

Kleuren komen we overal tegen maar weet je ook hoe kleuren zijn gemaakt? Er zijn verschillende kleursystemen die allemaal een andere functie hebben. Zo zijn RGB, CMYK en PMS alle drie kleursystemen. Veel mensen hebben er wel eens van gehoord, maar weten niet precies wat ze nou eigenlijk inhouden en wanneer je welk kleursysteem gebruikt. Ik ga het je uitleggen.

RGB

RGB staat voor rood, groen en blauw. De drie primaire kleuren waarmee je alle kleuren kunt maken door licht toe te voegen. Denk dan aan het beeldscherm van je telefoon bijvoorbeeld. Alle schermen die je in het dagelijks leven gebruiken zoals telefoons, laptops, tv’s maken gebruik van RGB. Door de kleuren te combineren kan het scherm je alle kleuren van de regenboog laten zien.

RGB wordt opgebouwd uit de drie kleuren met een totale waarde van 255 per kleur. Wanneer alle kleuren op 255 staat krijg je de kleur wit. Besef wel, wit is geen kleur (zal ik een andere keer uitleggen).

Als voorbeeld neem ik oranje. Oranje in RGB is 247/148/29. Dat betekent:

Rood heeft de waarde 247
Groen heeft de waarde 148
Blauw heeft de waarde 29

HTML

De onlinewereld speelt zich af op beeldschermen. Daarom wordt er in de onlinewereld gebruik gemaakt van RGB kleuren. Maar omdat we nu met computercode te maken hebben wordt dit anders weergegeven dan RGB.

Wanneer je de kleurcode wilt weten van jouw huisstijl omdat je deze wil invoeren in je website dan stap je over naar de hexadecimale waarde, oftewel HTML-kleurcode. Dit is de verhouding tussen rood, groen en blauw en is opgebouwd uit zes cijfers en getallen. Neem ons voorbeeldkleur oranje, dat is dan #F7941D. De eerste twee tekens na de hashtag staan voor het percentage rood, de middelste twee voor het percentage groen en de laatste twee voor het percentage blauw. Maar vergeet niet de # toe te voegen anders betekent de code niks en kan je computerprogramma het niet lezen.

Een heel belangrijk factor is dat RGB en HTML-kleuren NIET geschikt zijn voor drukwerk. Dit omdat je printer gebruik maakt van 4 kleuren – CMYK. En, doordat er geen licht wordt toegevoegd kunnen de vele felle kleuren niet nagebootst worden

CMYK

Dus wat is CMYK. Je zag het hiervoor al genoemd worden. CMYK kan je dus gebruiken voor drukwerk en wordt ook wel full colour genoemd. CMYK staat voor Cyan, Magenta, Yellow en Key (black). Het zwart wordt gebruikt om met minder inkt mooie donkere kleuren te maken.

Wanneer je een RGB-afbeelding wilt afdrukken dan moet je deze eerst omzetten naar CMYK. Alleen wat je vaak al gaat zien is dat zodra je de afbeelding van RGB omzet naar CMYK dat er dan een klein kleurverschil ontstaat. RGB-kleuren die omgezet worden naar CMYK worden vaak een beetje flets wanneer ze afgedrukt worden. Waarom? Omdat er geen licht wordt toegevoegd om de helderheid van de kleur na te bootsen. Wanneer je dit toch heel belangrijk vindt dan zal je het beeld moeten omzetten in Photoshop en er een bewerkingsslag op uitvoeren. Al geef ik toe dat de technologie tegenwoordig hier al een vrij goede vertaling van kan maken dat je geen duur ingewikkeld fotobewerkingsprogramma meer voor nodig hebt zoals ik tijdens mijn studie heb geleerd.

De waarde van een CMYK-kleur wordt opgebouwd uit een percentage per kleur. Iedere kleur kan 100% worden ingezet. En de combinatie van deze percentage zijn dus de waarde van de kleur die je zoekt. We nemen weer ons voorbeeld oranje. Oranje is opgebouwd uit 0/50/100/0 oftewel,

Cyaan 0%
Magenta 50%
Yellow 100%
Zwart (Key) 0%

Pantone (PMS)

En dan is er nog het Pantone kleursysteem. Deze kleuren kom je niet in het dagelijk leven tegen maar zijn onmisbaar voor ontwerpers in de grafische wereld, textiel (fashion) en andere industriële vakgebieden. De meeste mensen zullen denken aan RAL maar dat is weer iets heel anders wat je bij drukwerk nooit tegen zal komen. Die mag je dus ook gelijk vergeten.

PMS kleuren (pantone matching system) zorgt er voor dat alle kleuren altijd exact hetzelfde zijn. In tegenstelling tot RGB en CMYK waar je andere kleuren maakt door kleuren te combineren wordt er bij PMS gebruikt gemaakt van losse inkten per kleur. Het geweldige aan PMS-kleuren is dat ze wereldwijd worden gebruikt waardoor je overal ter wereld gegarandeerd dezelfde kleuren krijgt. In ons voorbeeld heeft onze kleur Oranje dus de waarde PMS 021.

PMS kleuren worden vaak ingezet wanneer je maar 1 of 2 kleuren wilt drukken. Bijvoorbeeld op een relatiegeschenk. Dat is goedkoper dan 4 kleurendruk oftewel CMYK. Tegenwoordig is het drukken in vier kleuren (zeg maar full colour – dus CMYK) een stuk goedkoper dan een aantal jaar geleden waardoor PMS nu voornamelijk wordt gebruikt als 5e kleur.

Vijfde kleur? Maar een printer heeft toch maar vier kleuren?

Ja een printer wel, maar een grote pers die je terugvindt in een drukkerij kan er zelfs 7 tegelijk gebruiken. De extra bakken worden vaak gebruikt om een bepaalde kleur extra kracht te geven. Of je hebt zo een aparte huisstijl kleur dat je deze graag in PMS mee drukt. Maar ook goud en zilver of andere metallic kleuren worden vaak als extra kleur mee gedrukt en dan ga je altijd voor een PMS-kleur.

Maar hoe zorg je ervoor dat je gekozen huisstijl kleur op alle uitingen hetzelfde oogt?

Pantone kleuren worden altijd door je ontwerper gekozen. Zij kijkt namelijk goed naar de vertaling van de kleur naar o.a. RGB en CMYK zodat je huisstijl op alle formats zoveel mogelijk op elkaar lijken en dus zo min mogelijk afwijken. Doe je dit niet? Dan zal je zien dat je prachtige neon groen op je beeldscherm er op papier als donkergroen uit komt, en dat wil je toch niet? Tevens wordt er bij het selecteren van een PMS-kleur ook rekening gehouden met de ondergrond, dus of het papier coated of uncoated is. Dit wordt dan aangeduidt met een U of C achter de kleurcode (bv. PMS 021 C / PMS 021 U). Staat er geen letter achter dan zal de drukker deze zelf instellen afhankelijk van het papiersoort dat hij gebruikt.

Wanneer ik een logo ontwerp of een huisstijl kleur selecteer pak ik als eerste mijn Pantone waaier. Ik kies dan meestal voor de Pantone Colour Bridge waaier omdat deze niet alleen PMS laat zien maar ook gelijk de vertaling naar CMYK. Ik kan dan gelijk zien hoe het er op papier uit komt te zien en of het erg veel afwijkt. Wijkt het af? Dan kies ik meestal een andere kleur die beter uitkomt. Daarnaast laat deze waaier ook de vertaling zien voor RGB en HTML (de hexa waarde) zodat ik ook gelijk weet welke waardes ik moet invoeren bij het bouwen van de website. Al deze kleuren komen weer terug in je huisstijl handboek zodat je altijd de juiste kleurcodes bij de hand hebt.

Samengevat?

RGB wordt gebruikt voor beeldschermen zoals je telefoon en computerscherm.
CMYK vind je terug in je printer en dus op papier.
Pantone kleuren zijn kleuren met een vaste waarde die overal gelijk zijn.

Lees tip!

Ben jij van plan om een logo en huisstijl te laten ontwerpen? Lees dan het artikel ‘Hoe belangrijk is de juiste kleur in je logo’.
Voorbeelden van andere logo’s die ik heb gemaakt.

Benieuwd naar de juiste kleurwaardes van jouw huisstijl en of deze allemaal op elkaar aansluiten?

Boek de Style Scan en ik kijk graag met je mee.