# Holografische kleurverlopen en iriserende kleur uitgelegd

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

Holografische folie, zeepbellen en parelmoer veranderen van kleur als je beweegt. Een plat scherm kan dat niet, maar een goed gebouwd kleurverloop kan het oog ervan overtuigen dat het wel zo is.

## The short version

- Een holografisch kleurverloop bootst materialen na die van kleur veranderen met de kijkhoek, zoals holografische folie, zeepbellen en parelmoer.
- Echte iriserende kleur ontstaat doordat licht interfereert in dunne laagjes of verstrooit op fijne ribbels, en daarom verschuiven de kleuren in regenboogvolgorde als je beweegt.
- Op een scherm is een conic gradient van bleke regenboogtinten met een bewegende witte glans de overtuigendste manier om het na te bootsen.
- Holografische kleurverlopen zien er het best uit in bleke, parelachtige tinten met een felle glimlichtstreep, niet in volledig verzadigde regenboogkleuren.
- Holografische effecten werken als accent op een kaart, een sticker of een productoppervlak, en gaan snel vervelen als ze alles bedekken.

Een **holografisch kleurverloop** is een kleurverloop dat iriserende materialen nabootst, zoals holografische folie, zeepbellen, olie op water of parelmoer, waarvan de kleur verandert als je ze beweegt. Op een scherm betekent dat bleke regenboogtinten die in elkaar overlopen, meestal met een felle witte glans die over het oppervlak trekt. De beste voelen als een materiaal dat licht vangt; de slechtste lijken op een regenboogsticker uit een clipartmap. Het verschil zit bijna helemaal in terughoudendheid.

## Wat iets iriserend maakt

Iriseren is kleur die afhangt van de hoek waaruit je kijkt. In een zeepbel of een olievlek weerkaatst licht op de boven- en onderkant van een heel dun laagje, en die twee reflecties interfereren: sommige kleuren worden sterker, andere vallen weg. In holografische folie en op de achterkant van een cd splitsen microscopische ribbels licht in zijn kleuren, zoals een prisma. Hoe dan ook ziet het oog hetzelfde: kleuren in regenboogvolgorde die over het oppervlak schuiven als het kantelt.

| Look | Wat je ziet | Hoe je het nabootst |
| --- | --- | --- |
| Holografische folie | Scherpe banden regenboogkleur die verspringen met de hoek | Conic of gestreepte kleurverlopen met scherpe glimlichten |
| Iriserend | Zachte regenboogverschuivingen over een glad oppervlak | Bleke conic of mesh-kleurverlopen, langzame glans |
| Parelmoer | Vooral wit met vage hints van roze, blauw en groen | Bijna wit radiaal kleurverloop met getinte randen |
| Olievlek | Regenboogkleuren die wervelen op een donker oppervlak | Donkere ondergrond met gedempte regenboogbanden |
| Chroom | Grijze spiegelbanden, geen regenboog | Harde lichte en donkere banden in grijs |

Vijf verwante afwerkingen. Holografisch en iriserend zijn de regenboogvarianten; parelmoer en chroom zijn hun rustigere neven.

## Voorbeelden van holografische kleurverlopen

- Conic folie: `conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5)`
- Lineair iriserend: `linear-gradient(120deg, #ffd1f0 0%, #c7d2fe 25%, #a5f3fc 50%, #bbf7d0 70%, #fef9c3 85%, #fbcfe8 100%)`
- Parelmoer: `radial-gradient(ellipse at 30% 25%, #ffffff 0%, #f5eefc 30%, #dfe7f5 60%, #e9dff2 100%)`
- Olievlek: `linear-gradient(135deg, #1b1033 0%, #3b2a7a 30%, #1f6f78 55%, #7a5a1f 75%, #3a1a4a 100%)`
- Chroom: `linear-gradient(180deg, #f8fafc 0%, #cbd5e1 35%, #64748b 50%, #e2e8f0 65%, #94a3b8 100%)`
- Foliestrepen: `repeating-linear-gradient(115deg, #fbcfe8 0px, #c7d2fe 40px, #a5f3fc 80px, #bbf7d0 120px, #fbcfe8 160px)`

Zes afwerkingen als losse CSS-waarden. Let op hoe bleek de regenboogkleuren zijn: daardoor lezen ze als folie en niet als een vlag.

## Waarom conic gradients zo goed werken

