Holografische Farbverläufe und Irisieren, einfach erklärt

Ein holografischer Farbverlauf ist ein Farbverlauf, der irisierende Materialien nachahmt, wie holografische Folie, Seifenblasen, Öl auf Wasser oder Perlmutt, deren Farbe sich ändert, wenn man sie bewegt. Auf dem Bildschirm heißt das: blasse Regenbogentöne, die ineinanderfließen, meist mit einem hellen weißen Schimmer, der über die Fläche zieht. Die besten wirken wie ein Material, das Licht einfängt, die schlechtesten wie ein Regenbogen-Sticker aus der Clipart-Sammlung. Der Unterschied liegt fast ganz in der Zurückhaltung.

Was etwas irisieren lässt

Irisieren ist Farbe, die vom Blickwinkel abhängt. In einer Seifenblase oder einem Ölfilm wird Licht an der Ober- und Unterseite eines sehr dünnen Films reflektiert, und die beiden Reflexionen interferieren, verstärken manche Farben und löschen andere aus. Bei holografischer Folie und auf der Rückseite einer CD zerlegen mikroskopische Rillen das Licht in seine Farben, wie ein Prisma. So oder so ist das Ergebnis für das Auge gleich: Farben in Regenbogenreihenfolge, die über die Fläche gleiten, wenn sie sich neigt.

Beispiele für holografische Farbverläufe

Warum konische Verläufe so gut funktionieren

Ein konischer Verlauf ändert seine Farbe, während man um einen Punkt herumwandert, seine Farbtöne fächern also von einer Mitte aus auf, wie Licht, das an einer gewölbten Folie gestreut wird. Setz die Mitte außerhalb der Form, und der Fächer wird zu sanften diagonalen Bändern. Ändere den Winkel from, und jede Farbe gleitet weiter, genau das, was Irisieren beim Neigen tut. Die Details der Syntax stehen in konische Farbverläufe.

Halte jeden Farbton auf einer ähnlichen, hohen Helligkeit. Echte Folie reflektiert viel Licht, ihre Farben sind also hell und leicht mit Weiß ausgewaschen. Ist eine Farbe viel dunkler oder gesättigter als der Rest, wirkt sie wie ein Farbstreifen statt wie eine Spiegelung. Blasse Farben verzeihen auch mehr: Sie werden nicht grau, wo sie sich treffen, weil sie alle so nah an Weiß liegen.

So machst du einen holografischen Effekt in CSS

Zwei Ebenen leisten den Großteil der Arbeit: unten ein blasser konischer Regenbogen und oben ein schmales weißes Band, das beim Hovern über das Element wandert, wie Licht, das über Folie gleitet. Halte die Bewegung langsam und schalte sie für Menschen ab, die reduzierte Bewegung bevorzugen.

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

Für mehr Realismus leg eine sehr feine Körnung über die ganze Fläche und lass einen zweiten, schwächeren Schimmer in einem anderen Winkel laufen. Wenn das ganze Feld von selbst treiben soll, zeigt animierte Farbverlauf-Hintergründe, wie du Verläufe effizient animierst.

So bleiben holografische Farbverläufe geschmackvoll

Holografische Oberflächen gehören zur Y2K-Ästhetik, zu Beauty-Verpackungen, Sammelkarten, Festivalmode und Tech-Zubehör. Bei einer Marke behandle den Effekt wie Folie auf einer bedruckten Schachtel: An einer Stelle eingesetzt, signalisiert er etwas Besonderes. Kombiniere ihn mit viel Weiß oder einem ruhigen Pastellgrund und dunkler Schrift.

Holografisch in Druck und Verpackung

Keine Kombination gewöhnlicher Druckfarben kann echtes Irisieren wiedergeben, weil sich gedruckte Farbe nicht mit dem Winkel ändert. Ein gedruckter holografischer Verlauf sieht aus wie ein blasser Regenbogen, was schön sein kann, aber für das Echte brauchst du holografische Folie oder irisierenden Film von deiner Druckerei. Wenn du für beides gestaltest, halte die Bildschirmversion blass und einfach, damit die gedruckte nicht enttäuscht, siehe Farbverläufe drucken.

Blasse, perlige Marks findest du im Markt, wenn du nach Farbwörtern wie „Perlmutt“ oder „irisierendes Flieder“ suchst, und du kannst mit ihnen in jeder Größe gestalten.