Irisierender Verlauf: Perlmutt-Farbwechsel mit Codes

Ein irisierender Verlauf ist eine Mischung blasser, eng beieinanderliegender Töne, typischerweise Flieder, Mint, Rosa, Himmelblau und warmes Creme, über einer hellen Basis mit einem weichen weißen Glanzlicht. Der Effekt imitiert echte irisierende Dinge: Perlen, Seifenblasen, das Innere einer Abalone-Muschel. Die Farben sind sanft und wechseln allmählich über die Fläche, sodass sie als Schimmer statt als Farbstreifen wirkt. Die Codes unten kannst du direkt in CSS oder jedes Design-Tool einfügen, das Hex akzeptiert.

Codes für irisierende Verläufe

Jeder davon beginnt bei fast Weiß oder fast Schwarz und fügt Töne hinzu, die nebeneinanderliegen. Kopiere einen unverändert oder tausche einen einzelnen Stopp, um ihn zu deinem zu machen.

Beachte, was die hellen gemeinsam haben: Kein Stopp ist voll gesättigt, und der hellste Punkt ist reines oder fast reines Weiß. Schiebst du einen Stopp zu einer kräftigen Farbe, wird aus der Perle ein Pastellverlauf oder, noch weiter, ein Regenbogen.

Irisierend oder holografisch

Oft werden beide Wörter für dasselbe verwendet, doch im Design beschreiben sie unterschiedliche Looks. Holografisch imitiert Folienaufkleber und Kreditkarten-Hologramme: jeder Farbton, hohe Sättigung, harte Bänder. Irisierend imitiert natürliche Oberflächen, die leise die Farbe wechseln. Wenn du die lautere Version willst, behandelt holografische Verläufe sie ausführlich.

So baust du einen irisierenden Verlauf von Grund auf

1. 1

   Wähle die Basis

   Helles Irisieren beginnt bei Weiß oder einem leicht warmen Off-White wie #fbf9f6. Dunkles Irisieren beginnt bei einem Blauschwarz wie #0d0f1a. Die Basis sollte ein Drittel der Fläche oder mehr abdecken.

2. 2

   Wähle drei bis fünf benachbarte Töne

   Geh in kleinen Schritten um den Farbkreis: Flieder zu Himmel zu Mint zu Creme zu Rosé. Halte sie in ähnlicher Helligkeit, damit keiner nach vorn springt.

3. 3

   Senke die Sättigung

   Wenn ein Ton wie eine Farbe aussieht, die du quer durch den Raum benennen könntest, ist er zu stark. Für helle Versionen strebe Töne an, die überwiegend weiß sind mit einer Spur Farbton.

4. 4

   Füge ein Glanzlicht hinzu

   Ein kleiner weißer radialer Fleck, zu einer Ecke versetzt, sagt dem Auge, woher das Licht kommt. Eins genügt, zwei beginnen wie ein glänzender Button zu wirken.

5. 5

   Vollende mit feinem Korn

   Blasse Mischungen zeigen auf Bildschirmen leicht Banding. Etwas Rauschen bricht die Stufen auf, was Gradient Banding samt Lösung erklärt.

Der Schritt, der am meisten zählt, ist der dritte. Die meisten irisierenden Designs, die scheitern, sind schlicht zu bunt. Echte Perlen sind überwiegend weiß, die Farbe bemerkst du erst danach.

Irisierendes CSS mit Farbwechsel beim Hover

Im Web kannst du den Schimmer wandern lassen, wenn jemand darauf zeigt, das Einzige, was eine gedruckte Perle kann und ein flaches Bild nicht. Wird der Winkel mit @property registriert, kann der Browser ihn weich animieren. Browser ohne Unterstützung zeigen einfach den Ruhezustand. Die MDN-Seite zu @property hat die 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; }
}

Den Winkel zu drehen ist sanfter, als die Hintergrundposition zu verschieben, denn die Töne bleiben an ihrem Platz und nur ihre Richtung ändert sich, was näher daran ist, wie eine echte Fläche Licht einfängt. Für gleichmäßiger mischende Verläufe hilft es, Stopps in OKLCH zu definieren, siehe OKLCH-Verläufe in CSS.

Worte auf einen irisierenden Hintergrund setzen

Blasses Irisieren ist ein schwieriger Untergrund für Schrift. Weißer Text verschwindet darauf, und dunkler Text funktioniert nur, wenn die Fläche dahinter gleichmäßig ist. Nutze eine dunkle Tinte aus der Palette statt reinem Schwarz, halte die Worte über dem ruhigsten Teil der Mischung und lass den unruhigsten Wechsel in einer Ecke. Die allgemeinen Regeln stehen in Text auf einem Verlaufshintergrund.

Hier verdient sich ein Mark von Gradiently seinen Platz. Ein Mark weiß, wo die Worte stehen: Er verschiebt seinen ruhigsten Bereich dahinter, und Automatische Farbe wählt Zeile für Zeile helle oder dunkle Schrift aus der Palette des Mark, sodass eine weiche perlmuttartige Fläche in jeder Größe lesbar bleibt, ohne Kästen oder Schatten.

Wo Irisieren am besten wirkt

• Hautpflege und Beauty: Launch-Posts, Farbkarten und Verpackungsaufkleber. Es erinnert an Tau und Licht auf der Haut, siehe Design für Hautpflegemarken.
• Braut und Hochzeit: Einladungen und Save-the-Dates auf Perlmutt, mit Graphittinte und großzügigen Rändern.
• Schmuck: ein Perlen- oder Opalgrund hinter Produktfotos greift die Steine auf, ohne mit ihnen zu konkurrieren.
• Musik und Nachtleben: die dunkle Ölfilm-Mischung auf einer Story im Format 1080×1920, mit einer Zeile weißer Schrift über dem dunkelsten Bereich.
• Tech-Produktseiten: ein Perlen-Header mit dem Hover-Schimmer von oben, hinter einer kurzen Überschrift gehalten.

Irisieren verbindet sich gut mit klarer Serife oder leichter Grotesk und weitem Abstand. Es beißt sich mit schweren Schlagschatten, dicken Konturen und gesättigten Akzenten. Wenn du Metall statt Perlmutt willst, ist der Chrom-Effekt das härtere, kältere Geschwister.