Iriserende verlopen: parelmoeren kleurschakeringen met codes

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.

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 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 die volledig.

Een iriserend verloop van nul opbouwen

1. 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. 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. 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. 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. 5

   Rond af met fijne korrel

   Bleke overgangen krijgen op schermen makkelijk banden. Een beetje ruis breekt de stappen op, wat kleurbanden in verlopen 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.

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 heeft de details.

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

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.

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.

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.
• 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 de hardere, koudere broer.