pijl

RGB en CMYK de complete uitleg

website laten maken rbg-cmyk-complete-uitleg

Als grafisch ontwerper gebruik je kleur.

En je kent vast de termen CMYK en RGB. Of je hebt er tenmiste al wel eens van gehoord.

Daarom ben je natuurlijk hier.

Toch?

Wanneer je met kleur aan de slag gaat is het belangrijkste om te weten dit:

  • RGB gebruik je voor alles wat weergegeven wordt op een beeldscherm.
  • CMYK gebruik je voor drukwerk.
  • Deze kleuren zijn niet 100% gelijk aan elkaar.
     

RGB en CMYK zijn beide kleursystemen om kleuren te maken.

Wanneer je kleuren print of laat drukken worden er kleurpigmenten of kleurdeeltjes gebruikt.

Er zijn natuurlijk overeenkomsten, maar ook behoorlijk wat verschillen tussen CMYK en RGB.

In dit blog leg ik alle overeenkomsten en verschilllen uit en ik leer je hoe je makkelijk de juiste kleuren kan kiezen

Laten we beginnen bij het begin

Wat is RGB Wat is CMYKVerschillen CMYK en RGBOvereenkomsten CMYK en RGB

Wat is RGB?

Het RGB-kleursysteem is een kleurcodering.

Met de drie primaire kleuren (Rood, Groen en Blauw) worden andere kleuren digitaald gemengd.

Het systeem gaat uit van additieve kleurmenging

Door het menging van de verschillende kleuren licht kan een andere kleur ontstaan.
Wanneer Rood, Groen en Blauw samenvallen ontstaat wit.

Kleurcodering is een moeilijk woord voor met een set van cijfers en letters een kleur weergeven.

De hoeveelheid Rood, Groen en Blauw die nodig is om de mengkleur te verkrijgen, wordt uitgedrukt in een getal  tussen 0 en 255.

Voor kleuren op websites wordt vaak het hexadecimale stelsel gebruikt.
Hexadecimaal betekent 16-tallig.

Hierbij wordt niet zoals gebruikelijk, met tien cijfers wordt gewerkt, maar met zestien cijfers. De cijfers 0 t/m 9 worden daarom uitgebreid met A t/m F. En dan is daarin A, tien en F, vijftien.

Handig om te weten is dat #000000 zwart is en #FFFFFF is de code voor wit.

Wat is RGB Wat is CMYKVerschillen CMYK en RGBOvereenkomsten CMYK en RGB

Wat is CMYK?

Het CMYK-Kleursysteem is een systeem om met Cyaan, Magenta, Yellow, Key, een groot aantal kleuren te kunnen verkrijgen door subtractieve kleurmenging.

Subtractieve kleurmenging ontstaat doordat de ene kleur wit licht beter opneemt dan de andere.

De term subtractief komt uit het Latijn: subtrahere betekent "aftrekken", wat bij deze vorm van kleurmenging plaatsvindt. Er wordt begonnen met wit en daar worden primaire kleuren vanaf gehaald.
Dat is dus het tegenovergestelde dan de werking van RGB.

Dit systeem wordt vooral gebruikt bij het drukken van dingen zoals visitekaartjes of folders.

  • C staat voor cyaan;
  • M staat voor magenta;
  • Y staat voor yellow (geel);
  • K staat voor Key (zwart)
     

De CMYK-code voor een kleur wordt weergegeven door het dekkingspercentage van de vier inkten die nodig zijn om die kleur te verkrijgen.

Wat is RGB Wat is CMYKVerschillen CMYK en RGBOvereenkomsten CMYK en RGB

Verschillen tussen CMYK en RGB

  • RGB kleuren worden gemaakt met licht / CMYK Kleuren worden gemaakt met kleurpigmenten;
  • RGB wordt gemaakt uit drie kleuren licht / CMKY wordt opgebouwd uit vier kleuren pigmenten;
  • RGB gebruikt en zie je op beeldschermen / CMYK wordt gebruikt op papier of ander drukwerk;
  • met  RGB maak je maximaal 16.777.216 verschillende kleuren / Voor CMYK is het precieze aantal eigenlijk niet uit te rekenen;
  • RBG werkt op basis van additieve kleurmenging / CMYK werkt op basis van subtractieve kleurmenging.

 

