De kleurencirkel en welke kleuren bij elkaar passen

Isaac Newton tekende in 1704 een cirkel met zeven kleuren. De cirkel uit de tekenles heeft er 12. Recht tegenover elkaar staan kleuren die elkaar feller maken, zoals rood en groen. Daar gaat het vaak mis. Je kent de flyer van de sportclub met rode letters op een groen vlak. Daardoor kan niemand de datum lezen. Hoe goed je letters ziet, meet je met een getal van 1 tot 21. Rood op groen haalt op een scherm volgens onze berekening 2,91. Voor gewone tekst vraagt het W3C minstens 4,5. Die organisatie beheert de regels voor het web. Kies je kleuren dus met de cirkel, en meet daarna of je tekst te lezen is. Meer over kleur in reclame en huisstijl staat in het kennisgebied Marketing.

Wat je op de kleurencirkel ziet

Een kleurencirkel zet kleuren in een kring. Zo zie je welke kleuren bij elkaar horen. De klassieke cirkel telt 12 kleuren: drie primaire, drie secundaire en zes tertiaire.

Primaire kleuren zijn de kleuren waarmee je begint. Op de cirkel van de schilder zijn dat rood, geel en blauw. Secundaire kleuren krijg je door twee primaire kleuren te mengen. Zo staat het in het lesmateriaal van het Getty Museum, een kunstmuseum in Los Angeles. Rood en geel geven oranje, geel en blauw geven groen, en blauw en rood geven paars. Tertiaire kleuren zijn de tussenstappen. Je mengt daarvoor een primaire kleur met de secundaire kleur ernaast.

Van drie naar 12 kleuren

In de tabel hieronder staat welke kleuren in elke groep vallen en hoe je ze maakt. De namen van de tertiaire kleuren zeggen zelf al waaruit ze bestaan.

Loop je de kring rond, dan kom je de kleuren in een vaste volgorde tegen. Tussen twee kleuren staat steeds de kleur die je uit die twee mengt. Na geel komt dus geeloranje en dan oranje. Zo ga je verder langs rood, paars, blauw en groen, tot je terug bent bij geel.

Elk stelsel heeft eigen primaire kleuren

Rood, geel en blauw zijn niet overal de primaire kleuren. Welke drie het zijn, hangt af van wat je mengt: verf, licht of inkt. Dat verschil raakt snel zoek. Dan klopt de cirkel uit de verfdoos niet meer zodra je achter een scherm zit.

Een scherm maakt zelf licht. Daarom zijn de primaire kleuren daar rood, groen en blauw. Alle drie samen geven wit. Dat heet additief mengen: je telt licht bij elkaar op. Zo staat het in HyperPhysics. Dat is een site over natuurkunde van Georgia State University in de Verenigde Staten. De afkorting RGB komt van de Engelse woorden red, green en blue.

Inkt en verf werken juist andersom. Elke kleurstof slikt een deel van het licht dat erop valt. Wat overblijft, zie jij. Dat heet subtractief mengen: je trekt licht af. Daarbij horen meestal drie andere kleuren: cyaan, magenta en geel. Cyaan is een helder groenblauw en magenta een fel roze. Je kent ze van de inkt in een printer.

De drie stelsels naast elkaar

De tabel hieronder zet de drie stelsels naast elkaar. Je ziet met welke kleuren je begint, wat ze samen geven en waar je het stelsel tegenkomt.

Verf en inkt nemen allebei licht weg. Toch horen er twee rijtjes primaire kleuren bij. Rood, geel en blauw is de indeling die kinderen leren. Dat schrijven de Smithsonian Libraries, de bibliotheken van de Amerikaanse rijksmusea. Wie met kleurstof rekent, neemt meestal cyaan, magenta en geel. Die drie vind je ook in ons artikel over kleuren en hun toepassingen. Voor de tekenles is rood, geel en blauw goed genoeg. Wie een logo laat drukken en het ook op een website zet, heeft de andere twee stelsels nodig.

Complementaire kleuren staan tegenover elkaar

Complementaire kleuren zijn twee kleuren die recht tegenover elkaar op de cirkel staan. Bij de schilder zijn dat rood en groen, geel en paars, en blauw en oranje. Naast elkaar lijken ze feller dan alleen. Het Van Gogh Museum in Amsterdam noemt dat het maximale kleurcontrast.

