# 60 kleurcombinaties voor kleurverlopen die werken, met codes

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

Zestig kleurverlopen, gesorteerd op het gevoel dat je zoekt in plaats van op tint. Elk is een live CSS-code die je kunt kopiëren, en elke groep legt de regel uit waardoor de overgangen werken.

## The short version

- De beste kleurcombinaties voor kleurverlopen gebruiken naburige tinten, die zuiver in elkaar overlopen, of overbruggen ver uiteenliggende tinten met een gekozen middenkleur.
- Rustige kleurverlopen houden lichtheid en tint dicht bij elkaar; krachtige kleurverlopen drijven verzadiging en afstand tussen tinten op.
- Donkere kleurverlopen werken het best als bijna zwarte ondergrond met één verlichte kleur, en pastelkleurverlopen als bleke buren met donkere inkt voor tekst.
- Eerst op sfeer en dan op tint kiezen, geeft consistentere resultaten dan kleuren één voor één uitzoeken omdat je ze mooi vindt.
- Elke combinatie hier kan onderscheidender worden met een derde kleur, een andere hoek of een laag korrel.

De beste **kleurcombinaties voor kleurverlopen** volgen een van twee regels: ze gebruiken tinten die naast elkaar op de kleurencirkel liggen, zodat de overgang zuiver blijft, of ze overbruggen ver uiteenliggende tinten met een gekozen middenkleur, zodat hij nooit grijs wordt. Hieronder staan 60 combinaties die die regels volgen, gegroepeerd op sfeer: rustig, krachtig, warm, koel, donker en pastel. Kopieer elk staal als CSS, en lees de uitleg onder elke groep om te zien waarom ze werken, zodat je je eigen kunt maken.

