# Blauw-paars verloop: 20 codes die schoon overlopen

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

Blauw en paars zijn buren, dus ze lopen makkelijker in elkaar over dan bijna elk ander paar. Daarom lijken ook zoveel blauw-paarse verlopen op elkaar. Hier zijn er twintig die dat niet doen.

## The short version

- Een blauw-paars verloop mengt naburige tinten zoals blauw #3b82f6, indigo #4f46e5 en violet #7c3aed, zodat de overgang schoon blijft zonder overbruggende kleur.
- Het meest voorkomende probleem bij overgangen van blauw naar paars is niet modder maar gelijkenis, omdat de standaarddiagonaal van indigo naar violet overal wordt gebruikt.
- Overgangen tussen cyaan en roze, of tussen doffe blauwtinten en doffe paarstinten, kunnen in het midden grijs worden, en interpoleren in OKLCH houdt ze helder.
- Witte tekst leest goed op indigo en violet maar faalt vaak op middenblauw en lavendel, waar diepe indigo-inkt beter werkt.
- Een donkere ondergrond, een spaarzaam gebruikte derde kleur en wat korrel laten een blauw-paars verloop doordacht ogen in plaats van standaard.

Een **blauw-paars verloop** loopt tussen naburige tinten op het kleurenwiel: blauw `#3b82f6`, indigo `#4f46e5`, violet `#7c3aed` en de zachte pervenches en lavendels eromheen. Omdat de tinten naast elkaar liggen, blijft de overgang bijna vanzelf schoon. Het moeilijkere deel is er een maken die niet lijkt op de duizenden app-iconen en conferentiedia’s die er al een gebruiken. Hieronder staan twintig codes in vier stemmingen, de gevallen waarin de overgang wél dof wordt en de tekstkleuren die op elk leesbaar zijn.

## Waarom blauw en paars zo goed overlopen

