# Donkere kleurverloopachtergronden: diepte zonder somberheid

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

Donkere kleurverlopen kunnen eruitzien als een premium nachtscène of als een modderig scherm met de helderheid omlaag. Het verschil zit in een handvol keuzes, die allemaal makkelijk te kopiëren zijn.

## The short version

- Een rijke donkere kleurverloopachtergrond begint bij een getint bijna-zwart in plaats van puur zwart, met daaruit één verlichte kleur die opkomt.
- Donkere kleurverlopen ogen somber als ze geen lichtbron hebben, geen kleur in de zwarttinten en geen contrast tussen donkere en verlichte delen.
- Donkere kleurverlopen vertonen meer banding dan elk ander soort, dus ze hebben bijna altijd fijne korrel en zorgvuldige export nodig.
- Lichte tekst op een donker kleurverloop hoort in het donkerste deel te staan en moet voor lopende tekst minstens een contrastverhouding van 4,5:1 halen.
- Gebroken wit en licht opgetrokken zwarttinten zijn prettiger voor de ogen dan puur wit op puur zwart.

Een goede **donkere kleurverloopachtergrond** is een getint bijna-zwart met daaruit één gloeiende kleur, alsof er in een donkere kamer één lamp brandt. De tint geeft de zwarttinten diepte, de verlichte kleur geeft het oog een plek om heen te gaan en het grote donkere vlak laat witte tekst scherp ogen. Zonder die drie dingen lijkt een donker kleurverloop gewoon op een gedimd scherm.

## Begin met een getint bijna-zwart

Puur zwart `#000000` is een doodlopende weg: er is niets om uit over te lopen, en elke kleur ernaast lijkt erop geplakt. Een bijna-zwart met een vleugje tint geeft het kleurverloop een familie om bij te horen. Blauwzwart voelt koel en technisch, violetzwart voelt luxe, groenzwart voelt natuurlijk en warm bruin voelt als leer en hout. Kies de tint die past bij de kleur die je wilt verlichten.

- Blauwzwart: #0b0f1a
- Violetzwart: #120b1a
- Groenzwart: #0a1411
- Omberzwart: #160c0a
- Neutraal zwart: #0f0f10

Vijf bijna-zwarten. Naast elkaar zijn de tinten duidelijk; los lijken het zwarttinten met een sfeer.

## Voeg één verlichte kleur toe

