# Tetradisch kleurenschema: vier kleuren in balans

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

Vier kleuren is de rijkste klassieke harmonie en de makkelijkste om fout te doen. Het geheim is niet de vier tinten kiezen, dat is rekenwerk, maar bepalen welke de leiding heeft.

## The short version

- Een tetradisch kleurenschema gebruikt vier tinten die als twee complementaire paren op het kleurenwiel liggen.
- De rechthoekversie combineert twee tinten op 60 graden afstand met hun twee tegenpolen; de vierkantversie verdeelt alle vier de tinten op 90 graden afstand.
- Tetradische paletten zijn rijk en gevarieerd maar lastig in balans te brengen, omdat vier tinten om aandacht strijden.
- Het schema werkt als één kleur domineert, een tweede ondersteunt en de andere twee als kleine accenten dienen.
- Enkele van de vier tinten dempen of donkerder maken laat een tetradisch palet verfijnd voelen in plaats van luid.

Een **tetradisch kleurenschema** bestaat uit vier tinten die twee complementaire paren op het kleurenwiel vormen. Verbind ze met lijnen en je tekent een rechthoek of een vierkant, vandaar dat de twee versies het rechthoek- en vierkantschema heten. Omdat het warme en koele kleuren aan beide kanten van het wiel bevat, is een tetradisch palet de rijkste van de klassieke harmonieën. Het is ook die het vaakst chaotisch oogt, tenzij je één kleur de leiding geeft en de andere drie op hun plek houdt.

## Tetradische schema’s: rechthoek en vierkant

Beide versies beginnen bij een basistint en voegen de complementaire toe, 180 graden verderop. Ze verschillen in waar het tweede paar zit.

| Versie | Tinten vanaf de basis | Karakter |
| --- | --- | --- |
| Rechthoek, of dubbel complementair | 0, 60, 180 en 240 graden | Twee nauwe buren en hun tegenpolen; makkelijker in balans te brengen |
| Vierkant | 0, 90, 180 en 270 graden | Perfect gelijke verdeling; het meest gevarieerd en het gewaagdst |

Rechthoekschema’s hebben aan elke kant een natuurlijk paar bondgenoten, daarom beginnen ontwerpers meestal daar.

- Kobalt: #1b3c7e
- Amethist: #9d59c0
- Goudsbloem: #f0b642
- Varen: #7dba5e

Een rechthoekschema: kobalt en amethist, 60 graden uit elkaar, tegenover goudsbloem en varen.

- Diep violet: #452277
- Koraalrood: #e25a66
- Limoenblad: #95c059
- Zeepetrol: #2e9e95

Een vierkantschema: vier tinten op 90 graden afstand, met het violet verdiept zodat het als ondergrond kan dienen.

## Zo bouw je een tetradisch kleurenschema

