# Split-complementaire kleuren: contrast met minder clash

[Canonical HTML page](https://gradiently.design/nl/guide/split-complementary-colors)

Een complementair paar is luid en moeilijk in balans te brengen. Splits het tegenovergestelde in tweeën en je houdt bijna al het contrast terwijl de kleuren niet meer vechten. Zo werkt het, met paletten om te kopiëren.

## The short version

- Split-complementaire kleuren zijn een basiskleur plus de twee kleuren die aan weerszijden van zijn complement op het kleurenwiel liggen.
- Op een wiel van 360 graden liggen de twee partners ongeveer 150 en 210 graden van de basis, zo’n 30 graden aan weerszijden van het exacte tegenovergestelde.
- Het schema behoudt sterk contrast maar clasht minder dan een gewoon complementair paar, omdat geen twee kleuren exact tegenover elkaar liggen.
- Het werkt het best als de basiskleur domineert en de twee gesplitste kleuren als kleinere accenten worden gebruikt.
- Schilderswielen en schermwielen plaatsen complementen anders, dus dezelfde basis kan iets verschillende split-paletten geven.

**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](https://gradiently.design/nl/guide/color-wheel) 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. **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. **Zoek het complement** Tel er 180 graden bij op. Het complement van turquoise is een koraalrood op ongeveer 355 graden.
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. **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.

- Turquoise basis: #188b81
- Orchideeroze: #e052a5
- Abrikoos: #f58a3d
- Diep turquoise: #173633
- Warm papier: #f6f0ea

Het uitgewerkte voorbeeld: turquoise met roze en abrikoos, plus een donkerder turquoise en een neutrale kleur voor tekst en ruimte.

## 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](https://gradiently.design/nl/guide/complementary-colors) 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.

| Schema | Kleuren | Contrast | Balans |
| --- | --- | --- | --- |
| Complementair | 2, exact tegenover elkaar | Hoogst | Moeilijk |
| Split-complementair | 3, basis plus twee bijna-tegenpolen | Hoog | Gemiddeld |
| [Triadisch](https://gradiently.design/nl/guide/triadic-colors) | 3, gelijkmatig verdeeld op 120 graden | Hoog | Gemiddeld tot moeilijk |
| [Analoog](https://gradiently.design/nl/guide/analogous-colors) | 3, naast elkaar | Laag | Makkelijk |

Split-complementair zit tussen de rust van analoog en het drama van complementair.

## 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.

| Basis | Hex van basis | Split-partners | Voelt als |
| --- | --- | --- | --- |
| Turquoise | `#188b81` | `#e052a5` orchidee, `#f58a3d` abrikoos | Tropisch, modern, levendig |
| Violet | `#6629a3` | `#f5e63d` citroen, `#3fa648` blad | Speels, creatief, gedurfd |
| Kobaltblauw | `#1b4f98` | `#e45e44` vermiljoen, `#f5d63d` zonnebloem | Zelfverzekerd, sportief, klassiek |
| Karmijn | `#c32230` | `#318160` jade, `#2970a3` hemelsblauw | Feestelijk, geaard, rijk |
| Bosgroen | `#2a6f41` | `#ab5eba` orchidee, `#e4677c` roos | Botanisch, romantisch, fris |

Kopieer de codes rechtstreeks in je tool. Gebruik de basis voor het grootste deel van het vlak.

- Turquoiseschema: de twee partners: `linear-gradient(135deg, #e052a5 0%, #f58a3d 100%)`
- Kobaltschema: de twee partners: `linear-gradient(135deg, #e45e44 0%, #f5d63d 100%)`
- Turquoise basis als ondergrond: `radial-gradient(circle at 75% 25%, #188b81 0%, #173633 60%, #0b1a19 100%)`
- Kobalt basis als ondergrond: `radial-gradient(circle at 25% 25%, #2970a3 0%, #1b4f98 45%, #0c1f3d 100%)`

De twee split-partners zijn buren, dus ze lopen schoon in elkaar over. De basis rechtstreeks in een partner laten lopen steekt het wiel over en wordt modderig, dus houd de basis als eigen ondergrond.

## 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](https://gradiently.design/nl/guide/60-30-10-rule) 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.

Een staande post voor een zomermenu op een diepturquoise achtergrond met roze en abrikoosaccenten

Een diepe turquoise ondergrond doet het meeste werk; roze en abrikoos zijn gereserveerd voor de woorden en één accent.

### Vermijd

- Alle drie de tinten op volle verzadiging en gelijke oppervlakte
- Lopende tekst in de ene partnerkleur bovenop de andere
- Eén verloop dat van basis naar partner over het wiel loopt
- Een vierde felle tint erbovenop zetten

### Doe

- Eén dominante basis, vaak verdiept of gedempt
- Partners met verschillende helderheid, zodat er één leidt
- Een neutrale kleur voor tekst en ademruimte
- Check het contrast waar woorden staan

## 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.

```css
: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%);
}
```

Verander `--h` en het hele split-complementaire schema beweegt mee. Meer over dit model in [tint, verzadiging en helderheid](https://gradiently.design/nl/guide/hue-saturation-brightness).

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.

## FAQ

### Wat zijn split-complementaire kleuren?

Een basiskleur plus de twee kleuren aan weerszijden van zijn complement op het kleurenwiel. Voor blauw zijn dat roodoranje en geeloranje.

### Hoe vind je split-complementaire kleuren?

Zoek het complement van de basiskleur door 180 graden bij zijn tint op te tellen en neem dan de tinten ongeveer 30 graden aan weerszijden ervan.

### Is split-complementair beter dan complementair?

Het is makkelijker in balans te brengen. Je behoudt het meeste contrast, maar de kleuren clashen minder omdat geen enkele een exacte tegenpool is.

### Wat is het split-complementair van rood?

Op het schilderswiel geelgroen en blauwgroen. Op een HSL-schermwiel zijn de partners van rood een groencyaan en een blauwcyaan, rond 150 en 210 graden.

### Hoeveel kleuren zitten er in een split-complementair schema?

Drie tinten, hoewel de meeste echte paletten een donkere en een lichte neutrale kleur toevoegen voor tekst en ruimte.