Alles hier is gewone CSS met hexkleuren, dus het werkt in elke browser, en dezelfde codes kun je in elke ontwerptool intypen. Is een term nieuw, dan legt [wat een kleurverloop is](https://gradiently.design/nl/guide/what-is-a-gradient) stops en hoeken uit.

## Rustige kleurcombinaties voor kleurverlopen

Rustige kleurverlopen houden hun kleuren dicht bij elkaar in tint en lichtheid. Niets springt eruit, dus het oog rust. Ze zijn goede achtergronden voor lezen, welzijnsmerken, portfolio’s en alles wat stil moet voelen. Salie en steen bijvoorbeeld beweegt maar een klein stukje over de cirkel en verliest onderweg wat lichtheid, wat leest als schaduw op een muur in plaats van als kleureffect.

- Zeeglas: `linear-gradient(135deg, #e0f2f1 0%, #b2dfdb 50%, #80cbc4 100%)`
- Ochtendmist: `linear-gradient(180deg, #f1f5f9 0%, #cbd5e1 100%)`
- Salie en steen: `linear-gradient(135deg, #e7e5d8 0%, #b5c4a8 50%, #7d9275 100%)`
- Lavendelschemer: `linear-gradient(160deg, #ede9fe 0%, #c4b5fd 55%, #a78bfa 100%)`
- Stil water: `linear-gradient(180deg, #dbeafe 0%, #93c5fd 60%, #60a5fa 100%)`
- Zandbank: `linear-gradient(135deg, #fdf6e3 0%, #f3e1c1 50%, #d9b99b 100%)`
- Eucalyptus: `linear-gradient(135deg, #d8e8e0 0%, #9fc2b0 50%, #5f8f7b 100%)`
- Leisteenblauw: `linear-gradient(160deg, #cbd5e1 0%, #94a3b8 55%, #64748b 100%)`
- Havermelk: `linear-gradient(180deg, #faf7f2 0%, #eee4d4 100%)`
- Maansteen: `linear-gradient(135deg, #eef2ff 0%, #e0e7ff 50%, #c7d2fe 100%)`

Rustig: één tintfamilie, kleine stappen in lichtheid. Ze dragen donkere tekst met gemak.

## Krachtige kleurcombinaties voor kleurverlopen

Krachtige kleurverlopen gebruiken verzadigde kleuren en meer afstand over de cirkel. Ze trekken de aandacht in een drukke feed, op een uitverkoopbanner of een lanceringspagina. De truc is paren kiezen waarvan de rechte overgang helder blijft. Magenta naar amber gaat via koraal; kobalt naar koraal gaat via paars. Geen van beide komt in de buurt van grijs, en daarom ogen ze van begin tot eind levendig.

- Elektrisch violet: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #db2777 100%)`
- Hete citrus: `linear-gradient(135deg, #f97316 0%, #facc15 100%)`
- Tropische punch: `linear-gradient(135deg, #ec4899 0%, #f97316 100%)`
- Signaal: `linear-gradient(90deg, #dc2626 0%, #f97316 50%, #facc15 100%)`
- Ultramarijn flits: `linear-gradient(135deg, #1d4ed8 0%, #06b6d4 100%)`
- Magenta naar amber: `linear-gradient(135deg, #c026d3 0%, #f59e0b 100%)`
- Jungle: `linear-gradient(135deg, #15803d 0%, #84cc16 100%)`
- Kobalt en koraal: `linear-gradient(135deg, #2563eb 0%, #f43f5e 100%)`
- Druivenlimonade: `linear-gradient(135deg, #7e22ce 0%, #e879f9 100%)`
- Limoen en petrol: `linear-gradient(135deg, #0d9488 0%, #a3e635 100%)`

Krachtig: hoge verzadiging, paren zo gekozen dat het midden helder blijft. Gebruik witte tekst op het donkerste uiteinde.

## Warme kleurcombinaties voor kleurverlopen

Warme kleurverlopen leven tussen rood en geel en voelen zonnig, smakelijk en menselijk. Ze passen bij eten, horeca, lifestyle en alles wat persoonlijk is. De meeste voegen een donkerder, roder uiteinde toe zodat de overgang gewicht heeft: Gouden uur loopt van bleke honing naar gebrand amber, zoals laat licht langs een muur naar beneden zakt. Voor de psychologie van temperatuur, zie [warme en koele kleuren](https://gradiently.design/nl/guide/warm-and-cool-colors).

- Gouden uur: `linear-gradient(180deg, #fde68a 0%, #f59e0b 55%, #b45309 100%)`
- Terracotta: `linear-gradient(135deg, #fed7aa 0%, #ea580c 60%, #9a3412 100%)`
- Perziksorbet: `linear-gradient(135deg, #ffedd5 0%, #fdba74 50%, #fb7185 100%)`
- Sintel: `linear-gradient(180deg, #fbbf24 0%, #dc2626 55%, #450a0a 100%)`
- Woestijnroos: `linear-gradient(135deg, #f5d0c5 0%, #d4938b 50%, #a15c5c 100%)`
- Honing: `linear-gradient(135deg, #fef3c7 0%, #fcd34d 50%, #d97706 100%)`
- Kaneel: `linear-gradient(135deg, #f5d0a9 0%, #c2703d 55%, #7c3a1d 100%)`
- Zonsondergangstrook: `linear-gradient(180deg, #fde047 0%, #fb923c 35%, #e11d48 70%, #7e22ce 100%)`
- Abrikoos en pruim: `linear-gradient(135deg, #fdba74 0%, #9d174d 100%)`
- Baksteen en goud: `linear-gradient(135deg, #991b1b 0%, #f59e0b 100%)`

Warm: rode, oranje en gele buren, meestal met een donkerder uiteinde voor diepte. Voor meer, zie [zonsondergangkleurverlopen](https://gradiently.design/nl/guide/sunset-gradient).

## Koele kleurcombinaties voor kleurverlopen

Koele kleurverlopen zitten tussen groen en violet en voelen schoon, rustig en precies. Ze zijn de natuurlijke thuisbasis van technologie, gezondheid, financiën en water. Blauw is het anker van de meeste, en daarom ogen ze betrouwbaar, en daarom heeft een koel kleurverloop een onderscheidend detail nodig, zoals een violet uiteinde of een verschuiving naar petrol, om niet op elke bank te lijken. Meer blauwen staan in [blauwe kleurverlopen](https://gradiently.design/nl/guide/blue-gradient).

- Gletsjer: `linear-gradient(180deg, #ecfeff 0%, #a5f3fc 50%, #22d3ee 100%)`
- Diepe lagune: `linear-gradient(135deg, #06b6d4 0%, #0e7490 55%, #164e63 100%)`
- Noords: `linear-gradient(135deg, #e2e8f0 0%, #93c5fd 50%, #3b82f6 100%)`
- Indigonacht: `linear-gradient(180deg, #6366f1 0%, #312e81 100%)`
- Mint naar lucht: `linear-gradient(135deg, #6ee7b7 0%, #38bdf8 100%)`
- Maagdenpalm: `linear-gradient(135deg, #c7d2fe 0%, #818cf8 100%)`
- Arctisch petrol: `linear-gradient(135deg, #99f6e4 0%, #14b8a6 50%, #115e59 100%)`
- Blauw uur: `linear-gradient(180deg, #1e3a8a 0%, #6366f1 55%, #c4b5fd 100%)`
- IJsviolet: `linear-gradient(135deg, #e0e7ff 0%, #a78bfa 100%)`
- Oceaandiepte: `linear-gradient(180deg, #22d3ee 0%, #1d4ed8 55%, #172554 100%)`

Koel: groene, petrol, blauwe en violette buren. Een lichte tintverschuiving laat ze minder zakelijk voelen.

## Donkere kleurcombinaties voor kleurverlopen

Donkere kleurverlopen zijn bijna zwarte ondergronden waaruit één verlichte kleur oprijst. Ze voelen luxe, nachtelijk en filmisch, en ze laten witte letters scherp ogen. Houd het donkere uiteinde licht gekleurd in plaats van puur zwart, zodat de overgang iets heeft om doorheen te reizen. Donkere hellingen vertonen snel banding, dus voeg korrel toe voordat je publiceert; zie [donkere kleurverloopachtergronden](https://gradiently.design/nl/guide/dark-gradient-backgrounds).

- Middernachtviolet: `linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%)`
- Diepzee: `linear-gradient(180deg, #020617 0%, #0c4a6e 60%, #0e7490 100%)`
- Bosbodem: `linear-gradient(160deg, #052e16 0%, #14532d 55%, #3f6212 100%)`
- Ossenbloed: `linear-gradient(135deg, #1c0508 0%, #7f1d1d 60%, #b91c1c 100%)`
- Grafiet: `linear-gradient(180deg, #0a0a0a 0%, #262626 60%, #404040 100%)`
- Inkt en sintel: `linear-gradient(160deg, #0c0a09 0%, #292524 60%, #c2410c 100%)`
- Petrol: `linear-gradient(135deg, #021a1f 0%, #0f4c5c 55%, #2a9d8f 100%)`
- Aubergine: `linear-gradient(135deg, #1a0b1f 0%, #4a1942 55%, #86198f 100%)`
- Nachtpetrol: `linear-gradient(180deg, #031716 0%, #0f3d3e 60%, #14b8a6 100%)`
- Donkere kers: `linear-gradient(160deg, #0f0306 0%, #4c0519 55%, #be123c 100%)`

Donker: een getint bijna zwart, een diep midden en één verlichte kleur aan het verre uiteinde.

## Kleurcombinaties voor pastelkleurverlopen

Pastels zijn bleke kleuren met veel lichtheid en een beetje verzadiging. Ze voelen fris, zacht en vriendelijk, en passen bij beauty, baby, papierwaren en voorjaarscampagnes. Omdat ze allemaal zo licht zijn, kunnen zelfs ver uiteenliggende pasteltinten in elkaar overlopen tot een witachtig grijs, dus de laatste twee hier lopen via een bleek lila. Zet tekst op pastels in donkere inkt in plaats van wit. Er staat meer in [pastelkleurverlopen](https://gradiently.design/nl/guide/pastel-gradients).

- Suikerspin: `linear-gradient(135deg, #fbcfe8 0%, #c4b5fd 50%, #a5f3fc 100%)`
- Perzik en lila: `linear-gradient(135deg, #fed7aa 0%, #ddd6fe 100%)`
- Pistache: `linear-gradient(135deg, #ecfccb 0%, #bbf7d0 100%)`
- Babyblauw: `linear-gradient(180deg, #e0f2fe 0%, #bae6fd 100%)`
- Citroen en blos: `linear-gradient(135deg, #fef9c3 0%, #fecdd3 100%)`
- Mint en room: `linear-gradient(135deg, #d1fae5 0%, #fef3c7 100%)`
- Poederviolet: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 50%, #c4b5fd 100%)`
- Sorbet: `linear-gradient(90deg, #fecaca 0%, #fed7aa 50%, #fef08a 100%)`
- Zeeschuim en roos: `linear-gradient(135deg, #ccfbf1 0%, #e9d5ff 50%, #fbcfe8 100%)`
- Ochtendlucht: `linear-gradient(180deg, #bae6fd 0%, #e9d5ff 50%, #fde2c4 100%)`

Pastel: bleke buren, of ver uiteenliggende pastels overbrugd door lila zodat het midden getint blijft.

## Zo gebruik je deze kleurverloopcodes

Elke code is een complete CSS-waarde voor `background`. Plak hem op elk element, of neem de hexkleuren en stopposities over in een ontwerptool. Stel op het web eerst een effen terugvalkleur in, genomen uit de donkerste of belangrijkste stop.

```css
.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}
```

Middernachtviolet op een kaart, met een terugvalkleur en witte tekst.

## Zo maak je je eigen combinatie

1. **Kies eerst de sfeer** Bepaal rustig of krachtig, warm of koel, donker of licht voordat je een kleur kiest. Dat beperkt de keuze tot een van de groepen hierboven.
2. **Kies een ankerkleur** Meestal je merkkleur of de kleur van wat je verkoopt. Zie [merkkleuren kiezen](https://gradiently.design/nl/guide/how-to-choose-brand-colors).
3. **Voeg een buur toe** Schuif 30 tot 60 graden over de kleurencirkel voor een zuivere tweede kleur. Verander ook de lichtheid een beetje, voor diepte.
4. **Overbrug alles wat ver weg ligt** Wil je een verre tint, zet dan een heldere middenkleur ertussen zodat de overgang niet grijs wordt. Zie [modderige kleurverlopen](https://gradiently.design/nl/guide/muddy-gradients).
5. **Maak hem van jou** Verander de hoek, schuif een stop weg van 50%, voeg een derde kleur of een laag korrel toe. Kleine wijzigingen zorgen dat een combinatie niet als preset oogt.

Een populaire code is een goed begin, maar duizenden andere ontwerpen beginnen daar ook. Wil je een kleurverloopidentiteit die niemand anders heeft, dan kun je een afbeelding die je mooi vindt koppelen aan haar palet en de Marks die er het dichtst bij liggen, of nieuwe maken die erop lijken.

## FAQ

### Welke kleuren passen goed samen in een kleurverloop?

Kleuren die naast elkaar op de kleurencirkel liggen, zoals blauw en violet of oranje en roze, lopen altijd zuiver in elkaar over. Verre kleuren werken als een heldere middenkleur ze overbrugt.

### Wat is de populairste kleurcombinatie voor een kleurverloop?

Violet naar roze en blauw naar cyaan behoren tot de meest gebruikte. Die populariteit is ook de reden dat ze zelden onderscheidend ogen.

### Hoeveel kleuren moet een kleurverloop hebben?

Twee is het eenvoudigst, drie geeft diepte en controle over het midden, en meer dan vijf is moeilijk zuiver te houden.

### Welke tekstkleur werkt op een kleurverloop?

Wit of bijna wit op donkere en krachtige kleurverlopen, en donkere inkt op pastel en rustige. Controleer het contrast op het lichtste punt achter de tekst.

### Kan ik deze kleurverloopcodes in Figma of Canva gebruiken?

Ja. Kopieer de hexkleuren en hun stopposities naar de gradient fill van de tool en neem de hoek over.