De korte versie
- Complementaire kleuren zijn paren die recht tegenover elkaar op het kleurenwiel staan, zoals blauw en oranje.
- Naast elkaar op volle sterkte en met vergelijkbare lichtheid lijken complementaire kleuren aan hun gedeelde rand te trillen.
- De betrouwbaarste manier om complementen te gebruiken is er één te laten domineren en de ander als klein accent te gebruiken.
- De lichtheid of verzadiging van één kleur in het paar veranderen behoudt het contrast en haalt de botsing weg.
- Een rechte overgang tussen twee complementen wordt in het midden vaak grijs, wat een middenkleur of OKLCH-interpolatie oplost.
Op deze pagina
Complementaire kleuren zijn twee tinten die recht tegenover elkaar op het kleurenwiel staan, zoals blauw en oranje, rood en groen, of geel en violet. Elk laat de ander intenser lijken, en daarom geven complementaire paren het sterkste kleurcontrast dat er is. Zorgvuldig gebruikt maakt dat contrast één element onmogelijk te missen. Gelijk en op volle sterkte gebruikt maakt het een ontwerp onprettig om naar te kijken.
Welke paren complementen zijn hangt af van het wiel. Het wiel van de schilder combineert blauw met oranje; het schermwiel blauw met geel. De gids over het kleurenwiel legt het verschil uit. De paren hieronder zijn de paren die ontwerpers het vaakst gebruiken.
Complementaire kleurparen, met codes
| Paar | Kleur A | Kleur B | Voelt |
|---|---|---|---|
| Blauw en oranje | #1d4ed8 | #f97316 | Energiek, sportief, helder |
| Marine en goud | #1e3a8a | #d4a017 | Klassiek, gevestigd |
| Rood en groen | #b91c1c | #15803d | Feestelijk, natuurlijk, luid |
| Violet en geel | #6d28d9 | #facc15 | Speels, elektrisch |
| Turquoise en koraal | #0f766e | #fb7185 | Fris, warm, modern |
| Pruim en salie | #581c87 | #a3b18a | Gedempt, redactioneel |
Waarom complementaire kleuren trillen
Zet twee complementen van vergelijkbare lichtheid en volle verzadiging naast elkaar en de rand ertussen lijkt te flikkeren. Je ogen kunnen niet bepalen waar de een ophoudt. Het effect is het sterkst bij rood en groen of blauw en oranje van gelijke intensiteit, en het maakt tekst in de ene kleur op de andere heel moeilijk te lezen.
De oplossing is bijna nooit de tinten te veranderen. Maak er één veel donkerder of lichter, of veel minder verzadigd. Het paar blijft complementair, maar de rand vecht niet meer. Dit lost ook leesbaarheid op, want tekst heeft meer lichtheidscontrast nodig dan tintcontrast; zie kleurcontrast.
Complementaire kleuren gebruiken: één leidt, één accentueert
De betrouwbaarste aanpak is de ene kleur het grootste deel van de ruimte te geven en de andere een kleine, belangrijke taak: een knop, een prijs, één woord, een sticker. Het accent trekt het oog omdat het het enige van zijn soort is. Half om half verdeelt de aandacht daarentegen en ziet er zelden gepland uit.
linear-gradient(90deg, #0f2a5c 0%, #0f2a5c 88%, #f97316 88%, #f97316 100%)- Dominante kleur: achtergronden, grote vormen, het grootste deel van het oppervlak. Meestal de donkerste of rustigste van het paar.
- Accentkleur: oproepen tot actie, highlights, één belangrijk getal. Meestal de helderste.
- Neutrale tinten: bijna wit, bijna zwart of een warm grijs om beide ruimte te geven. Weinig goede complementaire ontwerpen bestaan uit slechts twee kleuren.
- Verhoudingsrichtlijn: de 60-30-10-regel is een nuttig beginpunt, met het complement als de 10.
Complementaire kleurverlopen zonder grijs midden
Meng twee complementen direct en het middelpunt wordt grijs of bruin. In de sRGB-kleurruimte die de meeste tools gebruiken, middelen de rood-, groen- en blauwwaarden van twee tegenpolen tot iets dat dicht bij neutraal ligt. Het is een van de meest voorkomende kleurverloopfouten.
De twee sterkste oplossingen zijn een middenstop in een tint tussen het paar en interpolatie in OKLCH, dat om het kleurenwiel heen beweegt in plaats van er dwars doorheen te snijden. Modderige kleurverlopen en OKLCH-kleurverlopen in CSS leggen beide in detail uit.
Waar complementaire paletten het best werken
Complementen passen bij werk dat snel opgemerkt en van een afstand gelezen moet worden. Ze passen minder bij lang lezen, rustige interieurs of alles wat stil moet voelen, waar analoge kleuren beter werken.
- Oproepen tot actie. Een warme knop op een koele pagina, of andersom, is het klassieke gebruik. Je vindt hem zonder te zoeken.
- Sport en evenementen. Teamtenues, posters en tickets gebruiken tegenovergestelde kleuren omdat ze van over een stadion of een straat leesbaar zijn.
- Eten en winkels. Foodstyling zet warme gerechten vaak tegen koele borden of achtergronden zodat ze naar voren komen; een actiesticker in het complement van de verpakking valt op in een schap.
- Data en kaarten. Twee tegenovergestelde tinten tonen twee kanten van een vergelijking duidelijk, zolang labels ze ondersteunen voor lezers die kleur anders zien.
- Portretten en productfoto’s. Een achtergrond in het complement van de hoofdkleur van het onderwerp scheidt het zonder harde contour.
Fouten met complementaire kleuren die je vermijdt
Vermijden
- Gelijke hoeveelheden van beide kleuren
- Tekst in de ene complement op een achtergrond van de andere
- Beide kleuren op volle verzadiging en met vergelijkbare lichtheid
- Een rechte overgang tussen het paar
Doen
- Eén dominante kleur en één klein accent
- Tekst in een bijna witte of bijna zwarte neutrale tint
- De ene kleur dieper, bleker of rustiger dan de andere
- Een middenkleur of OKLCH-overgang
Voelt een complementair paar te gespannen, ook als het in balans is, probeer dan split-complementair: één tint plus de twee aan weerszijden van zijn tegenovergestelde. Het behoudt de energie en verzacht de botsing. Triadische en split-complementaire paletten laat zien hoe.
Vragen die mensen stellen
Wat zijn complementaire kleuren?
Complementaire kleuren zijn twee tinten tegenover elkaar op het kleurenwiel, zoals blauw en oranje of rood en groen. Samen geven ze het sterkste kleurcontrast.
Wat is de complementaire kleur van blauw?
Op het traditionele wiel van de schilder is het oranje. Op het RGB-schermwiel van digitale tools is het geel.
Waarom lijken complementaire kleuren te trillen?
Als twee tegenpolen met vergelijkbare lichtheid en volle verzadiging elkaar raken, kan het oog de rand niet vinden. Eén kleur donkerder, lichter of minder verzadigd maken stopt het.
Hoe maak ik een kleurverloop tussen complementaire kleuren?
Voeg een middenstop toe in een tint tussen beide, of interpoleer in OKLCH. Een rechte sRGB-overgang tussen complementen wordt meestal grijs in het midden.
Hoeveel van elke complementaire kleur moet ik gebruiken?
Laat er één domineren en gebruik de ander als klein accent, bijvoorbeeld ongeveer 90% tegen 10%, met neutrale tinten om beide ruimte te geven.
Geschreven door Gradiently
Het team achter Gradiently, een ontwerptool rond Marks: levende kleurverlopen die alles wat je ontwerpt op jou laten lijken.
Bekijk ons profiel
