# Iriserende verlopen: parelmoeren kleurschakeringen met codes

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

Iriserend is de rustige neef van holografisch: een parel, een zeepbel, de binnenkant van een schelp. Dit zijn de kleuren, codes en regels waardoor het een oppervlak lijkt en geen regenboog.

## The short version

- Een iriserend verloop mengt meerdere bleke, nauw verwante tinten, meestal lila, munt, blos, hemelsblauw en crème, zodat het oppervlak van kleur lijkt te veranderen terwijl je erlangs kijkt.
- Iriserend verschilt van holografisch ontwerp in sterkte: holografisch doorloopt de volledige regenboog met hoge verzadiging, terwijl iriserend zacht, bleek en grotendeels neutraal blijft.
- Het parelmoereffect komt van een lichte basis, lage verzadiging, één wit hoogtepunt en tinten die op het kleurenwiel naast elkaar liggen.
- Donker iriserend, zoals een olievlek of een kevervleugel, gebruikt hetzelfde idee op een bijna zwarte basis met diep turquoise, violet en brons.
- Tekst op een iriserende achtergrond heeft een rustig, gelijkmatig gebied erachter nodig, want bleke verschuivende tinten geven weinig contrast voor lichte letters en onrustig contrast voor donkere.

Een **iriserend verloop** is een mix van bleke tinten die dicht bij elkaar liggen, meestal lila, munt, blosroze, hemelsblauw en een warme crème, over een lichte basis gelegd met een zacht wit hoogtepunt. Het effect bootst echte iriserende dingen na: parels, zeepbellen, de binnenkant van een abalone-schelp. De kleuren zijn zacht en veranderen geleidelijk over het oppervlak, dus het leest als een glans in plaats van een streep kleur. De codes hieronder kun je direct plakken in CSS of elke ontwerptool die hex accepteert.

## Codes voor iriserende verlopen

Elk begint bij een bijna wit of bijna zwart en voegt tinten toe die naast elkaar liggen. Kopieer er een zoals hij is, of wissel één stop om hem de jouwe te maken.

- Parel: `radial-gradient(ellipse at 30% 20%, #ffffff 0%, #f3eefa 25%, #e4ecf7 50%, #f4e9ef 75%, #ece6f6 100%)`
- Opaal: `linear-gradient(135deg, #f6f1ff 0%, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff 100%)`
- Zeepbel: `radial-gradient(circle at 40% 35%, #ffffff 0%, #f0f9ff 30%, #fce7f3 55%, #e0f2fe 75%, #fef9c3 100%)`
- Abalone: `conic-gradient(from 160deg at 60% 40%, #e8f1f2, #d7e3f4, #efdcef, #e3f2e6, #f3ecd8, #e8f1f2)`
- Olievlek: `linear-gradient(125deg, #0d0f1a 0%, #1d3b4f 25%, #3b2a5c 45%, #1f4d3a 65%, #4a3a12 82%, #0d0f1a 100%)`
- Kevervleugel: `linear-gradient(140deg, #052e2b 0%, #0f766e 35%, #1e3a8a 65%, #4c1d95 100%)`

Vier lichte iriserende mixen en twee donkere. Alle zes houden hun tinten gelijk in sterkte, en dat voorkomt dat ze als regenboog lezen.

