# Pastel kleurverlopen die fris blijven, niet zoetig

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

Pastels zijn de makkelijkste kleurverlopen om mooi te vinden en de makkelijkste om te overdrijven. Een paar regels zorgen dat ze aanvoelen als voorjaarslicht op papier in plaats van een verjaardagstaart.

## The short version

- Een pastel kleurverloop mengt bleke kleuren met een hoge lichtheid en milde verzadiging, zoals blush, boter, lila en mint.
- Witte tekst werkt bijna nooit op pastel kleurverlopen; een donkere inkt in een diepe verwante tint leest veel makkelijker.
- Pastel kleurverlopen ogen zoetig als elke kleur even zoet en verzadigd is, en fris als één kleur stoffiger, dieper of onverwacht is.
- Een gebroken witte papieren ondergrond onder pastelkleur laat het gedrukt en rustig aanvoelen in plaats van digitaal.
- OKLCH maakt gelijkmatige pastels makkelijk: houd lichtheid en chroma vast en verander alleen de tint.

Een **pastel kleurverloop** is een mengsel van bleke, zacht getinte kleuren: blush naar boter, lila naar hemelsblauw, mint naar room. Pastels hebben een hoge lichtheid en maar een beetje verzadiging, en daarom voelen ze zacht, fris en vriendelijk. Het nadeel is dat ze ook snel te zoet worden en dat witte tekst erop bijna onleesbaar is. Beide los je op met een donkere inkt, een papieren ondergrond en één kleur die net iets minder voor de hand ligt dan de rest.

## Wat een kleur pastel maakt

Een pastel is een kleur met veel wit erin: hoge lichtheid, lage tot gemiddelde verzadiging. In de OKLCH-kleurruimte zitten de meeste pastels rond 0.88 tot 0.95 lichtheid met een kleine chroma. Dat levert een handige truc op voor pastel kleurverlopen die gelijkmatig aanvoelen: zet lichtheid en chroma vast en verander alleen de tint. Elke kleur draagt dan hetzelfde visuele gewicht en geen enkele schreeuwt.

- Pastelspectrum in OKLCH: `linear-gradient(90deg in oklch, oklch(0.9 0.07 20), oklch(0.9 0.07 140), oklch(0.9 0.07 260))`
- Blush en boter: `linear-gradient(135deg, #fecdd3 0%, #fef3c7 100%)`
- Blauweregen: `linear-gradient(135deg, #e9d5ff 0%, #bfdbfe 100%)`
- Pistacheroom: `linear-gradient(135deg, #f7fee7 0%, #d9f99d 100%)`
- Hemel en mint: `linear-gradient(135deg, #e0f2fe 0%, #d1fae5 100%)`
- Maagdenpalmwaas: `linear-gradient(135deg, #e0e7ff 0%, #fbcfe8 100%)`
- Oudroze en salie: `linear-gradient(135deg, #f3d9d5 0%, #d5e3d0 100%)`
- Zeeschuim: `linear-gradient(135deg, #ccfbf1 0%, #a5f3fc 100%)`
- Abrikozenblos: `linear-gradient(135deg, #ffedd5 0%, #fecaca 100%)`

Pastelduo’s met kopieerbare codes. De eerste is opgebouwd in OKLCH met vaste lichtheid en chroma, zodat de drie tinten even zacht aanvoelen.

## Fris of zoetig: het verschil

Pastels slaan door naar zoetig als alles even zoet is: roze, babyblauw en lila op dezelfde verzadiging, witte letters, alles afgerond. Ze voelen fris als iets in het ontwerp tegengas geeft. Dat kan een stoffigere, grijzere kleur zijn, een diepe inkt voor de woorden, een gebroken witte papieren ondergrond of een strak, serieus lettertype.

### Zoetig

- Roze, babyblauw en lila even sterk
- Witte tekst op een bleke achtergrond
- Puur witte ondergrond, volmaakt glad
- Elk element rond en bubbelig

### Fris

- Eén stoffige of onverwachte kleur, zoals salie of abrikoos
- Een diepe inkt uit een verwante tint
- Een gebroken witte papieren ondergrond met lichte korrel
- Een zelfverzekerde schreef of strakke schreefloze letter voor de woorden

## Combineer pastels met een donkere inkt