Een conic gradient verandert van kleur terwijl je rond een punt draait, dus de tinten waaieren uit vanuit een middelpunt, zoals licht dat verstrooit op gebogen folie. Leg het middelpunt buiten de rand van de vorm en de waaier wordt een reeks zachte diagonale banden. Verander de `from`-hoek en elke kleur schuift op, precies wat iriserende kleur doet als je kantelt. De details van de syntax staan in [conic gradients](https://gradiently.design/nl/guide/conic-gradient).

- Roze flits: #ffd6f5
- Lila: #d9c8ff
- IJsblauw: #bfe9ff
- Mint: #c9ffe6
- Boter: #fff4c2
- Glans: #ffffff

Een holografisch palet is een bleke regenboog op volgorde, plus wit. Stappen overslaan of de volgorde husselen breekt de illusie.

Houd elke tint op een vergelijkbare, hoge lichtheid. Echte folie weerkaatst veel licht, dus de kleuren zijn helder en een beetje met wit verdund. Is één kleur veel donkerder of verzadigder dan de rest, dan leest die als een streep verf in plaats van een reflectie. Bleke kleuren zijn ook vergevingsgezind: ze worden niet grijs waar ze elkaar raken, omdat ze allemaal zo dicht bij wit liggen.

> **Waar het licht vandaan komt** Bepaal waar het licht vandaan komt en leg daar de felste glans. Een holografisch oppervlak met het glimlicht op de verkeerde plek ziet er plat uit, hoe goed de kleuren ook zijn.

## Zo maak je een holografisch effect in CSS

Twee lagen doen het meeste werk: een bleke conic regenboog eronder en een smalle band wit erbovenop die eroverheen schuift als je over het element beweegt, zoals licht dat over folie glijdt. Houd de beweging langzaam en zet haar uit voor mensen die liever minder beweging zien.

```css
.holo {
  background-image:
    linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 0.6) 50%, transparent 65%),
    conic-gradient(from 210deg at 50% 50%, #ffd6f5, #d9c8ff, #bfe9ff, #c9ffe6, #fff4c2, #ffd6f5);
  background-size: 250% 100%, 100% 100%;
  background-position: 100% 0, 0 0;
  transition: background-position 0.9s ease;
  border-radius: 20px;
}

.holo:hover {
  background-position: 0% 0, 0 0;
}

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

Een bleke conic folie met een witte glans die bij hover overveegt. De glanslaag is 250% breed zodat hij kan reizen.

Voor meer realisme leg je een heel fijne korrel over het hele oppervlak en laat je een tweede, zwakkere glans onder een andere hoek lopen. Wil je dat het hele veld vanzelf drijft, dan laat [geanimeerde kleurverloopachtergronden](https://gradiently.design/nl/guide/animated-gradient-background) zien hoe je kleurverlopen efficiënt animeert.

## Holografische kleurverlopen smaakvol houden

### Clipart

- Volledig verzadigde regenboogkleuren
- Holografisch effect op elk oppervlak
- Drukke folie achter lopende tekst
- Snelle, constante glinstering

### Materiaal

- Bleke, parelachtige tinten in regenboogvolgorde
- Eén holografisch object: een kaart, een badge, een product
- Effen of rustige ondergrond achter de woorden
- Een langzame glans die beweegt als er iets gebeurt

Holografische afwerkingen horen bij de [Y2K-esthetiek](https://gradiently.design/nl/guide/y2k-aesthetic), beautyverpakkingen, verzamelkaarten, festivalkleding en techaccessoires. Behandel het effect in een merk als folie op een bedrukte doos: op één plek gebruikt, zegt het dat iets bijzonder is. Combineer het met veel wit of een rustige [pastelondergrond](https://gradiently.design/nl/guide/pastel-gradients) en donkere tekst.

Een productdrop-post die een gelimiteerde folie-editie aankondigt op een zacht, bleek kleurverloop

Een drop-aankondiging is een logische plek voor een bleek, verschuivend oppervlak: de afwerking zelf zegt al gelimiteerd.

## Holografisch in druk en verpakking

Geen combinatie van gewone inkten kan echte iriserende kleur nabootsen, want gedrukte inkt verandert niet met de hoek. Een gedrukt holografisch kleurverloop ziet eruit als een bleke regenboog, wat mooi kan zijn, maar voor het echte werk heb je holografische folie of iriserende film van je drukker nodig. Ontwerp je voor beide, houd de schermversie dan bleek en eenvoudig, zodat de gedrukte versie niet tegenvalt; zie [kleurverlopen in drukwerk](https://gradiently.design/nl/guide/print-gradients).

Je vindt bleke, parelachtige Marks op de Markt door te zoeken op kleurwoorden als “parel” of “iriserend lila”, en je ontwerpt ermee op elk formaat.

## FAQ

### Wat is een holografisch kleurverloop?

Een holografisch kleurverloop bootst iriserende materialen na, zoals folie, zeepbellen en parelmoer, met bleke regenboogtinten op volgorde en een felle glans.

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

Holografische folie toont scherpere, verspringende regenboogbanden; iriserende oppervlakken tonen zachtere, vloeiendere kleurverschuivingen. Beide veranderen met de kijkhoek.

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

Gebruik een bleke `conic-gradient` van regenboogtinten en leg daar een bewegende witte glans met `linear-gradient` overheen, geanimeerd bij hover of scrollen.

### Welke kleuren maken een holografisch kleurverloop?

Bleekroze, lila, ijsblauw, mint en botergeel, in regenboogvolgorde, plus wit voor de glans.

### Kun je een holografisch kleurverloop drukken?

Met alleen inkt druk je hooguit een bleke regenboog. Voor een echte holografische afwerking vraag je je drukker naar holografische folie of iriserende film.