# Verzadiging in ontwerp: wanneer je kleur op- of afdraait

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

Verzadiging is de knop tussen levendig en grijs en bepaalt of een ontwerp luid, goedkoop, rustig of duur aanvoelt. Wanneer je hem opendraait, wanneer je hem dichtdraait en de codes voor beide.

## The short version

- Verzadiging in ontwerp is de intensiteit van een kleur, van volledig levendig tot helemaal grijs, los van de tint.
- Hoge verzadiging trekt aandacht en voelt energiek, dus ze werkt het best op kleine vlakken zoals knoppen, accenten en highlights.
- Lagere verzadiging voelt rustiger en vaak duurder, en past bij grote vlakken zoals achtergronden en lange leesoppervlakken.
- Twee sterk verzadigde complementaire kleuren naast elkaar kunnen lijken te trillen, waardoor tekst erop vermoeiend leest.
- Verzadigde kleuren moeten in donkere modus meestal worden getemperd en zijn in CMYK-druk vaak niet exact te evenaren.

**Verzadiging in ontwerp** is hoe intens een kleur is: volledig verzadigd is levendig en puur, volledig onverzadigd is grijs. Draai het open waar je aandacht en energie wilt, op een knop, een actieprijs of één highlight. Draai het dicht voor grote vlakken, lang lezen, premiummerken en donkere interfaces, waar levendige kleur snel vermoeiend wordt. De meeste goede paletten mengen beide met opzet: een rustige basis met lagere verzadiging en één of twee verzadigde noten.

## Wat verzadiging is en wat niet

