# Waarom je kleurverloop strepen heeft, en hoe je banding oplost

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

Je maakte een vloeiend kleurverloop en het kwam gestreept terug. Dat is banding, en het heeft een eenvoudige oorzaak en een handvol betrouwbare oplossingen. Eerst het rekenwerk, dan de remedies.

## The short version

- Banding in een kleurverloop is het verschijnen van zichtbare strepen of trappen in wat een vloeiende kleurovergang zou moeten zijn.
- Banding ontstaat omdat de meeste afbeeldingen maar 256 niveaus per kleurkanaal opslaan, dus een subtiele overgang over een groot vlak moet tussen een klein aantal tinten springen.
- Banding is het ergst in donkere kleurverlopen, subtiele kleurverlopen, grote kleurverlopen en sterk gecomprimeerde afbeeldingen of video’s.
- Fijne korrel of dither toevoegen is de betrouwbaarste oplossing, omdat willekeurige variatie de randen tussen de trappen verbergt.
- Exporteren op hoge kwaliteit, formaten met 256 kleuren zoals GIF vermijden en de overgang meer kleurbereik geven, verminderen banding nog verder.

**Banding in een kleurverloop** is wanneer een vloeiend kleurverloop zichtbare strepen of trappen toont in plaats van een doorlopende overgang. Het gebeurt omdat digitale afbeeldingen maar een beperkt aantal tinten per kleur kunnen opslaan, meestal 256 per kanaal, en als een kleurverloop langzaam over een breed vlak verandert, moet elke tint een band van pixels bedekken. Je oog is heel goed in het zien van randen, dus het pikt die banden eruit. De oplossing is meestal fijne korrel toevoegen, met minder compressie exporteren of de overgang meer kleur geven om mee te werken.

## Wat banding in kleurverlopen veroorzaakt

De meeste afbeeldingen gebruiken 8 bits per kanaal: 256 mogelijke waarden voor elk van rood, groen en blauw. Dat klinkt als ruim genoeg, en voor een sterk kleurverloop is het dat ook. Het probleem begint als de kleuren aan beide uiteinden dicht bij elkaar liggen.

Neem een grijs kleurverloop van `#202020` naar `#303030` over een scherm van 1920 pixels breed. Elk kanaal gaat maar van 32 naar 48, dat zijn 16 stappen. Het kleurverloop bevat dus 16 verschillende tinten, elk ongeveer 120 pixels breed. Geen enkele software kan het vloeiender maken, want er zijn geen tussentinten om te gebruiken.

- Banding: acht zichtbare trappen: `linear-gradient(90deg, #1e1b4b 0% 12.5%, #211d52 12.5% 25%, #242059 25% 37.5%, #272260 37.5% 50%, #2a2467 50% 62.5%, #2d266e 62.5% 75%, #302875 75% 87.5%, #332a7c 87.5% 100%)`
- Bedoeld: één vloeiende overgang: `linear-gradient(90deg, #1e1b4b 0%, #332a7c 100%)`

Het bovenste staal overdrijft banding met acht harde trappen, zodat je het op elk scherm ziet. Echte banding lijkt op de zachte strepen die je krijgt als een donkere, subtiele overgang zoals de tweede breed wordt uitgerekt of gecomprimeerd.

## Waar banding het meest opvalt

| Situatie | Waarom er banding ontstaat |
| --- | --- |
| Donkere kleurverlopen | Mensen zien kleine verschillen tussen donkere tinten makkelijk, en donkere overgangen beslaan vaak maar een paar waarden |
| Subtiele overgangen met weinig contrast | Weinig stappen tussen de eindkleuren, dus elke band is breed |
| Grote vlakken | Hetzelfde aantal stappen verdeeld over meer pixels geeft bredere banden |
| JPEG en uploads op social | Compressie vereenvoudigt gladde vlakken tot vlakke blokken |
| Video | Streamingcodecs en 8-bit video maken zachte hellingen plat, vooral in donkere scènes |
| GIF en PNG-8 | Maar 256 kleuren in de hele afbeelding, voor alle kanalen samen |

Een donker, subtiel, schermvullend kleurverloop geüpload als gecomprimeerde JPEG raakt bijna elke rij tegelijk.