Paars is blauw met wat rood erin. Loop van het ene naar het andere en elke stap ertussen is een echte, verzadigde kleur: blauw, indigo, violet. Vergelijk dat met blauw in oranje mengen, waar het halverwege een egaal grijs is. [Analoge kleuren](https://gradiently.design/nl/guide/analogous-colors) legt het principe uit, en het [kleurenwiel](https://gradiently.design/nl/guide/color-wheel) toont waar elke tint zit.

- Middernacht: #0f0a2e
- Diep indigo: #1e1b4b
- Koningsblauw: #1d4ed8
- Blauw: #3b82f6
- Indigo: #4f46e5
- Violet: #7c3aed
- Lavendel: #a78bfa
- Pervenchemist: #c7d2fe

De familie van blauw naar paars. Kies drie of vier aangrenzende kleurvlakken en het verloop blijft de hele weg levendig.

## Donkere blauw-paarse verlopen: nacht en diepte

Begin donker en het verloop ziet er direct minder generiek uit. Een middernachtondergrond met indigo en violet licht voelt als een nachthemel, een concertzaal of een premium app. Deze vijf dragen lichte tekst prachtig.

- Middernachtindigo: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`
- Violette maanopkomst: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #1e1b4b 40%, #07051a 80%)`
- Marineblauw naar pruim: `linear-gradient(135deg, #172554 0%, #312e81 50%, #581c87 100%)`
- Horizongloed: `radial-gradient(ellipse at 50% 110%, #6366f1 0%, #1e1b4b 45%, #050414 85%)`
- Diepe stroming: `linear-gradient(200deg, #0b1023 0%, #1d4ed8 55%, #6d28d9 100%)`

Donkere blauw-paarse verlopen. Bandvorming valt het meest op bij overgangen als deze, dus voeg korrel toe voordat je exporteert.

## Zachte blauw-paarse verlopen: pervenche en lavendel

Maak de familie lichter en ze wordt rustig, dromerig en een tikje nostalgisch. Deze passen bij welzijn, slaap, briefpapier en alles wat op een zachte stemming mikt. Houd de inkt donker; wit verdwijnt op de meeste. Meer staan er in [pastelverlopen](https://gradiently.design/nl/guide/pastel-gradients).

- Pervenchewaas: `linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #ddd6fe 100%)`
- Lavendel in de ochtend: `linear-gradient(180deg, #dbeafe 0%, #e9d5ff 100%)`
- Lilawolk: `radial-gradient(circle at 30% 30%, #f5f3ff 0%, #c4b5fd 55%, #a5b4fc 100%)`
- Korenbloemveld: `linear-gradient(120deg, #bfdbfe 0%, #a5b4fc 50%, #c4b5fd 100%)`
- Papier naar violet: `linear-gradient(160deg, #f8fafc 0%, #e0e7ff 45%, #a78bfa 100%)`

Zachte overgangen van pervenche en lavendel. Diepe indigoletters lezen op elk ervan.

## Elektrische blauw-paarse verlopen

Zet de verzadiging hoger en het paar wordt luid, synthetisch en heel digitaal. Deze passen bij gaming, muziek, techlanceringen en alles nachtelijks. Gebruik ze in banden of gloeden in plaats van over een hele poster, en combineer ze met bijna zwart zodat ze iets hebben om tegen te gloeien. [Neonverlopen](https://gradiently.design/nl/guide/neon-gradients) heeft de volledige techniek.

- Elektrisch violet: `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`
- Hemel naar orchidee: `linear-gradient(90deg, #0ea5e9 0%, #6366f1 50%, #a855f7 100%)`
- Indigopuls: `radial-gradient(circle at 50% 50%, #818cf8 0%, #4338ca 40%, #0f0a2e 80%)`
- Ultraviolette draai: `conic-gradient(from 200deg at 50% 50%, #1d4ed8, #7c3aed, #c026d3, #1d4ed8)`
- Zwart naar ultraviolet: `linear-gradient(180deg, #000000 0%, #312e81 60%, #8b5cf6 100%)`

Verzadigde blauw-paarse verlopen. Het eerste is de klassieker; de rest zijn onverwachtere versies ervan.

## Blauw-paarse verlopen met een derde kleur

De snelste manier om een blauw-paars verloop de jouwe te maken is één extra kleur, spaarzaam gebruikt. Roze neemt het mee richting schemering, teal richting noorderlicht, goud richting luxe en perzik richting een zachte zonsopgang.

- Schemering met roze: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%)`
- Poollicht-teal: `linear-gradient(135deg, #0f766e 0%, #3b82f6 45%, #7c3aed 100%)`
- Indigo met goud: `radial-gradient(circle at 85% 15%, #fbbf24 0%, #4c1d95 30%, #0f0a2e 75%)`
- Lavendelzonsopgang: `linear-gradient(180deg, #c7d2fe 0%, #c4b5fd 50%, #fed7aa 100%)`
- Blauw, violet, karmozijn: `linear-gradient(120deg, #1d4ed8 0%, #7c3aed 50%, #e11d48 100%)`

In totaal twintig codes. Roze, teal en karmozijn liggen op het wiel naast blauw of paars; goud blijft een klein licht en perzik blijft bleek, zodat geen overgang via grijs loopt.

## Wanneer een blauw-paars verloop modderig wordt

Van blauw naar violet is veilig. Twee verwante overgangen niet. Cyaan in roze doorkruist een groot deel van het wiel, en doffe, grijzige blauwtinten in doffe paarstinten geven een levenloos midden. In beide gevallen is de oplossing dezelfde: interpoleer in OKLCH, dat helderheid en verzadiging gelijk houdt over de hele overgang. [Modderige verlopen](https://gradiently.design/nl/guide/muddy-gradients) en [verloopinterpolatie](https://gradiently.design/nl/guide/gradient-interpolation) gaan dieper.

```css
/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}
```

Door `in oklch` toe te voegen verandert hoe de browser de stops mengt. Oudere browsers negeren de hele declaratie, dus houd een achtergrondkleur als terugval.

## Hoe je een blauw-paars verloop minder generiek laat ogen

De diagonaal van violet naar blauw is zo bekend dat mensen hem als standaard lezen voordat ze lezen wat jij erop zette. Je hebt geen exotische kleuren nodig om dat te vermijden. Kleine, bewuste keuzes zijn genoeg, en ze stapelen op.

- **Kies eerst een ondergrond.** Een middernacht- of papierondergrond bepaalt de stemming meer dan het blauw of paars, en scheidt je meteen van de heldere standaard.
- **Haal het licht van de diagonaal.** Zet het helderste violet met een radiaal verloop in één hoek in plaats van het van rand tot rand op 135 graden te laten lopen.
- **Gebruik ongelijke stops.** Laat indigo 60 procent van het oppervlak bezetten en violet alleen het laatste stuk. Gelijke derden zien er machinaal uit.
- **Voeg één accent op één plek toe.** Een streepje roze, teal of goud, zoals in de set hierboven, blijft veel beter hangen dan de basiskleuren.
- **Werk af met korrel.** Een fijne ruislaag verbergt bandvorming en maakt van een schermovergang een oppervlak; [korrelige verlopen](https://gradiently.design/nl/guide/grainy-gradients) heeft de code.
- **Render elk formaat apart.** Het licht moet op een story en op een banner ergens verstandigs landen, niet waar een uitsnede het toevallig laat.

Stemmingsnamen helpen ook. “Middernachtindigo met een gouden rand” is een besluit dat je een heel jaar aan posts kunt herhalen; “blauw-paars verloop” niet.

## Tekst op een blauw-paars verloop

| Achtergrond | Tekst | Contrast | Oordeel |
| --- | --- | --- | --- |
| Indigo `#4f46e5` | Wit | 6,3:1 | Goed |
| Violet `#7c3aed` | Wit | 5,7:1 | Goed |
| Blauw `#3b82f6` | Wit | 3,7:1 | Alleen grote koppen |
| Lavendel `#a78bfa` | Wit | 2,7:1 | Faalt |
| Lavendel `#a78bfa` | Diep indigo `#1e1b4b` | 5,9:1 | Goed |
| Pervenchemist `#c7d2fe` | Diep indigo `#1e1b4b` | 10,7:1 | Uitstekend |

WCAG-contrastverhoudingen. Middenblauw is lichter dan het lijkt, wat veel blauw-naar-paarsontwerpen aan het blauwe uiteinde verrast.

Een vierkante LinkedIn-post die versie 3 aankondigt met witte letters op een donker indigo-violet verloop

Een LinkedIn-post op een donkere indigoondergrond. Lichte tekst, het violette licht aan één kant gehouden.

Een verticale story met donkere indigoletters op een bleek pervenche-lavendelverloop

Een story op zacht pervenche met diepe indigo-inkt.

Als woorden van het donkere naar het lichte uiteinde van hetzelfde verloop lopen, werkt geen enkele inkt overal. [Tekst op een verloop](https://gradiently.design/nl/guide/text-on-gradient) behandelt de opties. In Gradiently regelt Auto-inkt dit per regel, door lichte of donkere letters uit het eigen palet van de Mark te kiezen, zodat een blauw-paarse achtergrond nooit een kop opslokt.

## FAQ

### Wat is een goede blauw-paarse verloopcode?

Een betrouwbare is `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`. Voor iets onverwachters begin je vanuit een donkere ondergrond: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`.

### Passen blauw en paars samen in een verloop?

Ja. Het zijn buren op het kleurenwiel, dus elke stap ertussen is een schone, verzadigde kleur zoals indigo.

### Waarom ziet mijn verloop van blauw naar roze er in het midden grijs uit?

De browser mengt standaard in sRGB, wat overgangen die een groot deel van het wiel doorkruisen dof kan maken. Voeg `in oklch` toe na de hoek om het midden helder te houden.

### Welke tekstkleur hoort op een blauw-paars verloop?

Wit leest goed op indigo en violet. Op middenblauw, lavendel en pervenche is een diep indigo zoals `#1e1b4b` veiliger.

### Welke kleur ligt tussen blauw en paars?

Indigo. Een typisch indigo voor ontwerp is `#4f46e5`, en donkerdere indigotinten liggen rond `#312e81`.