CSS mix-blend-mode – Farben überblenden

CSS mix-blend-mode Schriftfarbe und Hintergrundfarbe besser trennen

mix-blend-mode mischt die Farben von Vordergrund und Hintergrund – z.B. den Text über einem Bild oder einer Farbe. background-blend-mode überblendet Hintergrundbilder und erzielt Farbeffekte aus der Kombination von Bildern, Verläufen und Text.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

Überblenden wie in der Bildbearbeitung

In Bildbearbeitungsprogrammen wie Photoshop ist das Überblenden von Ebenen ein bewährter Effekt seit Generationen: Zwei Fotos in Ebenen übereinander vermischen sich: Das obere Foto oder die Schrift über dem Foto wird teilweise semitransparent. Die Berechnung kombiniert die Farben miteinander und lässt die untere Ebene durchscheinen.

photoshop-ebenen-ueberblenden

Neben einem einfachen Effekt trennt das Überblenden die oben liegende Schrift besser vom Hintergrund. Für das Webdesign bringt die Überblendung eine besser Trennung von Schrift über Hintergrundbildern, vor allem, wenn Farbe und Helligkeit des Hintergrundbilds beim Design nicht bekannt sind. mix-blend-mode mischt nicht nur die Farben von Schrift und dahinter liegendem Bild, sondern auch die Farben übereinander liegender Bilder oder Grafiken.

splash-480
Oh LES DROPS D'AQUA

.herb {
	mix-blend-mode: normal;
	position: absolute;
	font-size: clamp(1.2rem, -0.875rem + 8.333vw, 4rem);
	color: honeydew;
}

Mathematik für Farbkanäle

Das Überblenden der Farben operiert teilweise auf den Farbkanälen der Farben (bei 8-Bit-Farben auf Werten zwischen 0 und 255) und es ist kaum möglich, den Effekt ohne Erfahrung in der Farbtheorie vorauszusagen. Kurz gesagt: Muss man ausprobieren.

normal
Normal – Voreinstellung
multiply
Multipliziert bei jedem Farbkanal den Kanalwert der oberen Farbe mit dem Kanalwert der darunter liegenden Farbe und teilt das Ergebnis durch den Höchstwert für 8-Bit-Pixel. Das Ergebnis ist niemals heller als das Original.
screen
Die Kanalwerte der übereinander liegenden Farben werden je nach Helligkeit der Untergrundfarbe multipliziert bzw. negativ multipliziert. Wirkt additiv (Lichtermischung wie bei Farbstrahlern).
overlay
Multipliziert die Farben, aber erhält dabei Lichter und dunklen Töne der Untergrundfarbe. Erzeugt den Eindruck, als wäre die obere Ebene aus farbigem Glas.
darken
Abdunkeln: Nimmt den niedrigen (dunkleren) Wert aus Quellfarben-Kanal und Untergrund-Kanalwert.
lighten
Aufhellen: Nimmt den höheren (helleren) Wert aus Quellfarben-Kanal und Untergrundfarben-Kanalwert.
color-dodge
Nimmt die Werte jedes Farbkanals und hellt die obere Farbe auf. Je dunkler der obere Farbton, desto geringer die Wirkung.
color-burn
Nimmt die Werte jedes Farbkanals und dunkelt die obere Farbe ab. Je heller der obere Farbton, desto geringer die Wirkung.
hard-light
Die Kanalwerte der Eingabefarben werden je nach der ursprünglichen Quellfarbe multipliziert oder negativ multipliziert.
soft-light
Verdunkelt die Farbkanalwerte der Hinterfarbe oder hellt sie auf, je nach Farbton der oberen Farbe.
difference
Zieht bei jedem Farbkanal entweder den dunkleren vom helleren des oberen Tons ab oder den helleren vom dunkleren Wert des unteren Tons ab, je nachdem, wer den jeweils helleren Wert hat. Helle Farbtöne auf der oberen Ebene werden invertiert, je dunkler der Ton oben, desto unsichtbarer.
exclusion
Wenn die Quellfarbe Weiß ist, ist die Ergebnisfarbe die Komplementärfarbe der Untergrundfarbe. Wenn die Quellfarbe Schwarz ist, ist die Untergrundfarbe die Ergebnisfarbe.
hue
Dem Farbton der oberen Farbe wird die Luminanz und Sättigung der Untergrundfarbe zugewiesen.
saturation
Dem Farbton der oberen Farbe wird die Luminanz und Farbe der Untergrundfarbe zugewiesen.
color
Dem Farbton der oberen Farbe wird die Luminanz der Untergrundfarbe zugewiesen.
luminosity
Dem Farbton der oberen Farbe werden Farbton und die Sättigung der unteren Farbe zugewiesen, die Luminanz der oberen Farbe bleibt erhalten. Gegenstück zu color.

background-blend-mode

Macht im Grunde genommen dasselbe wie mix-blend-mode, nur eben über einem Hintergrundbild. Mehrere Hintergrundbilder übereinander werden ebenfalls miteinander verrechnet wie Schrift über Hintergrundbildern.

Da Verläufe ebenfalls der CSS-Eigenschaft background-image und mehrere Hintergrundbilder übereinander schon lange kein Thema mehr sind, erzielt background-blend-mode Farbeffekte aus der Kombination von Bildern, Verläufen und Schrift.

480x285
.background-blend { 
	background-image: url(img/monaccofish.webp),
	linear-gradient(to bottom, khaki, black);
	background-size:cover;
	background-blend-mode: difference;
}

Auch hier sind Vorhersagen, wie die Überblendung wirkt, ein Blick in die Glaskugel. Auf jeden Fall übertrifft der eine oder andere Effekt die einfachen Overlays mit einer Farbe oder einem semitransparenten weiß oder schwarz.