Elke kleur is te beschrijven met drie eigenschappen: tint (welke kleur het is), helderheid (hoe dicht bij wit of zwart) en verzadiging (hoe puur of vergrijsd). Wijzig alleen de verzadiging en een kersenrood glijdt naar stoffig roze en dan naar grijs, zonder lichter of donkerder te worden. [Tint, verzadiging en helderheid](https://gradiently.design/nl/guide/hue-saturation-brightness) legt uit hoe de drie zich tot elkaar verhouden.

- Rood, verzadiging 85% naar 0%: `linear-gradient(90deg, hsl(350 85% 50%) 0%, hsl(350 60% 50%) 25%, hsl(350 40% 50%) 50%, hsl(350 20% 50%) 75%, hsl(350 0% 50%) 100%)`
- Blauw, verzadiging 85% naar 0%: `linear-gradient(90deg, hsl(210 85% 45%) 0%, hsl(210 60% 45%) 25%, hsl(210 40% 45%) 50%, hsl(210 20% 45%) 75%, hsl(210 0% 45%) 100%)`
- Groen, verzadiging 70% naar 0%: `linear-gradient(90deg, hsl(150 70% 38%) 0%, hsl(150 50% 38%) 25%, hsl(150 32% 38%) 50%, hsl(150 15% 38%) 75%, hsl(150 0% 38%) 100%)`

Drie tinten met constante helderheid terwijl de verzadiging daalt. In het midden van elke strook wonen veel verfijnde merkkleuren.

In HSL is verzadiging het tweede getal. In de nieuwere kleurruimte oklch is het equivalent chroma, dat zich gelijkmatiger over tinten gedraagt, zodat een geel en een blauw met dezelfde chroma even intens lijken. [HSL-kleuren](https://gradiently.design/nl/guide/hsl-colors) behandelt het oudere model en hoe je de getallen leest.

## Wanneer je de verzadiging opendraait

- **Het ene ding om op te drukken.** Een verzadigde knop op een rustige pagina heeft geen pijl nodig. Dit is de taak van een [accentkleur](https://gradiently.design/nl/guide/accent-color).
- **Korte, luide momenten.** Aankondigingen van acties, lanceringsposts en aftellers voor evenementen zijn bedoeld om een scroll te onderbreken.
- **Jonge, speelse of sportieve merken.** Kinderproducten, energiedrankjes en festivals dragen hoge verzadiging vaak als deel van hun persoonlijkheid.
- **Data die moet opvallen.** Verzadig in een grafiek de reeks die telt en maak de rest grijs.
- **Kleine vlakken op donkere ondergrond.** Een levendige kleur op een klein vlak op bijna zwart leest als licht, daarom werkt neon in het donker.

## Wanneer je de verzadiging dichtdraait

- **Grote vlakken.** Een heel scherm van pure verzadigde kleur is vermoeiend. Achtergronden werken meestal beter licht vergrijsd.
- **Premium positionering.** Gedempte, complexe kleuren zoals olijf, ossenbloed en leisteen komen vaak doordachter en duurder over dan primaire kleuren.
- **Lang lezen.** Artikelen, documenten en dashboards hebben een rustig oppervlak nodig waar mensen een uur naar kunnen kijken.
- **Donkere modus.** Verzadigde kleuren gloeien en smeren uit op donkere achtergronden. Verlaag de verzadiging en verhoog de helderheid een beetje. [Ontwerpen voor donkere modus](https://gradiently.design/nl/guide/dark-mode-design) heeft de details.
- **Achter foto’s en tekst.** Een rustiger achtergrond laat de foto en de woorden leiden.

Een staande actiepost met de tekst Weekendactie, slechts 48 uur

Een kort, luid moment zoals een weekendactie is waar hoge verzadiging haar plek verdient. Staande post van 1080×1350.

Een staande journalpost met de titel Notities uit het atelier

Iets waar mensen bij moeten blijven hangen, zoals een journalpost, is waar rustiger kleur met lagere verzadiging thuishoort.

## Het trillingsprobleem

Zet twee sterk verzadigde complementaire kleuren naast elkaar, zoals rood op groen of blauw op oranje, en de rand ertussen lijkt te schemeren. Het is een optisch effect en het maakt tekst op die paren echt onprettig om te lezen, ook als de contrastverhouding acceptabel lijkt. De oplossing is een van het paar te onverzadigen, of ze te scheiden met een neutrale kleur.

### Trilt

- Puur rode tekst op puur groen
- Verzadigd blauw op verzadigd oranje
- Magenta naast limoen op volle sterkte
- Levendige kleuren naast elkaar over een hele poster

### Leest rustig

- Diep rode tekst op gedempt salie
- Marineblauw op zacht abrikoos
- Magenta-accent op een vergrijsde limoenondergrond
- Eén levendige kleur op een basis met lagere verzadiging

## Hoe je verzadiging in CSS aanpast

Hexcodes verbergen verzadiging, daarom is aanpassen op het oog in hex traag. Werk in plaats daarvan in HSL of oklch, of meng een kleur met grijs met `color-mix()`.

```css
:root {
  /* HSL: the second value is saturation */
  --brand: hsl(350 80% 48%);
  --brand-muted: hsl(350 35% 48%);

  /* oklch: the second value is chroma */
  --accent: oklch(0.65 0.2 30);
  --accent-soft: oklch(0.65 0.08 30);

  /* color-mix: blend towards a grey of similar lightness */
  --brand-quiet: color-mix(in oklch, var(--brand) 60%, #808080);
}
```

Drie manieren om verzadiging te verlagen met behoud van de tint: HSL-verzadiging, oklch-chroma en mengen met grijs.

Een nuttige gewoonte is om elke merkkleur vanaf het begin in twee verzadigingen te definiëren: een volle versie voor accenten en een gedempte voor grote vlakken. Dan hoeft niemand later een zachtere tint te improviseren.

Foto’s volgen dezelfde logica. Een drukke, verzadigde foto achter een kop concurreert ermee. Haal de verzadiging van de foto ongeveer een derde omlaag en de woorden nemen de leiding zonder kader of schaduw erachter. Andersom is één verzadigd voorwerp in een verder gedempte foto, een rode jas in een grijze straat, een van de oudste manieren om het oog te sturen.

## Verzadiging in druk

Schermen kunnen verzadigder kleur tonen dan CMYK-inkt kan drukken, vooral heldere blauwen, groenen, oranjes en paarsen. Een levendige schermkleur wordt vaak merkbaar doffer gedrukt. Als verzadiging centraal staat in je merk, overweeg dan een Pantone-steunkleur voor druk en controleer een proef voor een grote oplage. [RGB versus CMYK](https://gradiently.design/nl/guide/rgb-vs-cmyk) legt het verschil uit.

- Vol rood: #e8173a
- Gedempt rood: #b8505f
- Vol blauw: #1c7ae0
- Gedempt blauw: #4f6f93
- Vol groen: #14a85a
- Gedempt groen: #5b8a6f

Elke merkkleur in twee verzadigingen. De volle versies zijn voor kleine, luide momenten, de gedempte dragen grote vlakken en overleven druk beter.

Verzadiging werkt ook samen met [kleurtemperatuur](https://gradiently.design/nl/guide/color-temperature): een warm gedempt palet voelt vintage, een koel gedempt palet Scandinavisch. Voor kant-en-klare sets aan beide uiteinden van de knop zie [gedempte kleurenpaletten](https://gradiently.design/nl/guide/muted-color-palettes) en [felle kleurenpaletten](https://gradiently.design/nl/guide/bright-color-palettes).

De Marks van Gradiently passen hetzelfde principe toe op een levende achtergrond: het rustigste, best contrasterende gebied verschuift achter de tekst en drukke details ontspannen daar, zodat de woorden op een stillere plek staan terwijl de rest van de Mark zijn kleur behoudt.

## FAQ

### Wat is verzadiging in ontwerp?

De intensiteit of zuiverheid van een kleur, van volledig levendig tot helemaal grijs. Het staat los van tint en helderheid.

### Is hoge verzadiging slecht?

Nee, maar ze werkt het best op kleine vlakken en in korte momenten. Grote vlakken met hoge verzadiging zijn vermoeiend en kunnen goedkoop ogen.

### Wat is het verschil tussen verzadiging en helderheid?

Verzadiging is hoeveel grijs er in een kleur zit, helderheid is hoe dicht hij bij wit of zwart ligt. Je kunt het ene wijzigen zonder het andere.

### Waarom zien verzadigde kleuren er in donkere modus slechter uit?

Op donkere achtergronden lijken levendige kleuren te gloeien en aan de randen te vervagen. De verzadiging licht verlagen en de helderheid verhogen houdt ze scherp.

### Hoe maak ik een kleur minder verzadigd in CSS?

Verlaag de tweede waarde in `hsl()` of `oklch()`, of meng met grijs via `color-mix(in oklch, jouwkleur 60%, #808080)`.