# Subtiele kleurverlopen: rustige overgangen voor interfaces

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

De beste kleurverlopen in een interface zijn die waar niemand op let tot ze weg zijn. Dit zijn codes die je vandaag kunt plakken, de plekken waar ze hun geld verdienen en de ene technische valkuil die iedereen treft.

## The short version

- Een subtiel kleurverloop verandert de helderheid met slechts een paar procent, of verschuift de tint met een kleine stap, zodat een vlak verlicht lijkt in plaats van plat.
- Subtiele kleurverlopen werken het best op paginaachtergronden, kaarten, hero-secties en donkere vlakken, waar ze diepte toevoegen zonder met de inhoud te concurreren.
- Mengen in oklch houdt de helderheidsverandering van een subtiel kleurverloop gelijkmatig van het ene uiteinde naar het andere.
- Subtiele kleurverlopen vertonen meer banding dan felle, omdat er minder kleurstappen zijn tussen twee dicht bij elkaar liggende tonen, en wat ruis is de gebruikelijke oplossing.
- In een donkere interface leest een iets lichtere bovenrand als licht dat op het vlak valt.

Een **subtiel kleurverloop** loopt tussen twee kleuren die zo dicht bij elkaar liggen dat je de verandering meer voelt dan ziet: wit naar een koel gebroken wit, bijna zwart naar een iets zachter bijna zwart. Die kleine verschuiving laat een vlak verlicht lijken, en daarom gebruiken strakke interfaces ze op paginaachtergronden, kaarten en donkere panelen. De codes hieronder houden het helderheidsverschil op een paar procent; groter, en het kleurverloop wordt een kenmerk in plaats van een vlak.

## Codes voor lichte subtiele kleurverlopen

Elk begint dicht bij wit en drijft naar een zwakke tint. Kies de tint uit je merkkleur, zodat zelfs de achtergrond een spoor van identiteit draagt. Van boven naar beneden voelt het natuurlijkst, want licht komt meestal van boven.

- Papier: `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`
- Nevelblauw: `linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%)`
- Warm linnen: `linear-gradient(160deg, #fdfbf7 0%, #f5efe6 100%)`
- Lila waas: `linear-gradient(135deg, #faf8ff 0%, #f1ecfd 100%)`
- Muntwas: `linear-gradient(180deg, #f7fdfb 0%, #e9f7f2 100%)`
- Hoeklicht: `radial-gradient(circle at 0% 0%, #ffffff 0%, #f3f4f6 70%)`

Zes lichte subtiele kleurverlopen. Op een helder scherm lezen ze als zacht verlicht papier; op een telefoon in daglicht bijna als wit.

## Codes voor donkere subtiele kleurverlopen