De verlichte kleur maakt van duisternis een sfeer. Plaats hem uit het midden, meestal bij een rand of hoek, zodat hij als lichtbron leest. Houd hem in dezelfde familie als de tint: violet licht op violetzwart, teal op blauwzwart. Eén kleur is bijna altijd genoeg. Twee kunnen werken als het buren zijn. Meer dan dat gaat op een nachtclub lijken, en dat is prima als je voor er een ontwerpt; zie [neonkleurverlopen](https://gradiently.design/nl/guide/neon-gradients).

- Violette lamp: `radial-gradient(circle at 80% 20%, #6d28d9 0%, #2e1065 30%, #0c0a1d 70%)`
- Tealkleurige horizon: `linear-gradient(180deg, #030712 0%, #042f2e 65%, #0f766e 100%)`
- Gloeiend sintel: `radial-gradient(ellipse at 50% 110%, #ea580c 0%, #7c2d12 30%, #1c0a05 65%, #0c0605 100%)`
- Blauwe uur: `linear-gradient(160deg, #020617 0%, #0f172a 45%, #1e3a8a 100%)`
- Rozerook: `radial-gradient(circle at 20% 80%, #be185d 0%, #4a044e 35%, #0f0710 75%)`
- Mosnacht: `linear-gradient(135deg, #050a07 0%, #0f2419 55%, #166534 100%)`

Zes donkere kleurverlopen, elk een getint bijna-zwart met één verlichte kleur. Het grootste deel van elk staal blijft donker.

## Waarom sommige donkere kleurverlopen somber ogen

### Somber

- Puur zwart dat overloopt in donkergrijs
- Licht gelijkmatig verspreid, geen bron
- De verlichte kleur afgezwakt richting grijs
- Zichtbare strepen over de donkere overgang
- Grijze tekst op een grijszwarte ondergrond

### Rijk

- Een getint bijna-zwart met een duidelijke tint
- Eén licht, uit het midden, dat uitdooft
- De verlichte kleur verzadigd gehouden op het helderste punt
- Fijne korrel over het hele oppervlak
- Gebroken witte tekst in het donkerste deel

De meest gemaakte fout is de verlichte kleur op weg naar zwart richting grijs te mengen. Houd het chroma hoog terwijl het donkerder wordt: violet moet dieper violet worden, dan violetzwart, nooit grijs. Mengen in OKLCH helpt; [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients) legt uit waarom.

## Banding: het grootste risico van donkere kleurverlopen

Donkere kleurverlopen bestrijken maar een klein bereik aan waarden, vaak een tiental of twee per kanaal, en mensen zijn erg gevoelig voor kleine stapjes tussen donkere tinten. Een soepele donkere overgang over een heel scherm is dus het perfecte recept voor zichtbare strepen. Drie gewoonten voorkomen het: geef de overgang genoeg bereik, voeg fijne korrel toe en exporteer zonder zware compressie. De details staan in [gradient banding](https://gradiently.design/nl/guide/gradient-banding) en [korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients).

> **Controleer op een telefoon** Banding die op een gekalibreerde monitor onzichtbaar is, kan op een telefoon op volle helderheid duidelijk zichtbaar zijn, nadat een socialemediaplatform de afbeelding opnieuw heeft gecomprimeerd. Controleer altijd de geüploade versie.

## Tekst op een donker kleurverloop

Donkere achtergronden zijn gul voor tekst, maar alleen in de donkere delen. Houd woorden weg van de verlichte kleur, waar het contrast daalt. Gebruik gebroken wit in plaats van puur wit voor lange passages, want puur wit op bijna-zwart kan verblindend voelen. En meet: WCAG vraagt minstens 4,5:1 voor lopende tekst en 3:1 voor grote tekst, wat je kunt nagaan met de [WebAIM contrastchecker](https://webaim.org/resources/contrastchecker/).

| Tekstkleur | Op `#0b0f1a` | Gebruik voor |
| --- | --- | --- |
| `#ffffff` wit | Ongeveer 19:1 | Koppen en korte labels |
| `#e5e7eb` gebroken wit | Ongeveer 15:1, zachter | Lopende tekst en lang lezen |
| `#9ca3af` middengrijs | Ongeveer 7,5:1, haalt AA | Bijschriften en secundaire tekst |
| `#4b5563` donkergrijs | Ongeveer 2,5:1, faalt | Vermijd voor alles wat mensen moeten lezen |

Tekstkleuren op een blauwzwarte ondergrond. Controleer het contrast altijd op het lichtste punt achter de woorden, niet op het donkerste.

Een vierkante cover met de titel Na sluitingstijd, waarbij een heldere gloed achter de woorden zit

Het licht valt recht achter de titel en maakt hem plat.

Dezelfde vierkante cover met het donkerdere deel van het kleurverloop achter de titel

Met de donkere ondergrond achter de titel omlijst het licht hem juist.

## Waar donkere kleurverloopachtergronden het best werken

Donkere kleurverlopen passen bij alles wat ’s nachts gebeurt, premium aanvoelt of kleur nodig heeft om te gloeien: muziek en evenementen, film en games, technologielanceringen, parfum en gedistilleerd, en portfolio’s waar het werk het helderste op de pagina moet zijn. Ze helpen ook bij productfotografie, omdat een verlicht object op een donkere ondergrond kostbaar oogt.

- **Covers en posters:** een donkere ondergrond maakt één heldere titel de hoofdrolspeler
- **Stories en Reels:** schermvullende donkere beelden voelen filmisch op een telefoon
- **Dia’s:** lichte tekst op donker is rustiger in een schemerige ruimte dan donkere tekst op wit
- **Website-heroes:** een donkere hero laat het eerste scherm weloverwogen voelen; zie [hero-achtergronden voor websites](https://gradiently.design/nl/guide/website-hero-background)

Ze passen minder goed waar mensen lang op papier lezen, of waar een merk is gebouwd op daglicht, frisheid of spel. Daar doet een lichte ondergrond met één zachte kleur hetzelfde werk.

## Een donkere kleurverloopachtergrond in CSS

```css
.dark-hero {
  background-color: #0b0f1a; /* fallback */
  background-image:
    radial-gradient(circle at 85% 15%, #1d4ed8 0%, transparent 45%),
    linear-gradient(180deg, #0b0f1a 0%, #0f172a 100%);
  color: #e5e7eb;
}

.dark-hero h1 {
  color: #ffffff;
}
```

Een blauwzwarte ondergrond met één blauw licht rechtsboven, gebroken witte lopende tekst en witte koppen. Voeg een korrellaag toe om af te maken.

Ontwerp je een hele interface in donkere modus in plaats van één achtergrond, zie dan [dark mode-ontwerp](https://gradiently.design/nl/guide/dark-mode-design). Veel Marks op de Markt zijn gebouwd op donkere ondergronden, en ze maken vanzelf ruimte voor je woorden door hun rustigste deel achter de tekst te schuiven.

## FAQ

### Hoe laat ik een donkere kleurverloopachtergrond er goed uitzien?

Gebruik een getint bijna-zwart in plaats van puur zwart, voeg één verlichte kleur uit het midden toe uit dezelfde familie en werk af met fijne korrel.

### Waarom heeft mijn donkere kleurverloop strepen?

Donkere overgangen beslaan weinig kleurwaarden, dus de stappen zijn breed en goed zichtbaar. Voeg korrel toe, vergroot het bereik en exporteer in hoge kwaliteit.

### Welke tekstkleur werkt op een donker kleurverloop?

Wit voor koppen en gebroken wit zoals `#e5e7eb` voor lopende tekst, geplaatst in het donkerste deel. Zorg voor minstens 4,5:1 contrast voor lopende tekst.

### Moet ik puur zwart in een kleurverloop gebruiken?

Zelden. Een bijna-zwart met een lichte tint loopt natuurlijker over en geeft het kleurverloop diepte.

### Welke kleuren passen bij een zwart kleurverloop?

Diep violet, teal, blauw, sintel-oranje en roze werken allemaal als enkele verlichte kleur op een bijna-zwarte ondergrond in dezelfde tintfamilie.