# Gedempte kleurenpaletten: stoffige codes voor rustige merken

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

Saliegroen, oudroze, leisteen en klei voelen rustig omdat de kleur met grijs is verzacht. Zo werkt dempen, zeven paletten om te kopiëren en het ene wat voorkomt dat een gedempt palet in mist verandert.

## The short version

- Een gedempt kleurenpalet bestaat uit kleuren met verlaagde verzadiging, meestal door grijs of een beetje van de tegenovergestelde tint erdoor te mengen.
- Gedempte kleuren zoals salie, oudroze, leisteenblauw, mauve en klei ogen rustig, natuurlijk en volwassen.
- Gedempte kleuren hebben vaak dezelfde helderheid, dus een gedempt palet heeft één veel donkerdere kleur nodig voor tekst en randen.
- Saliegroen en oudroze verschillen in tint maar zijn bijna gelijk in helderheid, daarom is tekst in de ene op de andere onleesbaar.
- In CSS is color-mix() in de oklch-ruimte een betrouwbare manier om elke merkkleur te dempen door hem met grijs te mengen.

Een **gedempt kleurenpalet** is een set kleuren waarvan de verzadiging omlaag is gedraaid, zodat ze stoffig, zacht en een tikje grijs ogen in plaats van zuiver. Salie `#9CAF88`, oudroze `#C9A9A6`, leisteenblauw `#6B7F99`, mauve `#B48A9B` en klei `#B5826B` zijn typisch. Ze passen bij merken die rustig en doordacht willen overkomen: keramiek, welzijn, schrijfwaren, architectuur, slow fashion. De adder onder het gras is dat gedempte kleuren naar dezelfde helderheid neigen, dus elk goed gedempt palet bevat één stevig donker om het bij elkaar te houden.

## Wat een kleur gedempt maakt