Witte letters op een pastel halen bijna nooit genoeg contrast, omdat beide erg licht zijn. De oplossing is een donkere inkt: een diepe versie van een van de eigen tinten van het kleurverloop, zoals indigo op lila of bordeaux op blush. Zo blijft het palet in één familie en leest het prettig. Hieronder staan gemeten verhoudingen voor gangbare inkten op pastel ondergronden. Voor de regels erachter, zie [kleurcontrast en toegankelijkheid](https://gradiently.design/nl/guide/color-contrast-accessibility).

| Tekstkleur | Op blush `#fbcfe8` | Op lila `#c4b5fd` |
| --- | --- | --- |
| `#ffffff` wit | 1.4:1, onvoldoende | 1.9:1, onvoldoende |
| `#6b7280` middengrijs | 3.5:1, alleen grote tekst | 2.6:1, onvoldoende |
| `#9d174d` bordeaux | 5.7:1, voldoet aan AA | 4.3:1, alleen grote tekst |
| `#312e81` indigo | 8.3:1, voldoet aan AAA | 6.2:1, voldoet aan AA |
| `#1f2937` inkt | 10.6:1, voldoet aan AAA | 8.0:1, voldoet aan AAA |

Contrastverhoudingen volgens WCAG 2. Lopende tekst heeft minstens 4.5:1 nodig, grote tekst minstens 3:1. Hoe dieper de pastel, hoe donkerder de inkt moet zijn.

- Papier: #f8f1ea
- Blush: #fbcfe8
- Lila: #e9d5ff
- Salie: #d5e3d0
- Boter: #fde68a
- Indigo-inkt: #312e81

Een compleet pastelsysteem: een papieren ondergrond, drie pastels, één warm accent en een donkere inkt voor elk woord.

## Gebruik een papieren ondergrond

Pastels op puur wit kunnen flets ogen, en op schermen is puur wit het felste wat er bestaat. Een warme gebroken witte ondergrond, zoals `#f8f1ea`, laat pastelkleuren bewust ogen, als aquarel of risoinkt op papier. Laat de pastel vanuit één hoek opbloeien en in het papier vervagen, in plaats van het hele vlak te vullen.

- Blush-gloed op papier: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #f8f1ea 55%)`
- Saliegloed op papier: `radial-gradient(circle at 85% 80%, #d5e3d0 0%, #f8f1ea 60%)`
- Lila van bovenaf: `radial-gradient(ellipse at 50% 0%, #e9d5ff 0%, #f8f1ea 65%)`

Pastelgloed op een papieren ondergrond. Het grootste deel van het vlak blijft papier, en dat houdt ze rustig.

Een lichte korrel versterkt het papiergevoel nog. Houd die heel subtiel op pastels, want ruis valt op lichte kleuren snel op; [korrelige kleurverlopen](https://gradiently.design/nl/guide/grainy-gradients) geeft startwaarden.

## Een pastel kleurverloop in CSS

In CSS komen de papieren ondergrond, de gloed en de inkt samen in een paar regels. Pastels mengen in OKLCH voorkomt dat het midden krijtachtig wordt als de tinten ver uit elkaar liggen, en een kleurhint laat het papier het grootste deel van het vlak nemen.

```css
.pastel {
  background-color: #f8f1ea; /* paper */
  background-image:
    radial-gradient(circle at 15% 10%, #fbcfe8 0%, transparent 45%),
    radial-gradient(circle at 90% 85%, #d5e3d0 0%, transparent 50%),
    linear-gradient(160deg in oklch, #f8f1ea, 60%, #e9d5ff);
  color: #312e81; /* indigo ink */
}
```

Blush- en saliegloed over een waas van papier naar lila, met indigo-inkt voor de woorden.

Houd pastelduo’s dicht bij elkaar in tint voor het schoonste resultaat, zoals bij [kleurverlopen met twee kleuren](https://gradiently.design/nl/guide/two-color-gradients). Wil je toch pastels combineren die ver uit elkaar liggen, leid ze dan via een bleek lila of boter, zodat het midden getint blijft in plaats van witgrijs te worden.

## Waar pastel kleurverlopen werken

- Beauty, huidverzorging, welzijn en parfum
- Baby, bruiloft, papierwaren en cadeaus
- Lente- en paascampagnes, bakkerijen en cafés
- Rustige onboarding en helppagina’s van software
- Zachte, dromerige esthetiek, vooral met holografische glans; zie [holografische kleurverlopen](https://gradiently.design/nl/guide/holographic-gradients)

Een staande saleplaatsing met de titel Lente-edit op een zacht pastel kleurverloop met donkere letters

Een pastelvlak met donkere inkt leest rustig en zelfverzekerd op feedformaat.

Een verticale storyversie van hetzelfde pastel saleontwerp

Dezelfde look als story, met de kleur die vanaf de bovenkant opbloeit.

Hou je van de zachtheid maar wil je meer contrast, schuif dan een stap op richting [aesthetic achtergronden](https://gradiently.design/nl/guide/aesthetic-backgrounds) met een dieper accent. Je kunt ook op de Markt zoeken naar woorden als ‘zacht lila’ of ‘bleke perzik’ om pastel Marks te vinden en er meteen mee te ontwerpen.

## FAQ

### Wat is een pastel kleurverloop?

Een pastel kleurverloop is een mengsel van bleke, zacht verzadigde kleuren zoals blush, lila, boter en mint.

### Welke tekstkleur past op een pastel kleurverloop?

Een donkere inkt, het liefst een diepe versie van een van de tinten in het kleurverloop, zoals indigo of bordeaux. Witte tekst haalt op pastels meestal niet genoeg contrast.

### Hoe laat ik de kleuren van een pastel kleurverloop gelijkmatig aanvoelen?

Bouw ze op in OKLCH met dezelfde lichtheid en chroma en verander alleen de tint, zodat elke kleur hetzelfde gewicht draagt.

### Hoe voorkom ik dat een pastel kleurverloop te zoet oogt?

Voeg één stoffige of onverwachte kleur toe, gebruik een donkere inkt voor tekst, zet het op een gebroken witte papieren ondergrond en combineer het met zelfverzekerde typografie.

### Welke achtergrondkleur past bij pastels?

Een warm gebroken wit zoals `#f8f1ea` laat pastels gedrukt en rustig ogen; puur wit kan ze flets laten lijken.