Wat is RGB Wat is CMYKVerschillen CMYK en RGBOvereenkomsten CMYK en RGB

Overeenkomsten tussen CMYK en RGB

  • Het zijn beide systemen op kleuren in een code weer te geven.

 

Handige tips over het gebruik van RGB en CMYK

Nu je de basiskennis hebt van RGB en CMYK ga ik je bijpraten over de volgende onderwerpen

RGB omzetten naar CMYK

Wanneer je iets hebt ontworpen op de pc of laptop in de kleurcode RGB en je wil het laten afdrukken.
Dan moet je de RGB waarde omzetten naar de CMYK code. Dat kan met de software die jij gebruikt.

Maar ook online zijn er verschillende conversie tools beschikbaar.

Zelf gebruik ik trouwens Inkscape in combinatie met Scribus

RGB of CMYK kleur bepalen

Hoe bepaal je wat de kleur van een object is.
Ik doe dat altijd met de inspector in van de browser

zie het pipetje aan de rechterkant van deze afbeelding.

(windows: ctrl + shift + c)
(mac: cmd + shift + c)


 
Bekijk dit handige filmpje hoe je de colorpicker gebruikt.

CMYK Online Kleurenwaaier

Een kleurenwaaier zou ik online voor je kunnen maken. Maar de weergave van zo'n cmyk kleurenwaaier hangt zo sterk af van je beeldscherm dat je daar niets aan zou hebben.

Wat je nodig hebt, is gewoon zo'n ouderwetse kleurenwaaier.

Als je echt serieus wat wil maken voor andere mensen en dat wil laten drukken heb je er echt een nodig.

Geloof me.

Ik heb dat met vallen en opstaan geleerd.

Ik kocht er toen uiteindelijk één bij Drukwerkdeal

Je kijkt dan op die waaier welke kleur je wil gebruiken en dan stel je in je ontwerpprogramma deze kleur in.

Makkelijk toch?

Wat zijn complentaire kleuren? Complementaire kleurentoolWelke kleuren passen bij elkaar?

Wat zijn Complementaire kleuren

Complementaire kleuren staan tegenover elkaar in een kleurencirkel.

Handig bij het onthouden zijn, toevallig of niet het RGB- en CMKY-systeem

  • de complementaire aan Rood is Cyaan (RGB / CMYK)
  • de complementair aan Groen is Magenta (RGB / CMYK)
  • de complementair aan Blauw is Yellow (RGB / CMYK)
     

De complementaire kleuren hebben ook wat met elkaar te maken.

Je weet misschien wel dat een voorwerp de kleur die je ziet, terugkaatst als er wit licht op schijnt.
Moet je raden welke kleur hij dan opneemt.

Heel goed.

De complentaire kleur neemt hij dus op.

Dus een blauwe auto kaatst de kleur blauw terug en neemt het gele licht op.
Let op. Dit is dus alleen zo bij licht.

Je kan complementaire kleuren ook heel goed naast elkaar gebruiken in ontwerpen.

Deze kleuren versterken elkaar. Denk maar eens aan de groene blaadjes naast het rode vlees bij de slager.

Het rood lijkt daar roder en het groen groener.

Dit effect heet het complementair kleurcontrast.

Ik pas dit bijna altijd toe wanneer ik actieknoppen op de een website zet.
Aartjan van Erkel heeft het altijd over bananen trouwens.

Maar op een website over gele bananen zou dan de "banaan" weer paars moeten zijn...

Wat zijn complementaire kleuren? Complementaire kleurentoolWelke kleuren passen bij elkaar?

Complementaire kleurentool

Natuurlijk kan je mijn ahum mooie kleurencirkel even printen en naast je pc leggen.
Maar er zijn betere en handiger oplossingen.

