Holografische kleurverlopen en iriserende kleur uitgelegd

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.

Voorbeelden van holografische kleurverlopen

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.

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.

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.

.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; }
}

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 zien hoe je kleurverlopen efficiënt animeert.

Holografische kleurverlopen smaakvol houden

Holografische afwerkingen horen bij de Y2K-esthetiek, 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 en donkere tekst.

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.

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.