# Korrelig kleurverloop: waarom wat ruis kleur duur laat ogen

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

Een schoon kleurverloop oogt als een standaardinstelling van een scherm. Hetzelfde kleurverloop met een fijne laag korrel oogt als een druk, een filmbeeld of een geschilderde muur. Dit is waarom, hoeveel je toevoegt en hoe je het doet.

## The short version

- Een korrelig kleurverloop is een verloop van kleuren met een fijne laag willekeurige ruis erover, zodat het oppervlak textuur heeft in plaats van volkomen glad te zijn.
- Korrel verbergt banding, omdat willekeurige variatie de zichtbare stappen breekt tussen de beperkte tinten die een scherm kan tonen.
- Korrel laat digitale kleur als iets tastbaars lezen en doet denken aan film, risodruk en mat papier.
- Korrel moet je meer voelen dan zien: begin subtiel, controleer op volle grootte en voeg alleen meer toe waar het oppervlak groot en rustig is.
- In CSS is de gebruikelijke methode een ruislaag met SVG feTurbulence over het kleurverloop, met een overvloeimodus en een lage dekking.

Een **korrelig kleurverloop** is een kleurverloop met een fijne laag willekeurige ruis erover, zodat de kleur een zichtbare textuur heeft in plaats van een volkomen glad, digitaal oppervlak. Het werd populair om een praktische en een visuele reden: korrel verbergt de strepen die gladde verlopen vaak tonen, en het laat kleur op een scherm ogen als iets dat gedrukt, gefilmd of geschilderd is. Goed gedaan merken de meeste mensen de korrel helemaal niet op. Ze vinden alleen dat de kleur er beter uitziet.

## Waarom korrel een kleurverloop mooier maakt

Er zijn drie redenen, en ze versterken elkaar.

