# Negen fouten met kleurverlopen die je werk goedkoop laten lijken

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

De meeste kleurverlopen die goedkoop ogen, gaan op een van negen voorspelbare manieren mis. Hier is elke fout, wat hem veroorzaakt en de precieze aanpassing die hem oplost.

## The short version

- De meeste fouten met kleurverlopen hebben een handvol oorzaken: kleuren die door grijs lopen, te veel stops, zichtbare banding, zwak tekstcontrast en onaangeroerde presets.
- Een kleurverloop tussen twee tegenovergestelde tinten wordt in sRGB vaak grijs in het midden, wat je oplost met een stop in het midden of met interpolatie in OKLCH.
- Banding toont zich als zichtbare strepen in trage, donkere of subtiele kleurverlopen, en een lichte laag korrel of dither verbergt het meestal.
- Bij tekst op een kleurverloop controleer je het contrast op het slechtste punt, niet op het beste, omdat de achtergrond onder elke letter verandert.
- Een kleurverloop oogt duur als het een duidelijke opbouw heeft, drie tot vijf verwante kleuren, een consistente textuur en een reden om er te zijn.

De meest voorkomende **fouten met kleurverlopen** zijn een grijs, modderig midden, te veel kleuren, zichtbare banding, tekst die verdwijnt, harde stops, een overdaad aan regenboog, korrel die niet klopt, onaangeroerde presets en een look die gelijk is aan die van iedereen. Elke fout heeft een precieze oorzaak en een precieze oplossing. Voor geen ervan heb je een nieuwe tool nodig, alleen een scherpere blik op wat het verloop tussen de stops doet.