1. **Kies de basistint** Kies de kleur waar je merk of ontwerp van afhangt. Noteer de tint in graden, wat elke kleurkiezer met HSL geeft.
2. **Voeg de complementaire toe** Tel 180 graden op. Dat paar is de ruggengraat van het schema. [Complementaire kleuren](https://gradiently.design/nl/guide/complementary-colors) legt uit waarom tegenpolen werken.
3. **Kies rechthoek of vierkant** Tel voor een rechthoek 60 graden op bij de basis en bij de complementaire. Tel voor een vierkant 90 graden op bij elk.
4. **Geef elke kleur een taak** Eén dominant, één ondersteunend, twee accenten. Schrijf het op zodat de rollen in elk ontwerp gelijk blijven.
5. **Stem helderheid en verzadiging af** Maak de dominante kleur donkerder, zacht de ondersteunende af en houd de accenten het felst. Tint bepaalt de harmonie; helderheid bepaalt de hiërarchie.

```css
:root {
  --h: 220; /* base hue */

  /* Rectangle scheme */
  --c1: hsl(var(--h) 65% 30%);
  --c2: hsl(calc(var(--h) + 60) 45% 55%);
  --c3: hsl(calc(var(--h) + 180) 85% 60%);
  --c4: hsl(calc(var(--h) + 240) 40% 55%);

  /* For a square scheme use +90, +180 and +270 instead */
}
```

Het rechthoekpalet hierboven, gegenereerd uit één getal. De HSL-tint loopt vanzelf door voorbij 360, dus je hoeft nooit af te trekken.

## Waarom vier kleuren lastig in balans zijn

Met twee kleuren is contrast eenvoudig. Met vier sterke tinten weet het oog niet waar het eerst moet kijken, en lijkt elke kleur boven de andere uit te schreeuwen. De meeste tetradische ontwerpen die mislukken, doen dat omdat alle vier de kleuren ongeveer evenveel oppervlak en verzadiging krijgen. De oplossing is hiërarchie, niet minder kleuren.

Staande evenementpost voor een open atelierweekend met één dominante achtergrondkleur en kleine accenten

Eén kleur leidt de achtergrond en de andere verschijnen op kleine plekken: drukke inhoud, rustig ontwerp.

Staande lijstpost in dezelfde serie, geleid door een tweede kleur uit het schema met vier kleuren

Een bijbehorende post waarin een tweede kleur uit de set de leiding neemt, zodat de serie verwant maar niet repetitief voelt.

Die tweede afbeelding wijst op de echte kracht van het schema. Vier kleuren geven genoeg variatie voor een hele serie: elke post kan door een ander lid van het palet worden geleid terwijl de set duidelijk bij elkaar hoort. Ideaal voor carrousels, menu’s en evenementenprogramma’s, waar [merkconsistentie](https://gradiently.design/nl/guide/brand-consistency) telt maar eenvormigheid verveelt.

## Waar een tetradisch kleurenschema het best werkt

Vier tinten verdienen hun plek wanneer een project meerdere dingen duidelijk moet scheiden zonder elke keer nieuwe kleuren te verzinnen. Eén poster heeft dat zelden nodig. Een systeem meestal wel.

- **Categoriecodering:** een cafémenu met dranken, ontbijt, lunch en gebak, elk met een eigen kleur.
- **Evenementenprogramma’s:** vier podia, sporen of dagen die bezoekers in één oogopslag uit elkaar moeten houden.
- **Grafieken en dashboards:** vier gegevensreeksen die onderscheidbaar moeten blijven, bij voorkeur ook [gecontroleerd op kleurenblindheid](https://gradiently.design/nl/guide/color-blindness-design).
- **Kinder- en speelmerken:** waar de volle, felle versie van het palet precies de bedoeling is.
- **Seizoenscampagnes:** één tint die elk kwartaal van het jaar leidt, met de andere in een ondersteunende rol.

Begin voor de verhoudingen met de [60-30-10-regel](https://gradiently.design/nl/guide/60-30-10-rule) en verdeel de laatste tien procent over de twee accenten. Op een menu vult de dominante kleur bijvoorbeeld de pagina, markeert de ondersteunende kleur de koppen en labelen de twee accenten de vegetarische en nieuwe gerechten.

## Een tetradisch palet verfijnd laten ogen

Tetradische paletten op volle verzadiging zien eruit als een speelgoedkist, perfect voor een speelgoedwinkel en fout voor de meeste andere. Trek twee of drie van de kleuren richting grijs of richting donker, en dezelfde tinten zien er doordacht en volwassen uit.

- Leiblauw: #24324c
- Heide: #a085ad
- Tarwe: #dfc590
- Salie: #85a375
- Linnen: #f6f2ea

Het kobalt-rechthoekschema gedempt: dezelfde tinten, nu stil genoeg voor een hotel, een boekwinkel of een bruiloft.

- Kobalt naar amethist: `linear-gradient(135deg, #1b3c7e 0%, #9d59c0 100%)`
- Goudsbloem naar varen: `linear-gradient(135deg, #f0b642 0%, #7dba5e 100%)`
- Heide op leiblauw: `radial-gradient(circle at 70% 30%, #a085ad 0%, #24324c 55%, #141c2b 100%)`

Meng in een rechthoekschema elk paar van 60 graden met zichzelf. Meng je naar een tegenpool, dan loop je door grijs; zie [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients).

### Vermijd

- Vier tinten met gelijk oppervlak en gelijke helderheid
- Tekst in de ene felle tint op een andere
- Een kleurverloop dat door alle vier loopt
- Een vijfde tint toevoegen om de balans te herstellen

### Doe dit

- Eén dominante kleur, ongeveer 60 procent van het oppervlak
- Een neutrale kleur voor tekst en ruimte
- Twee tinten gedempt, twee feller gelaten
- De leidende kleur afwisselen door een serie

Voelen vier kleuren als te veel, stap dan terug naar drie met [triadische kleuren](https://gradiently.design/nl/guide/triadic-colors) of [gesplitst complementaire kleuren](https://gradiently.design/nl/guide/split-complementary-colors), die allebei sterk contrast houden met één tint minder om te beheren. Probeer het palet dan op echte ontwerpen: in Gradiently staan kleuren die je in een huisstijlkit bewaart (een Pro-functie) als eerste in elke kleurkiezer in de Studio, zodat elke post in een serie een andere leider kan nemen.

## FAQ

### Wat is een tetradisch kleurenschema?

Een palet van vier tinten uit twee complementaire paren op het kleurenwiel, dat een rechthoek of een vierkant vormt.

### Wat is het verschil tussen een rechthoek- en een vierkantschema?

Een rechthoekschema gebruikt tinten op 0, 60, 180 en 240 graden; een vierkantschema verdeelt ze gelijk met tussenpozen van 90 graden. Rechthoeken zijn meestal makkelijker in balans te brengen.

### Is tetradisch hetzelfde als dubbel complementair?

Het tetradische rechthoekschema heet vaak dubbel complementair, omdat het twee complementaire paren zijn die dicht bij elkaar liggen.

### Wat is een voorbeeld van een tetradisch kleurenschema?

Kobalt `#1B3C7E`, amethist `#9D59C0`, goudsbloem `#F0B642` en varen `#7DBA5E` vormen een rechthoekschema: kobalt en amethist liggen 60 graden uit elkaar, tegenover goudsbloem en varen.

### Hoe breng je een palet van vier kleuren in balans?

Laat één kleur domineren, geef er één een ondersteunende rol en houd de andere twee als kleine accenten. Dempen of verdonkeren van enkele tinten en een neutrale kleur voor tekst helpen.