Merk op wat de lichte gemeen hebben: geen enkele stop is volledig verzadigd, en het lichtste punt is zuiver of bijna zuiver wit. Duw een stop naar een sterke kleur en de parel wordt een [pastelverloop](https://gradiently.design/nl/guide/pastel-gradients) of, nog verder, een regenboog.

## Iriserend of holografisch

Mensen gebruiken de twee woorden vaak voor hetzelfde, maar in design beschrijven ze verschillende looks. Holografisch bootst foliestickers en hologrammen op bankpassen na: elke tint, hoge verzadiging, harde banden. Iriserend bootst natuurlijke oppervlakken na die rustig van kleur veranderen. Wil je de luidere versie, dan behandelt [holografische verlopen](https://gradiently.design/nl/guide/holographic-gradients) die volledig.

| Kenmerk | Iriserend | Holografisch |
| --- | --- | --- |
| Verzadiging | Laag, bleke tinten | Hoog, volledige regenboog |
| Basis | Bijna wit of bijna zwart | Vaak zilver of de kleuren zelf |
| Overgangen | Lang en zacht | Kort, vaak met banden |
| Referentie uit de echte wereld | Parel, schelp, zeepbel, olie op water | Folie, stickers, beveiligingshologrammen |
| Sfeer | Rustig, verfijnd, huidverzorging, bruids | Speels, luid, Y2K, muziek |

De snelste test: knijp je ogen dicht. Zie je nog onderscheiden tinten, dan is het holografisch. Zie je een zacht bleek oppervlak met een vleugje kleur, dan is het iriserend.

## Een iriserend verloop van nul opbouwen

1. **Kies de basis** Licht iriserend begint bij wit of een licht warm gebroken wit zoals `#fbf9f6`. Donker iriserend begint bij een blauwzwart zoals `#0d0f1a`. De basis moet een derde of meer van het oppervlak beslaan.
2. **Kies drie tot vijf naburige tinten** Loop in kleine stappen over het kleurenwiel: lila naar hemelsblauw naar munt naar crème naar blos. Houd ze op gelijke lichtheid, zodat er geen naar voren springt.
3. **Verlaag de verzadiging** Lijkt een tint op een kleur die je door de kamer kunt benoemen, dan is hij te sterk. Mik voor lichte versies op tinten die vooral wit zijn met een spoor van kleur.
4. **Voeg één hoogtepunt toe** Een kleine witte radiale vlek, richting een hoek verschoven, vertelt het oog waar het licht vandaan komt. Eén is genoeg; twee gaan op een glanzende knop lijken.
5. **Rond af met fijne korrel** Bleke overgangen krijgen op schermen makkelijk banden. Een beetje ruis breekt de stappen op, wat [kleurbanden in verlopen](https://gradiently.design/nl/guide/gradient-banding) uitlegt met de oplossing.

De stap die het meest telt is de derde. De meeste iriserende ontwerpen die mislukken zijn gewoon te kleurrijk. Echte parel is overweldigend wit; de kleur is iets wat je pas als tweede opmerkt.

- Schelpwit: #fbf9f6
- Lila glans: #ece6f6
- Muntglans: #dff3f4
- Hemelglans: #e4ecf7
- Blosglans: #fbe7f0
- Crèmeglans: #fff6e0
- Grafietinkt: #3d3a4a

Een werkend iriserend kleurenpalet: een basis, vijf glanzen en één donkere inkt voor tekst. De inkt geeft de bleke kleuren iets om tegenaan te staan.

## Iriserende CSS met een kleurverschuiving bij hover

Op het web kun je de glans laten bewegen als iemand ernaar wijst, het ene wat een gedrukte parel doet en een vlakke afbeelding niet. Door de hoek met `@property` te registreren kan de browser hem vloeiend animeren; browsers zonder ondersteuning tonen gewoon de rusttoestand. De [MDN-pagina over @property](https://developer.mozilla.org/en-US/docs/Web/CSS/@property) heeft de details.

```css
@property --sheen {
  syntax: '<angle>';
  inherits: false;
  initial-value: 120deg;
}

.pearl {
  background:
    radial-gradient(ellipse at 25% 15%, rgb(255 255 255 / 0.9), transparent 45%),
    linear-gradient(var(--sheen), #f6f1ff, #dff3f4 30%, #fbe7f0 55%, #fff6e0 75%, #e9e4ff);
  color: #3d3a4a;
  transition: --sheen 700ms ease;
}

.pearl:hover {
  --sheen: 210deg;
}

@media (prefers-reduced-motion: reduce) {
  .pearl { transition: none; }
}
```

Een parelkaart waarvan de glans draait bij hover. De witte radiale laag is het hoogtepunt; de lineaire laag draagt de tinten.

De hoek roteren is zachter dan de achtergrondpositie schuiven, omdat de tinten op hun plek blijven en alleen hun richting verandert, wat dichter bij hoe een echt oppervlak het licht vangt komt. Voor mixen die gelijkmatiger overgaan helpt het definiëren van stops in OKLCH; zie [OKLCH-verlopen in CSS](https://gradiently.design/nl/guide/css-gradient-oklch).

## Woorden op een iriserende achtergrond zetten

Bleek iriserend is een moeilijk oppervlak voor tekst. Witte tekst verdwijnt erop, en donkere tekst werkt alleen als het gebied erachter gelijkmatig is. Gebruik een donkere inkt uit het palet in plaats van zuiver zwart, houd de woorden over het rustigste deel van de mix en laat de drukste verschuiving in een hoek. De algemene regels staan in [tekst op een verloopachtergrond](https://gradiently.design/nl/guide/text-on-gradient).

Een bleke parelmoeren productlanceringspost waarin de kop over het helderste deel van de glans loopt en vaag is

Woorden recht over de verschuivende tinten verliezen hun randen waar de glans het helderst is.

Dezelfde parelmoeren productlanceringspost met een gelijkmatig gebied achter de kop en de kleurverschuiving naar een hoek verplaatst

Met het rustigste gebied achter de kop en de kleurverschuiving opzijgeschoven leest dezelfde post in één oogopslag.

Hier verdient een Gradiently-Mark zijn plek. Een Mark weet waar de woorden staan: hij verplaatst zijn rustigste gebied erachter en Auto-inkt kiest regel voor regel lichte of donkere letters uit het eigen palet van de Mark, zodat een zacht parelmoeren oppervlak op elk formaat leesbaar blijft, zonder vakken of schaduwen.

## Waar iriserend het best werkt

- **Huidverzorging en beauty**: lanceringsposts, kleurenkaarten en verpakkingsstickers. Het doet denken aan dauw en licht op huid; zie [ontwerp voor huidverzorgingsmerken](https://gradiently.design/nl/guide/skincare-brand-design).
- **Bruidsmode en bruiloften**: uitnodigingen en save the dates op parel, met grafietinkt en royale marges.
- **Juwelen**: een parel- of opaalbasis achter productfoto’s vangt de stenen op zonder ermee te concurreren.
- **Muziek en uitgaan**: de donkere olievlekmix op een story van 1080×1920, met één regel witte letters over het donkerste gebied.
- **Techproductpagina’s**: een parelhero met de hoverglans hierboven, achter een korte kop gehouden.

Iriserend past goed bij schone serif- of lichte sans-letters met ruime spatiëring. Het botst met zware slagschaduwen, dikke omlijningen en verzadigde accenten. Wil je metaal in plaats van parel, dan is het [chrome-effect](https://gradiently.design/nl/guide/chrome-effect) de hardere, koudere broer.

## FAQ

### Welke kleuren maken een iriserend verloop?

Bleek lila, munt, hemelsblauw, blosroze en crème over een witte basis, plus een zacht wit hoogtepunt. Gebruik voor een donkere versie diep turquoise, violet en brons op een blauwzwart.

### Wat is het verschil tussen iriserend en holografisch?

Iriserend is zacht en bleek, als een parel of zeepbel. Holografisch doorloopt de volledige regenboog met hoge verzadiging, als foliestickers.

### Hoe maak ik een iriserend effect in CSS?

Leg een wit radiaal hoogtepunt over een lineair verloop van bleke naburige tinten. Laat het verschuiven door een hoek te registreren met `@property` en die bij hover te veranderen.

### Is parelmoer hetzelfde als iriserend?

Parelmoer is een soort iriserend: grotendeels wit met een vage kleurverschuiving. Iriserend omvat ook donkerder verschuivingen zoals olie op water of een kevervleugel.

### Welke letterkleur werkt op een iriserende achtergrond?

Een donkere inkt uit het palet, zoals een grafiet met een vleugje violet, over het rustigste gebied. Witte letters zijn zelden leesbaar op bleek iriserend.