Donkere vlakken profiteren nog meer, want puur vlak zwart lijkt op een gat in het scherm. Til de bovenkant een beetje op en laat de onderkant landen. [Kleurverlopen voor donkere modus](https://gradiently.design/nl/guide/dark-mode-gradients) behandelt complete thema’s; dit zijn de bouwstenen.

- Grafiet: `linear-gradient(180deg, #18181b 0%, #0f0f12 100%)`
- Middernacht: `linear-gradient(180deg, #111827 0%, #0b1120 100%)`
- Inktviolet: `linear-gradient(160deg, #17142a 0%, #0e0c1b 100%)`
- Bosnacht: `linear-gradient(180deg, #10201b 0%, #0a1411 100%)`
- Gloed van boven: `radial-gradient(ellipse 80% 50% at 50% 0%, #1f2937 0%, #0b0f17 100%)`
- Espresso: `linear-gradient(180deg, #1c1714 0%, #120e0c 100%)`

Zes donkere subtiele kleurverlopen. De gloed van boven past bij een hero of een modal: een zwakke plas licht van bovenaf.

## Waar subtiele kleurverlopen werken in een interface

| Vlak | Hoe subtiel | Voorbeeld |
| --- | --- | --- |
| Paginaachtergrond | Nauwelijks zichtbaar over de volle hoogte | `#ffffff` naar `#f6f7f9` |
| Kaart | Een tikje lichter aan de bovenrand | `#ffffff` naar `#fafafa` |
| Hero-sectie | Een zwakke tint die zich achter de kop verzamelt | Hoeklicht of gloed van boven |
| Knop | Lichtere bovenkant, iets diepere onderkant | `#4f46e5` naar `#4338ca` |
| Paneel in donkere modus | Bovenkant opgetild, onderkant gezakt | `#18181b` naar `#0f0f12` |
| Zijbalk of voettekst | Een stap donkerder dan de pagina, maar nog steeds verloopt | `#f8fafc` naar `#eef2f7` |

Subtiele kleurverlopen per vlak. Gebruik één richting in de hele interface, zodat het licht uit één plek lijkt te komen.

De vuistregel: een subtiel kleurverloop mag nooit het ding zijn waar je naar kijkt. Als een beoordelaar iets over het kleurverloop zegt, is het te sterk voor een achtergrond. Voor meer ingetogen looks in print en social media en op schermen zie [minimalistische achtergronden](https://gradiently.design/nl/guide/minimalist-backgrounds).

Een staande post met een korte regel tekst op een rustige, zacht verschuivende achtergrond

Een rustige achtergrond en één korte regel. Als de kleur stil blijft, doet de tekst het werk.

## Hoe je een subtiel kleurverloop tint met je merkkleur

Een neutraal grijs kleurverloop is veilig maar anoniem. Het lichtere of donkere uiteinde tinten met een spoor van je merktint laat de hele interface verwant aanvoelen aan het logo, zonder dat iemand kan aanwijzen waarom. De truc is de tint te houden en bijna alle verzadiging weg te gooien.

1. **Pak de merktint** Zet je belangrijkste merkkleur om naar oklch of HSL en noteer alleen de tint: rond 265 voor een violet, 160 voor een groen, 30 voor een warm oranje.
2. **Houd het bijna grijs** Zet de chroma heel laag, rond 0,005 tot 0,015 in oklch, of de verzadiging onder ongeveer 30% in HSL bij heel hoge helderheid. Je wilt een fluistering van kleur, geen pastel.
3. **Stel twee helderheidswaarden in** Probeer voor lichte thema’s 99% en 96%; voor donkere thema’s ongeveer 20% en 15%. Houd beide uiteinden op dezelfde tint, zodat de overgang nooit naar grijs of een tweede kleur afdrijft.
4. **Check het naast puur wit of zwart** Zet het kleurverloop naast een effen wit of zwart blok. Als je het verschil helemaal niet ziet, verschuif dan het onderste uiteinde een tikje; als de tint van de andere kant van de kamer te zien is, verlaag dan de chroma.

Dezelfde tint kan dan doorlopen in randen, scheidingslijnen en hover-statussen, zodat het kleurverloop één onderdeel van een rustig systeem is in plaats van een los effect. Knoppen zijn de ene plek waar een iets sterkere verschuiving mag, een paar procent donkerder onderaan, omdat een vleugje volume helpt om aanklikbaar te lijken.

## Een subtiel kleurverloop schrijven in css

Hexcodes werken overal. Voor fijnere controle schrijf je de kleuren in oklch, waar het eerste getal de waargenomen helderheid is, zodat je de verschuiving exact kunt instellen: bijvoorbeeld van 99% naar 96%. Mengen in oklch houdt de verandering ook gelijkmatig over de hele lengte. [Css-kleurverloop in oklch](https://gradiently.design/nl/guide/css-gradient-oklch) legt de syntaxis uit en [css lineair kleurverloop](https://gradiently.design/nl/guide/css-linear-gradient) de basis.

```css
:root {
  --surface: linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%);
}

@supports (background: linear-gradient(in oklch, red, blue)) {
  :root {
    /* lightness 99% to 96.5%, the same faint cool tint */
    --surface: linear-gradient(180deg in oklch, oklch(99% 0.003 250) 0%, oklch(96.5% 0.006 250) 100%);
  }
}

body {
  min-height: 100vh;
  margin: 0;
  background: var(--surface);
  background-attachment: fixed;
}
```

Eerst een hex-terugval, dan een oklch-versie met een precieze helderheidsverschuiving voor browsers die kleurinterpolatie in kleurverlopen ondersteunen.

> **Vast of scrollend** `background-attachment: fixed` houdt het kleurverloop vast aan het venster, zodat een lange pagina het niet uitrekt tot een onzichtbare verschuiving. Test het op mobiel, waar sommige browsers vaste achtergronden anders behandelen.

## Waarom subtiele kleurverlopen banding vertonen, en de oplossing

Twee dicht bij elkaar liggende kleuren hebben in een 8-bitsbeeld maar weinig stappen ertussen. Rek ze uit over een hero van 1920 pixels en elke stap wordt een zichtbare streep, vooral bij donkere kleurverlopen en goedkopere schermen. De volledige uitleg staat in [banding in kleurverlopen](https://gradiently.design/nl/guide/gradient-banding).

### Toont banden

- Twee donkere, heel dicht bij elkaar liggende kleuren over een volledig scherm
- Een kleurverloop opgeslagen als gecomprimeerde jpeg
- Een schone overgang zonder iets dat de stappen doorbreekt

### Blijft glad

- Een iets grotere verschuiving, of een derde kleurstop
- Gerenderd in css, of geëxporteerd als png
- Een zwakke ruislaag over het kleurverloop

Op het web haalt een kleine svg-ruistextuur met lage dekking over het kleurverloop zichtbare stappen weg zonder dat iemand de korrel opmerkt; [css-ruistextuur](https://gradiently.design/nl/guide/css-noise-texture) heeft de code. Voor socialposts en slides heeft een Gradiently Mark zijn eigen korrel en wordt hij op elk formaat gerenderd, zodat een rustige achtergrond glad blijft, of het nu een story of een banner is. Wil je juist het tegenovergestelde van rustig, dan heeft [levendige kleurverlopen](https://gradiently.design/nl/guide/vibrant-gradients) de verzadigde codes.

## FAQ

### Wat is een subtiel kleurverloop?

Een kleurverloop tussen twee heel dicht bij elkaar liggende kleuren, meestal met een helderheidsverschil van slechts een paar procent, zodat het vlak zacht verlicht lijkt in plaats van zichtbaar gekleurd.

### Wat is een goed subtiel kleurverloop voor een witte achtergrond?

Probeer `linear-gradient(180deg, #ffffff 0%, #f6f7f9 100%)`, dat van wit naar een zwak koel grijs loopt.

### Waarom ziet mijn subtiele kleurverloop er streperig uit?

Kleuren die dicht bij elkaar liggen hebben weinig stappen ertussen, dus ze vertonen banding. Voeg een derde kleurstop toe, vergroot de verschuiving iets of leg er een zwakke ruistextuur overheen.

### Moeten subtiele kleurverlopen van boven naar beneden lopen?

Meestal wel. Licht komt vaak van boven, dus een iets lichtere bovenkant leest natuurlijk op zowel lichte als donkere vlakken.