Deze gids behandelt de negen in de volgorde waarin je ze meestal tegenkomt, van de kleurwiskunde tot de identiteit. Wil je eerst de basis, lees dan [wat een kleurverloop is](https://gradiently.design/nl/guide/what-is-a-gradient).

## Fout 1: een grijs, modderig midden

Meng twee kleuren van tegenovergestelde kanten van de kleurencirkel, zoals blauw en oranje, en het punt halverwege is in sRGB een dof grijsbruin. De browser neemt het gemiddelde van de rode, groene en blauwe kanalen, en het gemiddelde van twee complementaire kleuren ligt dicht bij neutraal. Het resultaat lijkt op een veeg tussen twee goede kleuren.

- Voor: recht van blauw naar amber: `linear-gradient(90deg, #2563eb 0%, #f59e0b 100%)`
- Na: via een magenta midden: `linear-gradient(90deg, #2563eb 0%, #db2777 50%, #f59e0b 100%)`
- Na: geïnterpoleerd in OKLCH: `linear-gradient(in oklch 90deg, #2563eb 0%, #f59e0b 100%)`

Dezelfde twee uiteinden, drie resultaten. Een stop in het midden of interpolatie in OKLCH houdt het midden verzadigd.

Los het op door het verloop langs een kleur te leiden die op de cirkel tussen de twee ligt, of door te interpoleren in een perceptuele kleurruimte. [Modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients) behandelt beide methodes en [OKLCH in CSS](https://gradiently.design/nl/guide/css-gradient-oklch) legt de syntaxis uit.

## Fout 2: te veel kleuren

Elke kleur die je toevoegt is nog een overgang die het oog moet lezen. Voorbij vier of vijf stops leest een kleurverloop niet meer als licht dat over een oppervlak valt, maar als een strepengrafiek. Het wordt ook onmogelijk om het twee keer op dezelfde manier na te maken.

- Zeven stops: druk: `linear-gradient(135deg, #ef4444 0%, #f97316 16%, #eab308 32%, #22c55e 48%, #06b6d4 64%, #6366f1 80%, #d946ef 100%)`
- Drie verwante stops: rustig: `linear-gradient(135deg, #1e1b4b 0%, #6d28d9 55%, #f0abfc 100%)`

Drie verwante kleuren geven meer diepte dan zeven kleuren die niets met elkaar te maken hebben.

Kies één kleurfamilie, voeg een lichtere en een donkerdere verwant toe en sta daarna hooguit één accent toe. Werken met [analoge kleuren](https://gradiently.design/nl/guide/analogous-colors) is het veiligste vertrekpunt.

## Fout 3: strepen door banding

Banding is de trap van zichtbare stappen die je ziet in een traag kleurverloop, vooral een donker. Een 8-bits kanaal heeft 256 niveaus, en als een verloop een korte afstand in kleur aflegt over een breed vlak, wordt elk niveau een band van meerdere pixels breed. Zware JPEG-compressie maakt het erger.

```css
.hero {
  position: relative;
  background: linear-gradient(160deg, #0b1020 0%, #1e1b4b 60%, #312e81 100%);
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.08;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Een fijne ruislaag op ongeveer 8% dekking breekt de banden, zonder dat het vies oogt.

Korrel werkt omdat het pixels verstrooit over naburige niveaus, zodat de rand tussen twee banden verdwijnt. Exporteer als PNG of als JPEG van hoge kwaliteit. [Banding in kleurverlopen](https://gradiently.design/nl/guide/gradient-banding) loopt de exportinstellingen in detail door.

## Fout 4: tekst die verdwijnt op het kleurverloop

Een kleurverloop verandert onder elke letter. Witte tekst kan prachtig lezen op het donkere uiteinde van een verloop en op het lichte uiteinde van dezelfde regel verdwijnen. Ontwerpers controleren de kop waar hij het mooist is, en lezers komen hem tegen waar hij het slechtst is.

Een staande post met een kop direct op een druk kleurverloop, waarbij sommige letters contrast verliezen

De achtergrond loopt dwars door de woorden, waardoor sommige letters op felle kleur staan.

Dezelfde staande post, waarbij het kleurverloop achter de kop tot een rustig, donkerder vlak komt

Hetzelfde ontwerp, met het rustige deel van het veld achter de tekst geschoven.

Controleer het contrast op het lichtste punt achter lichte tekst, of op het donkerste punt achter donkere tekst. WCAG vraagt 4,5:1 voor lopende tekst en 3:1 voor grote tekst. [Kleurcontrast](https://gradiently.design/nl/guide/color-contrast-accessibility) legt de getallen uit en [tekst op een kleurverloop](https://gradiently.design/nl/guide/text-on-gradient) gaat over de plaatsing.

## Fout 5: harde stops die per ongeluk ontstaan

Als twee stops een paar procent uit elkaar staan, springt het verloop van de ene kleur naar de andere en trekt het een lijn waar niemand om vroeg. Harde stops zijn nuttig als je ze bewust inzet, voor strepen en grafieken, maar een onbedoelde naad leest als een fout.

- Stops 8% uit elkaar: een zichtbare naad: `linear-gradient(180deg, #0f172a 0%, #0f172a 46%, #7c3aed 54%, #c4b5fd 100%)`
- Gespreide stops: licht dat zacht valt: `linear-gradient(180deg, #0f172a 0%, #3b1f7a 45%, #7c3aed 75%, #c4b5fd 100%)`

Geef elke overgang echte ruimte in het veld.

## Fout 6: een overdaad aan regenboog

Een volledig spectrum is het luidste wat een kleurverloop kan doen, en het zegt zelden iets over het merk dat het gebruikt. Het draagt ook de associaties van elke tint tegelijk. Wil je een regenboog, gebruik er dan een korte boog van en houd de helderheid in de hand. [Regenboogkleurverlopen](https://gradiently.design/nl/guide/rainbow-gradient) laat smaakvolle versies zien.

## Fout 7: korrel die niet klopt

### Vermijd

- Grove korrel op de post, fijne op de story, geen op de slides
- Korrel over tekst en logo’s heen
- Korrel zo zwaar dat het op een vuile lens lijkt
- Een korreltextuur opschalen tot elk spikkeltje een vlek wordt

### Doe

- Eén korrelgrootte en sterkte voor elk formaat
- Korrel alleen op de achtergrondlaag
- Net genoeg om banding te breken en structuur te geven
- Korrel gemaakt op het exportformaat, niet uitgerekt

Textuur hoort bij een look, dus met wisselende korrel voelt een reeks ontwerpen alsof hij van drie plekken komt. [Korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients) behandelt hoeveel je gebruikt.

## Fout 8: de preset onaangeroerd gebruiken

De meeste tools bieden dezelfde verlopen van twee kleuren onder 135 graden. Ze zien er prima uit, en daarom zie je ze overal. Een preset is een vertrekpunt: verschuif één kleur, voeg een derde stop toe, pas de richting aan de lay-out aan en voeg een materiaal toe. [Een gradient generator gebruiken](https://gradiently.design/nl/guide/gradient-generator) loopt die aanpassingen door.

## Fout 9: eruitzien als iedereen

De laatste fout is de dure. Een kleurverloop dat goed gemaakt is maar in de kern gelijk is aan dat van elke concurrent, doet niets voor herkenning. De oplossing is consistentie plus iets dat moeilijk te kopiëren is, zoals een materiaal, een manier van bewegen of een manier om ruimte te maken voor woorden. [Branding met kleurverlopen](https://gradiently.design/nl/guide/gradient-branding) legt uit hoe je er een bezit.

| Fout | Snelle oplossing |
| --- | --- |
| Grijs midden | Stop in het midden of interpolatie in OKLCH |
| Te veel kleuren | Eén kleurfamilie plus één accent |
| Banding | Fijne korrel, PNG of export van hoge kwaliteit |
| Onleesbare tekst | Controleer het contrast op het slechtste punt |
| Harde stops | Spreid de stops, tenzij de rand bedoeld is |
| Overdaad aan regenboog | Gebruik een korte boog van het spectrum |
| Korrel die niet klopt | Eén korrelrecept voor elk formaat |
| Onaangeroerde preset | Verander kleur, stops, richting en textuur |
| Zelfde als iedereen | Voeg een materiaal toe en blijf consistent |

De negen oplossingen op één pagina.

## FAQ

### Waarom is mijn kleurverloop grijs in het midden?

Kleuren van tegenovergestelde kanten van de cirkel komen in sRGB gemiddeld uit op bijna neutraal. Voeg een stop in het midden toe in een tint die ertussen ligt, of interpoleer in OKLCH.

### Hoe voorkom ik banding in een kleurverloop?

Voeg een fijne ruis- of korrellaag toe met lage dekking, vermijd zware JPEG-compressie en laat donkere kleurverlopen een groter bereik in helderheid doorlopen.

### Hoeveel kleuren moet een kleurverloop hebben?

Meestal twee tot vier verwante kleuren, met hooguit één accent. Voorbij vijf stops gaan de meeste kleurverlopen druk ogen.

### Hoe maak ik tekst leesbaar op een kleurverloop?

Zet tekst op het rustigste deel van het veld en controleer het contrast waar de achtergrond in helderheid het dichtst bij je tekst ligt. Mik op 4,5:1 voor lopende tekst en 3:1 voor grote tekst.

### Zijn presets voor kleurverlopen slecht?

Nee, maar veel mensen gebruiken dezelfde. Zie een preset als vertrekpunt en verander de kleuren, stops, richting en textuur voordat je hem gebruikt.