Er zijn online vrij veel tooltjes beschikbaar die je kan gebruiken.
Ik deel even mijn favoriete complementaire kleuren tooltjes zodat jij ze ook kan gebruiken.

Ik gebruik zelf vaak colorhexa super fijn in z'n eenvoud.

 

Colorhexa geeft handig de RGB waarde op en de site laat in oogopslag complementaire kleuren zien, of kleurverlopen.

Ook handig dat er CMYK waardes worden weergegeven.

Daardoor kan je de kleuren op het scherm zo dicht mogelijk in de buurt laten komen van het eventuele drukwerk.

Een andere variant is paletton deze website is in de basis gelijk aan colorhexa, maar er is hier ook de handige mogelijkheid om de gekozen kleuren weer te geven in een soort demo website.

Zo krijg je meteen een beetje een indruk van de look-and-feel van de website.

Hier heb je meteen een indruk van hoe een website eruit zou kunnen zien

Tot slot.

Een laatste bekende is Adobe Kuler. Daar kun naast je eigen kleurenschema’s samenstellen ook populaire kleurenschema’s bekijken die door andere gebruikers zijn samengesteld.

Handig om inspiratie op te doen.

Wat zijn complementaire kleuren? Complementaire kleurentoolWelke kleuren passen bij elkaar?

Welke kleuren passen bij elkaar

Wanneer je kleuren zoekt die bij elkaar passen. Dan kan je het beste kijken naar de kleurencirkel.

De kleur die tegenover de basiskleur ligt in de kleurencirkel pas er vaak goed bij.

  • Primaire kleuren zijn rood geel en blauw;
  • Secundaire kleuren maak je door twee primaire kleuren te mengen;
  • Tertiaire kleuren zijn de kleuren die ontstaan door primaire en secundaire kleuren te mengen.

 

primaire kleuren

de primaire kleuren:
Rood, Blauw, Geel

secondaire kleuren

de secundaire kleuren: Oranje, Paars, Groen

tertiare kleuren

De terriare kleuren

Kleuren die in de kleurencirkel tegenover elkaar liggen passen meestal bij elkaar.

Ook "buurkleuren" in buitenste ring van kleuren matchen vaak prima.

Dan heb je ook nog een andere manier om passende kleuren te zoeken

Bij deze manier kijk je naar de drie kleuren die in de vorm van een driehoek tot elkaar staan in de kleurencirkel. Dit noem je een Triadic Kleurenschema.

Daarnaast is er natuurlijk ook zoiets als smaak.

... We spreken van vloekende kleuren als kleurcontrasten sterk opvallen. Zo’n contrast krijg je als je een koude kleur als azuurblauw naast bijvoorbeeld een warme rode kleur zet. Of we het wel of niet accepteren ...
Franca Treur in  NRC

Betekenis van Kleuren

Kleuren helpen om de identiteit van jouw bedrijf uit te dragen. Ik maakte al eens een handige poster met een overzicht van de betekenis van kleuren. Deze vind je hieronder de tabel met betekenissen.

Blauw

rust
vertrouwen
oprecht
zakelijk
fris

Rood

liefde
energie
gevaar
passie
macht

Zwart

chique
zeker
kracht
rouw
ernst

Groen

harmonie
samen
duurzaam
groei
balans

Geel

waarschuwing
zon
creatief
geluk
vrolijk

Wit

hoop
vrede
puur
onschuldig
eenvoud

Paars

gezond
spiritueel
ambitie
koninklijk
rijkdom

Oranje

positief
vertrouwen
innovatief
succes
kracht

Grijs

neutraal
zakelijk
saai
veilig
conservatief

Turquoise

spiritueel
vrouwelijk
bescherming
verfijnd

Roze

intuïtie
liefde
vrouwelijk
passie
speels
jong

Bruin

vertrouwen
natuur
aarde
rechtlijnig
behoudend

 

webdesign zwolle kleurenkiezenvooruwwebsiteoflogo


Laat een bericht achter - aantal berichten: 0



Ben jij de eerste die reageert?



Laat een bericht achter

naam
e-mail
website
bericht
Schrijf vijftien in cijfers: