# Wat is een kleurverloop? Een heldere gids voor kleurovergangen

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

Een kleurverloop is het eenvoudigste idee in kleur en een van de makkelijkste om fout te doen. Hier lees je wat het is, hoe het is opgebouwd, en waarom het overal op schermen terugkwam.

## The short version

- Een kleurverloop is een geleidelijke overgang van de ene kleur naar de andere over een oppervlak, in plaats van één egale kleur.
- Elk kleurverloop wordt bepaald door zijn kleurstops, de posities van die stops, een vorm of richting, en de kleurruimte waarin ertussen wordt gemengd.
- De belangrijkste soorten zijn lineair, radiaal, conisch en mesh, en elk beweegt kleur op een andere manier door de ruimte.
- Kleurverlopen kwamen op schermen weer in de mode omdat ze licht, diepte en beweging suggereren op een manier die egale kleur niet kan.
- De meeste problemen met kleurverlopen, zoals strepen en een grijs midden, komen uit de menging zelf en zijn op te lossen met betere stops, een betere kleurruimte of een beetje korrel.

**Wat is een kleurverloop?** In design is een kleurverloop, of gradient, een vloeiende, geleidelijke verandering van de ene kleur naar de andere over een oppervlak, zoals diepblauw dat over een poster in violet overgaat. Waar een egale vulling elke pixel dezelfde kleur geeft, geeft een kleurverloop elk punt zijn eigen kleur, berekend uit een paar kleuren die jij kiest en de plek waar je ze zet. Die kleine verandering is de reden dat een kleurverloop op licht, lucht of diepte kan lijken, en ook de reden dat het er makkelijk goedkoop uit kan zien.

Deze pagina behandelt de onderdelen waaruit elk kleurverloop bestaat, de belangrijkste soorten, waar kleurverlopen worden gebruikt en waarom ze terugkwamen. Elke sectie verwijst naar een diepere gids voor wie het detail wil.

## De onderdelen van een kleurverloop

Elk kleurverloop, of het nu in een ontwerptool is getekend, in CSS is geschreven of door een game-engine wordt gerenderd, komt neer op dezelfde paar ingrediënten. Kun je ze benoemen, dan kun je elk kleurverloop precies genoeg beschrijven zodat iemand anders het kan nabouwen.

| Onderdeel | Wat het betekent | Voorbeeld |
| --- | --- | --- |
| Kleurstops | De kleuren waar het verloop doorheen gaat | `#1e1b4b`, `#7c3aed`, `#f472b6` |
| Posities van stops | Waar elke kleur staat, van 0% tot 100% | Violet op 55% in plaats van 50% |
| Vorm of richting | Het pad waarlangs de kleur beweegt | 135 graden, of een cirkel vanuit het midden |
| Interpolatie | De kleurruimte waarin tussen stops wordt gemengd | sRGB, OKLab of OKLCH |
| Textuur | Alles wat over de overgang heen ligt | Korrel, papierstructuur, een glans |

Vijf dingen beschrijven een kleurverloop volledig. De meeste mensen denken alleen aan het eerste.

Middernacht, violet, roze: `linear-gradient(135deg, #1e1b4b 0%, #7c3aed 55%, #f472b6 100%)`

Drie stops op een lijn van 135 graden. Violet staat op 55% in plaats van in het midden, zodat het donkere deel linksboven meer ruimte krijgt.

Posities van stops doen er net zo veel toe als kleuren. Verplaats de middelste stop van 50% naar 65% en dezelfde drie kleuren vertellen een ander verhaal: meer schaduw, een latere zonsopgang. Wil je richting in detail begrijpen, lees dan [welke kant een kleurverloop op moet](https://gradiently.design/nl/guide/gradient-angle).

## Vloeiende en getrapte kleurverlopen

Een vloeiend kleurverloop mengt doorlopend tussen stops. Een getrapt verloop, of een verloop met harde stops, zet twee stops op dezelfde positie, zodat de kleur springt in plaats van mengt. Harde stops maken strepen, vlaggen, voortgangsbalken en retro-zonsondergangen; het zijn nog steeds kleurverlopen, alleen staat de menging op die punten uit.

- Vloeiend: teal naar mint: `linear-gradient(90deg, #0f766e 0%, #5eead4 100%)`
- Getrapt: drie harde banden: `linear-gradient(90deg, #0f766e 0% 33%, #14b8a6 33% 66%, #5eead4 66% 100%)`
- Vloeiend: zonsondergang met vier stops: `linear-gradient(180deg, #fde68a 0%, #fb923c 45%, #db2777 70%, #312e81 100%)`
- Getrapt: zelfde zonsondergang in banden: `linear-gradient(180deg, #fde68a 0% 25%, #fb923c 25% 50%, #db2777 50% 75%, #312e81 75% 100%)`

Dezelfde kleuren, gemengd en getrapt. Getrapte versies lezen als grafisch en bewust; vloeiende versies lezen als licht.

Vloeiende kleurverlopen hebben één zwakte: schermen tonen een beperkt aantal tinten, dus een heel zachte overgang kan uiteenvallen in zichtbare strepen. Dat probleem heeft een eigen gids, [banding in kleurverlopen](https://gradiently.design/nl/guide/gradient-banding).

## De belangrijkste soorten kleurverlopen

De soort is de vorm waarlangs kleur beweegt. Vier soorten dekken bijna alles wat je tegenkomt, en [soorten kleurverlopen](https://gradiently.design/nl/guide/types-of-gradients) laat elke soort zien met live code.

- **Lineair:** kleur verandert langs een rechte lijn onder een hoek. Het werkpaard voor achtergronden, knoppen en banners. Zie [lineaire kleurverlopen in CSS](https://gradiently.design/nl/guide/css-linear-gradient).
- **Radiaal:** kleur spreidt zich naar buiten uit vanuit een punt in een cirkel of ellips, zoals een spotlight of een gloed. Zie [radiale kleurverlopen](https://gradiently.design/nl/guide/radial-gradient).
- **Conisch:** kleur draait rond een middelpunt, zoals de wijzer van een klok. Goed voor kleurenwielen, cirkeldiagrammen en glans. Zie [conic gradients](https://gradiently.design/nl/guide/conic-gradient).
- **Mesh:** meerdere kleurpunten mengen tegelijk in twee dimensies, zodat het resultaat organisch en schilderachtig oogt. Zie [mesh gradients](https://gradiently.design/nl/guide/mesh-gradients).

- Lineair: `linear-gradient(135deg, #0c4a6e 0%, #38bdf8 100%)`
- Radiaal: `radial-gradient(circle at 30% 35%, #fef3c7 0%, #f59e0b 35%, #7c2d12 100%)`
- Conisch: `conic-gradient(from 90deg at 50% 50%, #f472b6, #a78bfa, #38bdf8, #34d399, #fbbf24, #f472b6)`

Lineair, radiaal en conisch, elk als één CSS-waarde. Mesh-verlopen hebben meerdere lagen of een speciale tool nodig.

## Hoe kleuren mengen: het deel dat mensen overslaan

Tussen twee stops moet software elke tussenkleur verzinnen. Hoe dat gebeurt hangt af van de kleurruimte. De meeste tools en oudere CSS mengen in sRGB, waarin de waarden voor rood, groen en blauw in rechte lijnen worden gemengd. Dat is snel, maar het kan door doffe grijstinten lopen, vooral tussen tegenovergestelde kleuren zoals blauw en geel.

Nieuwere kleurruimtes zoals OKLab en OKLCH zijn gebouwd rond hoe mensen lichtheid en tint waarnemen, dus overgangen blijven helderder en gelijkmatiger. In CSS kun je er direct om vragen, en het verschil is makkelijk te zien. Het hele verhaal, en de oplossingen, staan in [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients).

```css
.sky {
  /* default: blended in sRGB, passes through grey */
  background: linear-gradient(90deg, #0000ff, #ffff00);
}

.sky-better {
  /* blended in OKLCH, travels round the hue wheel through teal */
  background: linear-gradient(90deg in oklch, #0000ff, #ffff00);
}
```

Eén extra zinsdeel verandert de kleurruimte. Ondersteund in de actuele versies van de grote browsers.

## Waar kleurverlopen worden gebruikt

Kleurverlopen verdienen hun plek overal waar een oppervlak belicht of levend moet aanvoelen zonder een foto toe te voegen. De meest voorkomende taken zijn achtergronden voor social posts en websites, app-iconen, knoppen en accenten in interfaces, verpakkingen, posters, en merkidentiteiten die een overgang gebruiken zoals andere merken één kleur gebruiken. Voor de identiteitskant, zie [branding met kleurverlopen](https://gradiently.design/nl/guide/gradient-branding).

Een staande social post met een korte kop op een gloeiende achtergrond met kleurverloop

Als achtergrond draagt een kleurverloop de sfeer, zodat de woorden kort kunnen blijven.

Een breedbeelddia met de titel Studionotities op hetzelfde kleurverloop als de post ernaast

Als identiteit houdt hetzelfde kleurverloop op een dia elk formaat herkenbaar.

## Waarom kleurverlopen terugkwamen

Kleurverlopen waren overal in de glanzende interfaces van de jaren 2000 en raakten daarna uit de gratie toen flat design begin jaren 2010 de schermen overnam. Ze keerden terug in een stillere vorm: minder afschuiningen en nepreflecties, meer zachte overgangen van twee of drie kleuren. Schermen met hoge resolutie hielpen, omdat vloeiende kleur er beter uitziet op dichte schermen, en merken die iets onderscheidenders zochten dan één egale tint vonden ruimte in overgangen. Het lange verhaal staat in [de geschiedenis van kleurverlopen](https://gradiently.design/nl/guide/history-of-gradients).

Vandaag gaan de interessantste kleurverlopen verder dan kleur. Korrel, textuur en trage beweging laten een overgang aanvoelen als een materiaal in plaats van een preset, en dat is het onderwerp van [korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients) en [textuur in kleurverlopen](https://gradiently.design/nl/guide/gradient-texture).

### Een kleurverloop dat standaard oogt

- Twee kleuren rechtstreeks uit een preset
- Gemengd in sRGB met een grijs midden
- Volkomen glad, dus banding op donkere schermen
- Uitgerekt of bijgesneden naar elk formaat

### Een kleurverloop dat doordacht oogt

- Drie tot vijf verwante kleuren met één accent
- Gemengd in OKLCH of met een gekozen middelste stop
- Een beetje korrel om strepen te verbergen en tastbaarheid toe te voegen
- Voor elk formaat opnieuw getekend

Begin je liever met een afgewerkte overgang dan er een vanaf nul te bouwen, dan heeft de [Markt](/market) duizenden Marks: complete recepten voor kleurverlopen met kleur, materiaal, korrel en licht waarmee je gratis kunt ontwerpen.

## FAQ

### Wat is een kleurverloop in eenvoudige woorden?

Een kleurverloop is een geleidelijke verandering van de ene kleur naar de andere over een oppervlak, zodat elk punt een iets andere kleur toont in plaats van één egale vulling.

### Wat zijn kleurstops in een kleurverloop?

Kleurstops zijn de kleuren waar een kleurverloop doorheen gaat, elk op een positie tussen 0% en 100%. De software mengt elke kleur ertussenin.

### Wat zijn de belangrijkste soorten kleurverlopen?

De belangrijkste soorten zijn lineair, radiaal, conisch en mesh. Lineair volgt een rechte lijn, radiaal spreidt zich uit vanuit een punt, conisch draait rond een middelpunt en mesh mengt meerdere punten in twee dimensies.

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

Tegenovergestelde kleuren mengen in de sRGB-kleurruimte loopt door grijs. Voeg een gekozen middelste stop toe, gebruik tinten die dichter bij elkaar liggen, of meng in OKLCH.

### Waarom heeft mijn kleurverloop strepen?

Schermen tonen een beperkt aantal tinten per kanaal, dus subtiele overgangen verspringen zichtbaar. Een beetje korrel of ruis toevoegen en zware compressie vermijden verbergt de stappen.