Vincent van Gogh las erover in boeken en ging ermee werken. In zijn Zelfportret met grijze vilthoed zette hij blauw en oranje naast elkaar in de achtergrond. In de baard en de ogen deed hij hetzelfde met rood en groen. ‘De kleuren versterken elkaars werking’, schrijft het museum bij dat schilderij.

Meng je twee van zulke kleuren als verf, dan doven ze elkaar uit tot bruin. Dat staat in het lesmateriaal van het Getty Museum. Bij licht gaat het echter anders. Twee kleuren licht heten complementair als ze samen wit geven.

Tegenover blauw staat niet overal oranje

Welke kleur tegenover een andere staat, verschilt per stelsel. In de tabel hieronder zie je het verschil tussen de cirkel van de schilder en het licht van een scherm.

Een programma dat met de kleuren van een scherm rekent, werkt met licht. De kleur recht tegenover een andere heet ook wel de tegenkleur. Vraag je in zo’n programma de tegenkleur van blauw op, dan krijg je geel en geen oranje. Dat is geen fout, want het programma werkt met een andere cirkel dan die uit de verfdoos.

Welke kleuren bij elkaar passen

De vuistregel is: kleuren passen bij elkaar als ze op de cirkel een vaste afstand van elkaar hebben. Ontwerpers gebruiken daar een paar vaste combinaties voor. Je vindt ze door stappen te tellen op de cirkel van 12 kleuren.

In de tabel hieronder staan vier combinaties. Elke combinatie begint bij blauw. De laatste kolom geeft onze eigen indruk van het effect.

Analoog betekent hier: verwant. De kleuren liggen naast elkaar en lijken op elkaar. Een triade is een drietal op gelijke afstand. De drie primaire kleuren vormen zelf zo’n drietal. Piet Mondriaan bouwde er zijn bekendste schilderijen mee.

Ons oordeel: begin met één kleur en kies er hoogstens twee bij. De kleur recht ertegenover werkt het best in een kleine hoeveelheid, zoals één knop of één streep. Vullen twee felle kleuren elk de helft van het vlak, dan vechten ze om aandacht. Welk gevoel een kleur oproept, staat in ons artikel over kleurenpsychologie en de betekenis van kleuren.

Wie de kleurencirkel bedacht

De eerste cirkel in dit verhaal is van Isaac Newton. De cirkel van 12 uit de tekenles vind je ruim twee eeuwen later bij Johannes Itten. Newton deed in de jaren 1660 proeven met zonlicht en een prisma. Een prisma is een geslepen stuk glas dat wit licht in kleuren splitst. In 1704 beschreef hij in Opticks een cirkel in zeven delen. De kleuren waren rood, oranje, geel, groen, blauw, indigo en violet. De breedte van elk deel leidde hij af van de zeven tonen van een toonladder. De Universiteit van Oxford zet zijn teksten online in The Newton Project.

De tabel hieronder laat zien wie vanaf Newton iets aan de cirkel toevoegde.

Itten en de cirkel van 12

Itten gaf les aan het Bauhaus, de kunstschool in het Duitse Weimar. In 1921 maakte hij voor zijn lessen een ster van kleuren. Dat schrijft het Getty Research Institute. Dat is het onderzoeksinstituut van de Getty Trust, de stichting achter het Getty Museum. Voor die ster nam hij de bol met kleuren van de schilder Philipp Otto Runge uit 1810. Die vouwde hij plat. In de ster zit de klassieke cirkel van 12 kleuren. Zijn boek The Art of Color verscheen in 1961 in het Engels.

De kleurcontrasten van Itten

Itten onderscheidde zeven soorten contrast tussen kleuren. Dat schrijft het Getty Research Institute. Hieronder staan er drie als voorbeeld. De uitleg erbij is in onze eigen woorden.

Het eerste is licht tegen donker: een lichte kleur naast een donkere. De ster van Itten liet dat zien, met wit in het midden en zwart in de punten. Het tweede is koud tegen warm. Blauwachtige kleuren staan dan naast roodachtige en gele. Het derde is complementair. Dat zijn twee kleuren die tegenover elkaar op de cirkel staan, zoals blauw en oranje.

Het nuttigste inzicht over contrast komt wat ons betreft van een scheikundige. De Fransman Michel Eugène Chevreul schreef er in 1839 een boek over. Een fabriek van stoffen huurde hem in, want de geverfde stoffen leken dof. Het lag niet aan de verf, merkte hij. Het lag aan de kleuren die ernaast lagen. Twee kleuren naast elkaar veranderen elkaar voor je oog. Dat heet simultaan contrast. Dezelfde grijze letter ziet er op een oranje vlak dus anders uit dan op een blauw vlak. Bekijk een kleur daarom altijd op de plek waar hij komt, en niet los op een kaartje met kleuren.

De kleurencirkel in een logo of huisstijl

Voor een logo of huisstijl kies je met de cirkel eerst één kleur als basis. Daar kies je één of twee kleuren bij, bijvoorbeeld voor een knop of een kader. Neem een kleur ernaast als je rust wilt. Neem de kleur ertegenover als iets moet opvallen.

Laat elke kleur daarna twee keer vastleggen. Je hebt een code in RGB nodig voor het scherm en een aparte code voor de drukker. Een scherm maakt immers licht en papier kaatst licht terug. Vraag je ontwerper daarom om beide codes en laat eerst een proefafdruk maken. Wat er verder bij komt kijken, lees je in ons artikel over een huisstijl laten ontwerpen.

Voor gewone tekst op een website geldt een eis voor contrast. Die lees je hieronder. Voor de letters in je logo zelf geldt die eis niet. Dat staat in de richtlijn van het W3C.

Contrast op een webpagina meet je

Op een webpagina moet gewone tekst een contrast van minstens 4,5 op 1 hebben met de achtergrond. Dat getal zegt hoeveel lichter de ene kleur is dan de andere. Het loopt van 1 op 1 voor twee gelijke kleuren tot 21 op 1 voor zwart op wit. De eis staat in de WCAG, de richtlijnen van het W3C voor websites die iedereen kan gebruiken.

Voor grote tekst is 3 op 1 genoeg. Groot is volgens de richtlijn een letter van minstens 18 punten, of 14 punten als hij vet staat. Bij veel letters is dat ruwweg anderhalf keer de gewone grootte. Voor vette letters is het 1,2 keer. Ook knoppen, invulvelden en delen van een grafiek moeten 3 op 1 halen. De richtlijn kent drie niveaus: A, AA en AAA. De eis van 4,5 op 1 hoort bij AA. Niveau AAA is strenger en vraagt 7 op 1.

In Nederland moeten overheidsorganisaties voldoen aan de eisen van niveau A en AA. Dat schrijft DigiToegankelijk. Dat is een site van het ministerie van Binnenlandse Zaken. Sinds 28 juni 2025 geldt er ook een Europese wet, de European Accessibility Act. Daardoor moeten veel producten en diensten van bedrijven ook aan zulke eisen voldoen. Verkoop je iets via je website, kijk dan bij DigiToegankelijk of dat voor jou geldt.

De kleuren van de cirkel als tekst

Wij rekenden uit hoe de felste kleuren van een scherm het doen als tekst. Dat deden we met de formule van het W3C. In de tabel hieronder staat per kleur het contrast op een witte en op een zwarte achtergrond. De code is de manier waarop je die kleur in een webpagina schrijft.

Van de zes kleuren halen op wit alleen blauw en paars de 4,5. Fel rood komt op 4,00. Dat is genoeg voor grote tekst en voor knoppen, maar niet voor gewone tekst. Gele letters op wit zie je met 1,07 bijna niet. Dit zijn wel de felste kleuren. Een donkerder rood of groen haalt de eis op wit daarentegen wel.

Tegenkleuren als tekst en achtergrond

Zet je twee tegenkleuren op elkaar, dan valt het ook tegen. Neem de drie paren van de schilder, met de codes uit de tabel hierboven. Rood op groen komt volgens onze berekening op 2,91 op 1. Blauw op oranje komt op 3,41 op 1. Alleen geel op paars haalt met 5,82 de eis voor gewone tekst. Op een scherm staat geel tegenover blauw. Dat paar haalt 8,00 op 1 en slaagt dus wel. Rood op cyaan blijft met 3,19 weer onder de grens. Zulke paren verschillen sterk van kleur, maar ze zijn vaak ongeveer even licht. En dat verschil in licht meet de formule.

Vertrouw bovendien niet op kleur alleen. Zet bij een rode foutmelding een woord of teken, want niet iedereen ziet het verschil. In ons artikel over kleurenblind zijn lees je hoeveel mensen rood en groen slecht uit elkaar houden.

Veelgestelde vragen over de kleurencirkel