# Een kleurverloop er goed laten uitzien: zeven checks

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

De meeste slechte kleurverlopen falen op dezelfde paar tests. Laat elke overgang in volgorde door deze zeven checks lopen en je weet precies wat je moet veranderen voordat iemand anders het ziet.

## The short version

- Een kleurverloop ziet er goed uit als zijn kleuren elkaar raken zonder grijs te worden, zijn stops ongelijk verdeeld zijn en zijn licht van één plek lijkt te komen.
- Grijze of modderige middens ontstaan als twee tegengestelde kleuren direct mengen, een overbruggende kleur of mengen in OKLCH lost dat op.
- Een kleine hoeveelheid korrel, rond 2 tot 6 procent dekking, verbergt banding en laat een digitaal kleurverloop als oppervlak aanvoelen.
- Een goed kleurverloop laat altijd een rustig gebied waar woorden met sterk contrast kunnen staan.
- Exporteer kleurverlopen als PNG of video van hoge kwaliteit in plaats van gecomprimeerde JPEG, die zichtbare strepen maakt.

Weten hoe je een kleurverloop er goed laat uitzien komt neer op zeven checks, in volgorde: kleuren die elkaar raken zonder grijs te worden, ongelijk geplaatste stops, licht dat uit één richting komt, een ondergrond die de sfeer zet, een vleugje korrel, een rustige ruimte voor woorden en een export die het vloeiend houdt. Elk is een snelle test met een duidelijke oplossing. Bijna elk kleurverloop dat goedkoop oogt faalt op minstens twee ervan, en die twee herstellen doet meestal meer dan de kleuren helemaal veranderen.

| Check | De test | Als het faalt |
| --- | --- | --- |
| 1. Schoon midden | Is het middenpunt grijs of bruin? | Voeg een overbruggende kleur toe of meng in OKLCH |
| 2. Ongelijke stops | Is elke kleur even breed? | Geef één kleur het grootste deel van de ruimte |
| 3. Eén licht | Kun je zeggen waar het licht is? | Maak één kant of hoek helderder |
| 4. Een ondergrond | Is hij duidelijk donker of duidelijk licht? | Duw de basis donkerder of bleker |
| 5. Korrel | Zie je strepen? | Voeg 2 tot 6 procent ruis toe |
| 6. Ruimte voor woorden | Leest de tekst overal? | Maak het gebied erachter rustiger |
| 7. Export | Overleeft het de upload? | PNG voor stilstaand beeld, hoge bitrate voor video |

De hele check op één pagina. Loop hem van boven naar beneden door, latere oplossingen hangen af van eerdere.

## 1. Kleuren die elkaar schoon raken