Een kleur heeft drie instellingen: tint, verzadiging en helderheid (zie [tint, verzadiging en helderheid](https://gradiently.design/nl/guide/hue-saturation-brightness)). Dempen verlaagt de verzadiging terwijl de tint herkenbaar blijft. Er zijn twee klassieke manieren: grijs erdoor mengen, wat ontwerpers een tint (tone) maken noemen, of een beetje van de complementaire kleur erdoor mengen, wat schilders altijd al deden. Beide trekken de kleur naar neutraal.

### Zuiver

- Groen `#2ECC71`
- Roze `#FF5C8A`
- Blauw `#2F6BFF`
- Oranje `#FF7A1A`

### Gedempt

- Salie `#9CAF88`
- Oudroze `#C9A9A6`
- Leisteenblauw `#6B7F99`
- Klei `#B5826B`

Gedempt is niet hetzelfde als pastel. Een pastel voegt wit toe en blijft daardoor schoon en licht; een gedempte kleur voegt grijs toe, dus hij kan licht, middel of donker zijn en voelt altijd een beetje stoffig. [Pastelkleurenpaletten](https://gradiently.design/nl/guide/pastel-color-palettes) en [tinten, tonen en schaduwen](https://gradiently.design/nl/guide/tints-tones-shades) trekken de lijn preciezer.

## Zeven gedempte kleurenpaletten met hexcodes

- Krijt: #eef0e8
- Salie: #9caf88
- Oudroze: #c9a9a6
- Klei: #b5826b
- Mosinkt: #2e3a2c

Tuinatelier, het palet dat de meeste mensen zien bij het woord gedempt. Mosinkt is het anker dat de andere vier bruikbaar maakt.

- **Haven:** mist `#E6E9EA`, leisteenblauw `#6B7F99`, zeegrijs `#93A3A6`, touw `#C2AD8E`, diep marineblauw `#22303C`.
- **Keramiek:** biscuit `#F1E8DD`, klei `#B5826B`, asglazuur `#A7A39A`, ijzer `#5B4A42`, ovenzwart `#231D1A`.
- **Lavendelstof:** nevel `#F1EBE6`, mauve `#B48A9B`, heide `#8E8AA6`, salie `#9CAF88`, aubergine `#4A3F4F`.
- **Olijfgaard:** crème `#F2EDE1`, olijf `#8A8A5C`, gedroogde kruiden `#B1A87F`, terracotta `#A9674E`, schors `#3A3328`.
- **Nordic:** sneeuw `#F2F3F1`, berk `#D8D1C4`, korstmos `#A3AE9D`, fjord `#5F7A80`, den `#24302E`.
- **Stoffige schemering:** perkament `#EFE6DA`, perzikstof `#D9A88F`, roosbruin `#A06F6B`, pruimgrijs `#6E5866`, nacht `#2A2329`.

Elk van deze eindigt in een donker. Dat is geen versiering. Zonder dat is er niets om tekst in te zetten en niets om een rand mee te trekken, en ziet het palet eruit als een foto die in de zon is blijven liggen.

## Waarom gedempte paletten in mist veranderen

Dempen haalt de sterkste verschillen tussen kleuren weg, dus helderheid blijft het enige over om ze te scheiden. Salie `#9CAF88` en oudroze `#C9A9A6` lijken een mooi contrast van groen en roze, maar hun contrastverhouding is 1,09:1: bijna dezelfde helderheid. Tekst in de ene op de andere is onleesbaar. Zelfs salie op zuiver wit haalt maar 2,36:1.

| Paar | Contrast | Gebruik voor |
| --- | --- | --- |
| Salie op oudroze | 1,09:1 | Twee vormen naast elkaar, nooit tekst |
| Salie op wit | 2,36:1 | Grote vormen en illustratie |
| Leisteenblauw op wit | 4,10:1 | Alleen grote koppen |
| Oudroze met tekst in `#3A2A2A` | 6,29:1 | Lopende tekst, haalt AA |
| Mosinkt `#2E3A2C` op krijt | 10,39:1 | Lopende tekst, haalt AAA |
| Aubergine `#4A3F4F` op nevel | 8,40:1 | Lopende tekst, haalt AAA |

WCAG vraagt 4,5:1 voor lopende tekst en 3:1 voor grote tekst. In een gedempt palet doet het donkere anker al het leeswerk.

Controleer je eigen paren met de richtlijnen in [kleurcontrast](https://gradiently.design/nl/guide/color-contrast-accessibility). Een goede gewoonte is het palet even naar grijstinten om te zetten: als twee kleuren hetzelfde grijs worden, zet dan nooit de ene op de andere.

## Zo demp je elke kleur in CSS

Heb je al een felle merkkleur en wil je een rustiger partner, meng hem dan met grijs in plaats van op het oog een nieuwe kleur te kiezen. `color-mix()` in de oklch-ruimte houdt de tint stabiel terwijl de verzadiging daalt, en wordt ondersteund in alle huidige grote browsers.

```css
:root {
  --brand: #2f6bff;

  /* the same hue, progressively muted */
  --brand-muted-1: color-mix(in oklch, var(--brand) 70%, #8c8c8c);
  --brand-muted-2: color-mix(in oklch, var(--brand) 45%, #8c8c8c);
  --brand-muted-3: color-mix(in oklch, var(--brand) 25%, #8c8c8c);

  /* or set chroma directly in oklch: low chroma reads as muted */
  --slate: oklch(0.58 0.05 255);
  --sage: oklch(0.72 0.06 130);
}
```

Mengen richting middengrijs dempt zonder de tint te veranderen. In oklch leest een chroma rond 0,03 tot 0,07 als gedempt; 0,15 en hoger leest als levendig.

[OKLCH uitgelegd](https://gradiently.design/nl/guide/oklch-explained) behandelt waarom deze ruimte gelijkmatiger werkt dan HSL, en [verzadiging in ontwerp](https://gradiently.design/nl/guide/color-saturation) behandelt wanneer je hem weer omhoog draait.

## Gedempte verlopen en achtergronden

Gedempte kleuren maken zachte, stille verlopen, vooral als de stops dicht bij elkaar liggen in tint en het licht van één kant komt. Voeg een beetje korrel toe: verlopen met laag contrast vertonen makkelijk banding, en textuur laat ze eruitzien als een oppervlak in plaats van een schermstand.

- Saliemorgen: `linear-gradient(160deg, #eef0e8 0%, #9caf88 70%, #6f8460 100%)`
- Perzikstof: `radial-gradient(circle at 30% 25%, #efe6da 0%, #d9a88f 55%, #a06f6b 100%)`
- Havenmist: `linear-gradient(170deg, #e6e9ea 0%, #93a3a6 50%, #6b7f99 100%)`
- Mauve avond: `radial-gradient(circle at 70% 30%, #b48a9b 0%, #6e5866 55%, #2a2329 100%)`

Vier gedempte verlopen. Elk houdt aangrenzende tinten aan, zodat het verloop in het midden nooit bruin wordt.

Een gedempt palet kan ook één iets sterkere kleur als accent hebben, zoals terracotta tussen salietinten of een dieper turquoise tussen grijzen. Houd het bij één element per ontwerp: een prijs, een knop, een datum. Het geeft het oog een plek om te landen zonder de rust te breken, en zo werken ook de [aardetintenpaletten](https://gradiently.design/nl/guide/earth-tone-colors) waar gedempte paletten uit lenen.

Een staande socialpost voor een keramiekcollectie met donkere letters op een zachte, stoffige achtergrond

Een keramiekpost op 1080×1350. Gedempte kleuren dragen de sfeer; de donkere letters dragen de boodschap.

Leeft je merk in gedempte kleuren, dan doet een achtergrond met eigen korrel en licht veel van het werk. Een Gradiently Mark geeft je een zacht, onderscheidend oppervlak dat tekst vanzelf leesbaar houdt, en dat telt in een gedempt palet zwaarder dan in welk ander ook.

## FAQ

### Wat is een gedempt kleurenpalet?

Een palet van kleuren met verlaagde verzadiging, zodat ze zacht, stoffig en een tikje grijs ogen. Salie, oudroze, leisteenblauw en klei zijn bekende voorbeelden.

### Wat is het verschil tussen gedempte en pastelkleuren?

Pastels ontstaan door wit toe te voegen, dus ze blijven licht en schoon. Gedempte kleuren ontstaan door grijs toe te voegen, dus ze kunnen elke helderheid hebben en voelen altijd een beetje stoffig.

### Hoe maak ik een kleur gedempter?

Verlaag de verzadiging, meng er grijs door of voeg een kleine hoeveelheid van de complementaire kleur toe. In CSS doet `color-mix(in oklch, yourcolour 50%, #8c8c8c)` het betrouwbaar.

### Welke kleuren passen bij saliegroen?

Oudroze, klei, crème, warm grijs en een diep mos of antraciet voor tekst. Zet geen tekst in salie op oudroze: ze zijn bijna even helder.

### Zijn gedempte kleuren goed voor branding?

Ze passen goed bij rustige, ambachtelijke en welzijnsmerken. Neem één sterk donker op voor tekst en randen zodat het palet leesbaar blijft.