# Donkere kleurenpaletten: stemmige codes die leesbaar blijven

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

Donkere paletten ogen duur als ze uit bijna-zwart met een vleugje kleur bestaan, en goedkoop als het puur zwart met neon is. Hier zijn er zes die het goed doen, met alle codes erbij.

## The short version

- Een goed donker kleurenpalet is gebouwd op een bijna-zwart met een lichte tint kleur in plaats van puur #000000.
- Tekst op een donker palet leest het best in een zacht gebroken wit, dat sterk contrast geeft zonder de verblinding van puur wit.
- Accentkleuren op donkere vlakken moeten lichter en minder verzadigd zijn dan op wit, omdat felle kleuren trillen tegen zwart.
- Donkere interfaces tonen diepte door verhoogde vlakken iets lichter te maken, niet met schaduwen.
- Elke tekstkleur in een donker palet moet nog steeds een contrastcontrole halen tegen het vlak waarop hij echt staat.

Een **donker kleurenpalet** dat leesbaar blijft heeft drie delen: een bijna-zwarte ondergrond met een vleugje kleur, een zacht gebroken wit voor tekst, en een of twee accenten die lichter en rustiger zijn dan je op wit zou gebruiken. Puur zwart met verzadigd neon ziet er hard uit en vermoeit de ogen. Getinte donkere tinten met zachte lichtpunten ogen doordacht en duur. De zes paletten hieronder volgen dat recept, met hexcodes die je kunt kopiëren en contrastverhoudingen die al zijn gecontroleerd.

## Zes donkere kleurenpaletten met hexcodes

Elk palet heeft dezelfde vijf rollen, van links naar rechts: **ondergrond** (de pagina), **vlak** (kaarten en panelen, een stap lichter), **diep** (een rijke middentoon voor vormen en grote vlakken), **accent** (voor links, knoppen en highlights) en **tekst**.

### Middernachtinkt

- Ondergrond #0b0f1a: #0b0f1a
- Vlak #151b2c: #151b2c
- Diep marineblauw #2b3a67: #2b3a67
- Maagdenpalm #8fa3d9: #8fa3d9
- Tekst #e8e6f0: #e8e6f0

Koel, rustig en technisch. Tekst op de ondergrond haalt 15,5:1; het accent in maagdenpalmblauw haalt 7,7:1, genoeg voor links en kleine labels.

### Bos bij nacht

- Ondergrond #0c1410: #0c1410
- Vlak #15231c: #15231c
- Diep dennengroen #2f5d46: #2f5d46
- Salie #9cc5a1: #9cc5a1
- Tekst #ece7da: #ece7da

Natuurlijk en stil, goed voor wellness-, outdoor- en foodmerken. Tekst 15,1:1, salie 9,7:1.

### Ossenbloed en koper

- Ondergrond #140a0b: #140a0b
- Vlak #241214: #241214
- Ossenbloed #6b1e26: #6b1e26
- Koper #c9855b: #c9855b
- Tekst #f1e6dc: #f1e6dc

Warm en rijk, thuis op wijnkaarten, in het theater en bij avondevenementen. Tekst 15,9:1, koper 6,5:1.

### Aubergine

- Ondergrond #120b17: #120b17
- Vlak #1e1326: #1e1326
- Pruim #4a2a63: #4a2a63
- Orchidee #c79ad8: #c79ad8
- Tekst #f3ecf6: #f3ecf6

Creatief en nachtelijk, een zachter alternatief voor neonpaars. Tekst 16,7:1, orchidee 8,3:1.

### Antraciet en gloed

- Ondergrond #121212: #121212
- Vlak #1e1e1e: #1e1e1e
- Grafiet #3a3a3a: #3a3a3a
- Gloed #ff8a3d: #ff8a3d
- Tekst #ededed: #ededed

Neutrale grijstinten met één hete accentkleur, de klassieker voor apps en dashboards. Tekst 16:1, gloed 8:1.

### Diep petrol

- Ondergrond #071a1c: #071a1c
- Vlak #0f2a2d: #0f2a2d
- Diep petrol #1f5c5f: #1f5c5f
- Aqua #66c2b8: #66c2b8
- Tekst #e6f2ef: #e6f2ef