Daarom vragen [donkere kleurverloopachtergronden](https://gradiently.design/nl/guide/dark-gradient-backgrounds) en [aurora-kleurverlopen](https://gradiently.design/nl/guide/aurora-gradients) de meeste zorg. Hun schoonheid hangt af van lange, zachte hellingen door donkere tinten, en dat is precies het recept voor banding.

## Zo los je banding in kleurverlopen op

1. **Voeg korrel of dither toe** Een fijne laag willekeurige ruis verspreidt pixels tussen naburige tinten, zodat het oog de randen niet meer vindt. Het is de betrouwbaarste oplossing, en het laat het oppervlak ook rijker ogen. Zie [korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients).
2. **Geef de overgang meer bereik** Grotere verschillen in lichtheid of tint tussen de eindkleuren betekenen meer beschikbare stappen en smallere banden. Een kleurverloop dat ook een beetje van tint verschuift, gebruikt meer combinaties van rood, groen en blauw dan een pure lichtheidshelling.
3. **Werk in 16 bits waar het kan** Beeldbewerkers die 16 bits per kanaal ondersteunen, houden tijdens het werken veel meer niveaus vast. Zet pas bij het exporteren om naar 8 bits, met dithering aan.
4. **Exporteer op hoge kwaliteit** Gebruik PNG voor vlakke graphics, of JPEG op een hoge kwaliteitsinstelling voor fotografische beelden. Vermijd GIF en PNG-8, die in totaal maar 256 kleuren bewaren.
5. **Exporteer op het uiteindelijke formaat** Een kleine kleurverloopafbeelding vergroten rekt de banden mee uit. Render of exporteer op het exacte formaat, of groter, in plaats van op te schalen.

> **Je scherm kan meespelen** Sommige schermen tonen minder tinten dan het bestand bevat, en browsers verschillen in of ze kleurverlopen ditheren. Controleer belangrijk werk op meer dan één scherm, waaronder een telefoon op volle helderheid.

## Banding oplossen in CSS-kleurverlopen

Browsers renderen CSS-kleurverlopen live, dus er is geen exportinstelling om te veranderen. Twee dingen helpen. Maak ten eerste de helling breder of voeg een tintverschuiving toe. Leg ten tweede een subtiele ruislaag over het kleurverloop, die precies werkt als korrel in een afbeelding. [CSS-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture) laat lichte manieren zien om die laag te maken zonder grote afbeeldingsbestanden.

### Banding

- `linear-gradient(#0b0b12, #14141f)` over een heel scherm
- Eén tint van bijna zwart naar iets minder zwart
- Geen textuur over het oppervlak

### Houdt stand

- `linear-gradient(#0b0b12, #1e1b4b 60%, #312e81)` met meer bereik
- Een donkere helling die ook van grijs naar indigo verschuift
- Een fijne ruislaag op lage dekking erbovenop

## Banding oplossen in video en uploads op social

Sociale platforms comprimeren wat je uploadt opnieuw, en videocodecs zijn ontworpen om precies het soort subtiele detail weg te gooien dat kleurverlopen vloeiend houdt. Korrel helpt hier dubbel: het verbergt trappen en geeft de encoder echt detail om te bewaren. Upload op het aanbevolen formaat van het platform zodat het niet opnieuw wordt geschaald, en exporteer video op een royale kwaliteitsinstelling. Codeer je met ffmpeg, dan heeft x264 een instelling die is afgestemd op het behouden van korrel.

```bash
# High-quality H.264 that keeps fine grain instead of smoothing it into bands
ffmpeg -i gradient-loop.mov \
  -c:v libx264 -preset slow -crf 16 -tune grain \
  -pix_fmt yuv420p -movflags +faststart \
  gradient-loop.mp4
```

Een lagere `-crf` betekent hogere kwaliteit. `-tune grain` vertelt de encoder ruis te bewaren in plaats van weg te strijken.

Loopende videoachtergronden zijn hier extra gevoelig voor, omdat ze meestal donker en langzaam zijn. [Naadloze loopvideo’s](https://gradiently.design/nl/guide/seamless-loop-video) behandelt de rest van de export.

## Banding vanaf het begin voorkomen

- Kies kleurverlopen met genoeg verandering in lichtheid of tint voor hun formaat
- Plan korrel vanaf het begin in plaats van het als redding toe te voegen
- Houd donkere kleurverlopen iets opgetild in plaats van helemaal naar puur zwart te laten zakken
- Controleer na het uploaden op een telefoon, niet alleen op je ontwerpmonitor

Elke Mark in Gradiently wordt live gerenderd op het formaat waarin je ontwerpt, met korrel als onderdeel van het recept, en ontwerpen met een geclaimde Mark exporteren als PNG of JPEG tot drie keer het formaat van het ontwerp, dus een kleurverloop hoeft nooit uit een kleine afbeelding te worden uitgerekt.

## FAQ

### Wat is banding in een kleurverloop?

Banding zijn zichtbare strepen of trappen in een kleurverloop dat vloeiend zou moeten ogen, veroorzaakt door te weinig beschikbare tinten tussen de kleuren.

### Waarom vertonen donkere kleurverlopen meer banding?

Donkere overgangen beslaan vaak maar een paar waarden per kanaal, en mensen zien kleine verschillen tussen donkere tinten makkelijk, dus elke trap is breed en zichtbaar.

### Lost ruis toevoegen banding op?

Meestal wel. Fijne ruis of dither verspreidt pixels tussen naburige tinten, zodat het oog de randen tussen de trappen niet ziet.

### Welk bestandsformaat is het best voor kleurverlopen?

PNG voor graphics en JPEG van hoge kwaliteit voor fotografische beelden. Vermijd GIF en PNG-8, die maar 256 kleuren bewaren.

### Waarom vertoont mijn kleurverloop banding na het uploaden op social media?

Platforms comprimeren afbeeldingen en video opnieuw. Voeg korrel toe, upload op het aanbevolen formaat en exporteer op hoge kwaliteit, zodat de encoder detail heeft om te bewaren.