- **Het verbergt banding.** De meeste beelden hebben 256 tinten per kleurkanaal. Een zacht verloop over een groot vlak moet daartussen stappen, en je oog pikt de stappen op als strepen. Willekeurige ruis verstrooit pixels over naburige tinten, zodat de randen tussen de stappen verdwijnen. Dit is hetzelfde idee als dithering. Zie [banding in kleurverlopen](https://gradiently.design/nl/guide/gradient-banding).
- **Het maakt het tastbaar.** Fysieke dingen zijn nooit volkomen glad. Film heeft korrel, papier heeft structuur en gedrukte inkt ligt ongelijkmatig. Een klein beetje ruis leent die associaties, zodat een vlak digitaal verloop als een materiaal gaat aanvoelen.
- **Het overleeft compressie beter.** Social platforms en berichtenapps comprimeren beelden opnieuw. Gladde verlopen zijn precies wat zware compressie tot blokken afvlakt, en een fijne korrel geeft de encoder detail om zich aan vast te houden. Test je export wel: heel sterke compressie kan ook korrel uitsmeren.

Een staande post met de titel Zacht licht op een kleurverloop met een fijne zichtbare korrel

Bij een Mark hoort korrel bij het recept en wordt die live samen met de kleur gerenderd.

Een vierkante versie van dezelfde post met een korrelig kleurverloop

Op een vierkant formaat wordt de Mark opnieuw voor dat formaat gerenderd, dus de korrel blijft fijn in plaats van te worden opgeschaald.

## Hoeveel korrel je toevoegt

De meest gemaakte fout is te veel. Zware korrel oogt als een vuile lens of een telefoonfoto bij weinig licht. De juiste hoeveelheid hangt af van de grootte van het rustige vlak, hoe donker het kleurverloop is en waar het wordt bekeken. Zie de getallen hieronder als vertrekpunten voor een ruislaag in de overvloeimodus Overlay of Soft Light, en oordeel daarna op het oog op volle grootte.

| Gebruik | Dekking om mee te beginnen | Korrelgrootte |
| --- | --- | --- |
| Achtergronden in interfaces, achter lopende tekst | Ongeveer 5 tot 10% | Fijn |
| Social posts en hero’s | Ongeveer 10 tot 20% | Fijn tot middel |
| Posters, albumhoezen, uitgesproken redactionele looks | Ongeveer 20 tot 35% | Middel tot grof |
| Donkere kleurverlopen die gevoelig zijn voor banding | Genoeg om de stappen te verbergen, niet meer | Fijn |

Vertrekpunten, geen regels. Controleer de korrel altijd op 100% zoom op het apparaat waarop het wordt bekeken.

> **De test op afstand** Zoom in tot 100%, kijk naar het ontwerp en doe dan een stap terug. Zie je de korrel vanaf een normale kijkafstand op een ontwerp met veel tekst, halveer hem dan.

## Waar je de korrel plaatst

Korrel hoeft niet gelijkmatig te zijn. Hij oogt het natuurlijkst op grote, rustige kleurvlakken en op donkere tonen, waar filmkorrel in het echt het best zichtbaar is. Houd hem lichter achter kleine tekst, want ruis aan de randen van letters laat ze zacht ogen. En houd je logo en letters boven de korrellaag, niet eronder, zodat ze scherp blijven.

### Vermijd

- Korrel zo sterk dat hij als vuil of weinig licht leest
- Korrel over logo’s en kleine tekst
- Een klein korrelig beeld dat is opgeschaald, waardoor de korrel vlekken wordt
- Gekleurde ruis met regenboogspikkels op een rustig palet

### Doe

- Korrel die je meer voelt dan ziet
- Letters en logo’s boven de korrellaag
- Korrel die op het uiteindelijke formaat is gerenderd of getegeld
- Monochrome ruis die in de kleuren eronder is gemengd

## Korrel toevoegen aan een kleurverloop in CSS

De lichtste methode is een SVG-ruisfilter als achtergrondafbeelding. `feTurbulence` genereert willekeurige ruis, `feColorMatrix` haalt de kleur eruit zodat hij niet spikkelt, en een overvloeimodus mengt hem in het kleurverloop eronder. Hogere waarden voor `baseFrequency` geven fijnere korrel, en `stitchTiles` laat de tegel zonder naden herhalen.

```css
.grainy {
  position: relative;
  isolation: isolate;
  background: linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%);
}

.grainy::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
  opacity: 0.18;
}
```

Een kleurverloop met monochrome korrel in de overvloeimodus Overlay. De `z-index: -1` binnen een geïsoleerde ouder houdt de korrel boven het kleurverloop, maar onder alle tekst.

Werk je liever met een afbeelding, dan doet een kleine ruistegel die als PNG is opgeslagen hetzelfde als de SVG. Houd hem zonder verlies: ruistegels in JPEG pikken compressieartefacten op. Voor meer patronen en trucs met textuur zonder afbeeldingen, zie [ruistextuur in CSS](https://gradiently.design/nl/guide/css-noise-texture).

## Korrel toevoegen in ontwerptools

1. **Bouw eerst het kleurverloop** Krijg de kleuren, stops en compositie goed op een schone laag. Korrel kan een modderig verloop niet redden, zie [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients).
2. **Voeg een aparte ruislaag toe** Gebruik het ruiseffect van de tool of een ruistextuur op een eigen laag boven het kleurverloop, zodat je hem kunt bijstellen zonder aan de kleur te komen.
3. **Maak hem monochroom** Haal de verzadiging uit de ruis, zodat hij geen gekleurde spikkels toevoegt, en zet de laag dan op Overlay of Soft Light.
4. **Verlaag de dekking tot hij verdwijnt en ga dan een stukje terug** De juiste hoeveelheid ligt meestal net boven het punt waarop je hem niet meer opmerkt.
5. **Exporteer op het uiteindelijke formaat, zonder verlies als het kan** Een korrelig beeld opschalen vergroot de korrel tot vlekken. Exporteer PNG op de exacte grootte, of een JPEG van hoge kwaliteit voor foto’s.

## Korrel in drukwerk

Korrel die voor een telefoonscherm is ontworpen, kan zich op papier anders gedragen. Op 300 dpi kan heel fijne ruis volledig verdwijnen, en grove ruis kan op een drukfout lijken. Maak de korrel voor posters en flyers op drukresolutie en maak een proef op het echte papier. [Kleurverlopen drukken](https://gradiently.design/nl/guide/print-gradients) behandelt de rest van het proces.

Korrel is ook een van meerdere materialen. Papier, glas en zijde veranderen elk wat een kleurverloop zegt, en [kleurverloop met textuur](https://gradiently.design/nl/guide/gradient-texture) vergelijkt ze. Elke Mark heeft een eigen korrelinstelling naast zijn kleuren en materialen, dus de balans staat al goed als je begint met ontwerpen.

## FAQ

### Wat is een korrelig kleurverloop?

Een korrelig kleurverloop is een verloop van kleuren met een fijne laag willekeurige ruis erover, zodat het textuur heeft als film of drukwerk in plaats van volkomen glad te zijn.

### Lost korrel banding in een kleurverloop op?

Meestal wel. Willekeurige ruis breekt de harde randen tussen de beperkte tinten die een scherm kan tonen, zodat de strepen niet meer zichtbaar zijn.

### Hoe voeg ik in CSS korrel toe aan een kleurverloop?

Leg een ruisafbeelding met SVG `feTurbulence` over het kleurverloop, haal de verzadiging eruit, stel `mix-blend-mode: overlay` in en gebruik een lage dekking.

### Hoeveel korrel moet ik toevoegen?

Minder dan je denkt. Begin laag, controleer op 100% zoom op het apparaat waarvoor je ontwerpt, en stop net nadat de korrel niet meer opvalt.

### Waarom oogt mijn korrel vlekkerig?

Het beeld is waarschijnlijk opgeschaald nadat de korrel was toegevoegd. Voeg korrel toe op het uiteindelijke exportformaat, of gebruik een ruistextuur die tegelt.