Als twee kleuren die op het wiel tegenover elkaar liggen direct mengen, zakt het midden weg in grijs. Blauw naar oranje en groen naar roze zijn de gebruikelijke boosdoeners. Voeg tussen de twee een overbruggende kleur toe, zodat de overgang om het wiel heen reist in plaats van door het midden, of meng in een perceptuele kleurruimte. [Modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients) en [interpolatie van kleurverlopen](https://gradiently.design/nl/guide/gradient-interpolation) leggen beide uit.

- Faalt: grijs midden: `linear-gradient(90deg, #2563eb 0%, #f97316 100%)`
- Voldoet: magenta brug: `linear-gradient(90deg, #2563eb 0%, #c026d3 50%, #f97316 100%)`
- Voldoet: gemengd in OKLCH: `linear-gradient(90deg in oklch, #2563eb 0%, #f97316 100%)`

Dezelfde twee kleuren op drie manieren. Een brug of een perceptuele menging houdt het midden levend.

## 2. Ongelijk geplaatste stops

Gelijk verdeelde kleuren lezen als een verloop uit een voorinstelling. In de natuur domineert meestal één kleur en gebeurt de verandering over een korte afstand: een lucht is vooral blauw met een smalle warme band aan de horizon. Geef je hoofdkleur 60 tot 70 procent van het beeld en laat de anderen laat arriveren. [Kleurstops van kleurverlopen](https://gradiently.design/nl/guide/gradient-stops) gaat dieper in op plaatsing en hints.

- Gelijke derden: `linear-gradient(180deg, #1e3a8a 0%, #7c3aed 50%, #f472b6 100%)`
- Zwaarder bovenaan: `linear-gradient(180deg, #1e3a8a 0%, #312e81 55%, #7c3aed 82%, #f472b6 100%)`

Dezelfde drie kleuren. De gewogen versie heeft sfeer, de gelijke heeft een formule.

## 3. Licht uit één richting

Een goed kleurverloop voelt belicht. Kies waar het licht vandaan komt, meestal een bovenhoek, en maak dat gebied het helderst en meest verzadigd. Al het andere valt ervan weg. Kun je de lichtbron niet aanwijzen, dan voelt het kleurverloop vlak, welke kleuren je ook gebruikt. Een zacht [radiaal kleurverloop](https://gradiently.design/nl/guide/radial-gradient) over een lineair gelegd is de snelste manier om het toe te voegen.

## 4. Een ondergrond die de sfeer zet

Bepaal of het ontwerp donker of licht is en leg je vast. Een kleurverloop dat van middenviolet naar middenroze dwaalt heeft geen ondergrond en voelt dus besluiteloos. Een bijna zwarte basis laat kleuren gloeien, een warm gebroken wit laat ze gedrukt voelen. Duw de basis verder dan comfortabel voelt en breng hem dan een stap terug.

- Geen ondergrond: `linear-gradient(135deg, #8b5cf6 0%, #ec4899 100%)`
- Donkere ondergrond, verlichte hoek: `radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%)`
- Lichte ondergrond, verlichte hoek: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f5e8ff 40%, #faf7f2 80%)`

Check 3 en 4 samen. Een duidelijke ondergrond en één licht maken van een voorinstelling een scène.

## 5. Korrel: de juiste ruisverhouding

Perfect gladde digitale kleurverlopen tonen op veel schermen strepen en ze lijken op softwarestandaarden. Een fijne ruislaag lost allebei op. Het bruikbare bereik is smal: onder ongeveer 2 procent dekking zie je het niet en boven ongeveer 8 procent leest het als bewuste textuur en niet als afwerking. Begin bij donkere kleurverlopen op 3 procent en bij bleke op 5 procent, want ruis is op lichte kleuren moeilijker te zien.

```css
.gradient {
  position: relative;
  background: radial-gradient(circle at 80% 20%, #ec4899 0%, #6d28d9 30%, #1e0b3a 65%, #0c0618 100%);
}

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

Een tegelende SVG-ruislaag op 4 procent. Verhoog of verlaag de dekking in kleine stappen terwijl je naar het donkerste gebied kijkt.

Meer korrelrecepten staan in [korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients) en [CSS-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture).

## 6. Een rustige ruimte voor woorden

De meeste kleurverlopen bestaan om een boodschap te dragen. Zoek waar de woorden komen en zorg dat dat gebied het rustigst en meest consistent van toon is, zodat elke regel hetzelfde contrast heeft. Het helderste, drukste deel van het kleurverloop hoort elders. Herstel slecht contrast nooit met een gloed achter de letters: verplaats het licht.

Een uitverkooppost waarbij een deel van de kop op een heldere plek van het kleurverloop staat en contrast verliest

Faalt check 6: de kleur loopt dwars door de woorden.

Dezelfde uitverkooppost met een rustiger, gelijkmatig gebied achter de kop zodat alle woorden duidelijk lezen

Voldoet: het gebied achter de tekst is rustiger en elke regel leest.

Dit is de check die Gradiently voor je doet. Een Mark weet waar je woorden staan: zijn rustigste gebied verplaatst zich achter de tekst, kleuren bij letters worden dieper of lichter en Auto-inkt kiest per regel lichte of donkere letters uit het eigen palet van de Mark.

## 7. Een export die het vloeiend houdt

- **Stilstaand beeld:** exporteer PNG. JPEG-compressie maakt van lange uitlopen stappen en social-apps comprimeren bij het uploaden opnieuw.
- **Video:** gebruik MP4 met hoge bitrate op het exacte platformformaat, zodat niets wordt geschaald.
- **Formaat:** exporteer op de eigen afmetingen van het platform, zoals 1080×1350 voor een Instagram-post, in plaats van de app te laten bijsnijden.
- **Controleer op een telefoon:** bekijk de geüploade versie in een donkere kamer op volle helderheid. Daar verstopt banding zich.

Overleven de strepen dit alles, dan heeft [banding in kleurverlopen](https://gradiently.design/nl/guide/gradient-banding) de diepere oplossingen.

## FAQ

### Hoe laat ik een kleurverloop er goed uitzien?

Gebruik kleuren die mengen zonder grijs te worden, plaats stops ongelijk, belicht het uit één richting, leg je vast op een donkere of lichte ondergrond, voeg een beetje korrel toe en laat een rustige ruimte voor woorden.

### Hoeveel ruis moet ik aan een kleurverloop toevoegen?

Meestal 2 tot 6 procent dekking. Begin rond 3 procent bij donkere kleurverlopen en 5 procent bij bleke, en stop zodra de strepen verdwijnen.

### Waarom ziet mijn kleurverloop er modderig uit?

Twee tegengestelde kleuren mengen via grijs. Voeg een overbruggende kleur tussen ze toe of meng in OKLCH.

### Waarom ziet mijn kleurverloop er goedkoop uit?

Waarschijnlijk zijn het twee kleuren, gelijk verdeeld, onder een hoek van 45 graden, zonder korrel. Dat zijn de standaardinstellingen van de meeste tools, dus ze lezen als niet overwogen.

### Welk bestandsformaat is het best voor kleurverlopen?

PNG voor stilstaande beelden en MP4 met hoge bitrate voor video. Gecomprimeerde JPEG toont banding in lange, vloeiende uitlopen.