Split-complementaire kleuren: contrast met minder clash

Split-complementaire kleuren zijn drie kleuren: een basis plus de twee kleuren aan weerszijden van het complement van de basis. In plaats van blauw te combineren met zijn directe tegenovergestelde, oranje, combineer je blauw met roodoranje en geeloranje. Je houdt het contrast tussen warm en koel dat complementaire schema’s levendig maakt, maar omdat niets exact tegenover iets anders ligt, is het resultaat prettiger voor het oog en veel makkelijker in balans te brengen in een echt ontwerp.

Hoe split-complementaire kleuren werken

Zie het kleurenwiel als een klok. Je basiskleur staat op twaalf. Zijn complement staat op zes. Een split-complementair schema slaat zes over en neemt vijf en zeven. In graden betekent dat tinten op ongeveer 150 en 210 graden van de basis.

1. 1

   Kies een basistint

   Begin met de kleur waar je ontwerp echt over gaat: de merkkleur, het product, de stemming. Zeg turquoise, op een tint van 175 graden.

2. 2

   Zoek het complement

   Tel er 180 graden bij op. Het complement van turquoise is een koraalrood op ongeveer 355 graden.

3. 3

   Stap 30 graden aan elke kant

   Ga vanaf het complement 30 graden elke kant op: ongeveer 325 graden (roze) en 25 graden (oranje).

4. 4

   Stel helderheid en verzadiging af

   De tinten leggen het schema vast, maar jij kiest hoe licht, diep of gedempt elke kleur is. Daar begint het palet op het jouwe te lijken.

Waarom split-complementair minder clasht

Exacte tegenpolen, zoals rood en cyaan of blauw en oranje, strijden met gelijke kracht om aandacht. Naast elkaar op volle verzadiging lijken ze te trillen, en gemengd worden ze grijs. Complementaire kleuren zijn daarom krachtig, maar laten weinig ruimte voor fouten.

In een split-schema liggen de twee partners 60 graden van elkaar, wat ze nauwe verwanten maakt. Ze ondersteunen elkaar in plaats van te vechten en samen brengen ze de basis in balans. Je krijgt contrast met één natuurlijke bondgenoot aan de warme of de koele kant, afhankelijk van waar je begint.

Voorbeelden van split-complementaire paletten

Vijf paletten gebouwd met de stappen hierboven. De eerste kleur in elke rij is de basis; de andere twee zijn de split-partners. Helderheid en verzadiging zijn zo afgesteld dat elke set bruikbaar is voor echt werk, niet alleen theoretisch correct.

Een split-complementair schema in een ontwerp gebruiken

Drie even luide kleuren laten een ontwerp op een vlag lijken. Geef ze in plaats daarvan ongelijke taken. De 60-30-10-regel is een goed uitgangspunt: de basis beslaat het grootste deel van het vlak, één partner speelt een ondersteunende rol en de ander verschijnt alleen waar je het oog het eerst heen wilt sturen.

Dempen is je andere hefboom. Maak de basis donkerder of grijzer tot hij zich bijna als neutrale kleur gedraagt, en de twee partners lijken ineens bedoeld in plaats van luid. Zo voelen split-schema’s uiteindelijk verfijnd: een diep turquoise, een stoffig roze en een zacht abrikoos gebruiken dezelfde tinten als de felle versie, maar lezen als een boetiekhotel in plaats van een strandbal.

Schilderswiel of schermwiel

Er zijn twee gangbare kleurenwielen. Het traditionele schilderswiel gebruikt rood, geel en blauw als primaire kleuren, dus het tegenovergestelde van rood is groen. Schermen gebruiken rood, groen en blauw licht, dus op een HSL-wiel is het tegenovergestelde van rood cyaan. Beide geven geldige schema’s; gebruik gewoon consequent één wiel. Werk je in CSS, dan is het schermwiel wat hsl() gebruikt, dus je kunt een schema genereren met een beetje rekenwerk.

:root {
  --h: 175; /* base hue in degrees */
  --base: hsl(var(--h) 70% 32%);
  --split-a: hsl(calc(var(--h) + 150) 70% 60%);
  --split-b: hsl(calc(var(--h) + 210) 90% 60%);
}

Om een palet op echte formaten aan het werk te zien, kan de Designer in Gradiently een post, story en banner in één keer opmaken, zodat je de verhoudingen op elk formaat kunt beoordelen in plaats van op een stalenkaart.