Oceanisch en beheerst, geschikt voor financiën en gezondheid. Tekst 15,6:1, aqua 8,5:1.

De diepe kleuren in elk palet zijn voor vlakken, niet voor woorden: marineblauw op de middernachtondergrond haalt bijvoorbeeld maar ongeveer 1,7:1. Gebruik ze voor vormen, illustraties en achtergronden achter tekst in de lichtere kleuren.

## Dezelfde paletten als donkere verlopen

Donkere paletten komen tot leven als de diepe kleur uit de ondergrond gloeit als licht in een schemerige kamer. Deze verlopen gebruiken alleen de codes hierboven, dus ze sluiten precies aan op de vlakke paletten. Meer technieken staan in [donkere verloopachtergronden](https://gradiently.design/nl/guide/dark-gradient-backgrounds) en [stemmige verlopen](https://gradiently.design/nl/guide/moody-gradients).

- Middernachtinkt: `radial-gradient(circle at 75% 25%, #2b3a67 0%, #151b2c 40%, #0b0f1a 80%)`
- Bos bij nacht: `radial-gradient(circle at 25% 75%, #2f5d46 0%, #15231c 45%, #0c1410 85%)`
- Ossenbloed: `radial-gradient(circle at 70% 70%, #6b1e26 0%, #241214 45%, #140a0b 85%)`
- Aubergine: `radial-gradient(circle at 30% 20%, #4a2a63 0%, #1e1326 45%, #120b17 85%)`
- Antraciet en gloed: `radial-gradient(circle at 80% 80%, #ff8a3d 0%, #3a3a3a 25%, #121212 70%)`
- Diep petrol: `radial-gradient(circle at 50% 0%, #1f5c5f 0%, #0f2a2d 45%, #071a1c 85%)`

Donkere verlopen vertonen meer banding dan welke soort ook. Voeg een beetje korrel toe en vermijd zware JPEG-compressie bij het exporteren.

## Regels voor donkere paletten die leesbaar blijven

### Vermijd

- Puur #000000 als ondergrond
- Puur #ffffff voor lange stukken tekst
- Volledig verzadigde accenten, die lijken te trillen
- Slagschaduwen om te laten zien welke kaart bovenop ligt
- Dunne, lichte letters op kleine formaten

### Doe dit

- Een bijna-zwart met een tint van je merkkleur
- Een gebroken wit met dezelfde tint
- Lichtere, zachtere versies van accentkleuren
- Lichtere vlakken voor verhoogde elementen
- Regular of medium gewicht, iets ruimere letterafstand

**Waarom niet puur zwart?** Zwart met puur witte tekst is het maximale contrast dat een scherm kan tonen, 21:1, en op felle schermen kan dat verblindend aanvoelen, vooral bij lange stukken tekst. Een getint bijna-zwart rond 15:1 ligt nog ver boven elke toegankelijkheidsdrempel en leest veel prettiger bij langere teksten. Het geeft het palet ook een temperatuur, die puur zwart nooit heeft.

**Waarom rustigere accenten?** Een verzadigd blauw of rood dat er op wit prima uitziet, lijkt op zwart te gloeien en aan de randen te wiebelen. Maak het lichter en iets minder verzadigd, zoals bij de maagdenpalm en salie hierboven, en het blijft rustig staan. Controleer elk accent dat je voor tekst gebruikt met een [contrastchecker](https://gradiently.design/nl/guide/color-contrast-accessibility).

## Zo maak je een donker palet van je merkkleur

Je hoeft niet een van de paletten hierboven te lenen. Elke merkkleur kan een donker palet worden door de tint te behouden en alleen helderheid en verzadiging aan te passen. Dat werkt het best in een formaat dat die twee scheidt, zoals [HSL](https://gradiently.design/nl/guide/hsl-colors). Hier wordt een koraalrode merkkleur, `#e0525d`, een volledige donkere set.

1. **Ondergrond: dezelfde tint, bijna geen licht** Behoud de tint, verlaag de verzadiging naar ongeveer 30% en de helderheid naar ongeveer 7%: `#170c0d`. Het leest als zwart maar voelt warm.
2. **Vlak: één stap hoger** Verhoog de helderheid naar ongeveer 12% en verlaag de verzadiging een tikje: `#261718`. Kaarten en panelen staan hier.
3. **Diep: een rijke middentoon voor vlakken** Een helderheid rond 28% geeft `#68272d`, een gedempte wijnrood voor vormen en illustraties, nooit voor tekst.
4. **Accent: lichter en zachter dan het merk** Til het koraal op naar ongeveer 72% helderheid: `#ea868e` haalt 7,6:1 op de ondergrond, terwijl het originele koraal 5,1:1 haalt en harder oogt.
5. **Tekst: een gebroken wit met een spoor van de tint** `#f2e9e9` geeft 16:1 op de ondergrond en past stilletjes bij al het andere.

- Ondergrond #170c0d: #170c0d
- Vlak #261718: #261718
- Diepe wijn #68272d: #68272d
- Zacht koraal #ea868e: #ea868e
- Tekst #f2e9e9: #f2e9e9

Een donker palet afgeleid van één koraalkleur. Elke kleur deelt de tint, daarom voelt de set als één merk bij nacht.

## Een donker palet gebruiken in CSS

Benoem kleuren naar rol, zodat dezelfde componenten werken in lichte en donkere thema’s. Het patroon hieronder definieert Middernachtinkt als het donkere thema en laat de systeeminstelling kiezen. [Dark mode design](https://gradiently.design/nl/guide/dark-mode-design) behandelt de bredere keuzes, zoals afbeeldingen, randen en grafieken.

```css
:root {
  color-scheme: light dark;
  --ground:  #f7f7fb;
  --surface: #ffffff;
  --text:    #151b2c;
  --accent:  #2b3a67;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ground:  #0b0f1a;
    --surface: #151b2c;
    --text:    #e8e6f0;
    --accent:  #8fa3d9;
  }
}

body { background: var(--ground); color: var(--text); }
.card { background: var(--surface); }
a { color: var(--accent); }
```

Het accent verandert per thema: diep marineblauw op licht, maagdenpalm op donker. Eén kleur werkt zelden op beide.

## Donkere paletten voor socialmediaposts

In een feed valt een donkere post op tussen felle foto’s, maar alleen als de woorden op telefoonformaat leesbaar zijn. Houd de letters groot, houd het helderste deel van de achtergrond weg van de kop en geef de woorden het rustigste deel van het beeld.

Een donkere Instagram-post in staand formaat die een late galerieopening aankondigt, met lichte letters op een diepe achtergrond

Een donkere, stemmige post waarbij de tekst op het rustigste deel van de achtergrond staat en de gloed uit de buurt van de woorden blijft.

Hier helpt een Gradiently Mark: hij verplaatst zijn rustigste, best contrasterende gebied achter de tekst en auto-inkt kiest voor elke regel lichte of donkere letters uit het eigen palet van de Mark, zodat een stemmige achtergrond de kop nooit opslokt. Voor donkere looks met een rijker, premium karakter, zie [luxe kleurenpaletten](https://gradiently.design/nl/guide/luxury-color-palettes) en de [dark academia-esthetiek](https://gradiently.design/nl/guide/dark-academia-aesthetic).

## FAQ

### Welke kleuren horen in een donker kleurenpalet?

Een getint bijna-zwart voor de ondergrond, een iets lichtere vlakkleur, één diepe middentoon voor grote vlakken, een lichter accent en een zacht gebroken wit voor tekst.

### Moet ik puur zwart gebruiken voor dark mode?

Meestal niet. Een bijna-zwart zoals #121212 of een getint donker zoals #0b0f1a vermindert de verblinding bij witte tekst en geeft nog steeds heel hoog contrast.

### Welke tekstkleur werkt het best op een donkere achtergrond?

Een zacht gebroken wit zoals #e8e6f0 of #ededed. Het houdt het contrast rond 15:1 of hoger zonder de hardheid van puur wit.

### Waarom zien felle kleuren er verkeerd uit op een donkere achtergrond?

Verzadigde kleuren lijken te trillen tegen zwart. Gebruik lichtere, iets minder verzadigde versies voor accenten op donkere vlakken.