RGBA-zu-RGB-Konverter (Verschmelzung mit dem Hintergrund)

Geben Sie eine halbtransparente Vordergrundfarbe (RGBA) und eine Hintergrundfarbe ein, um die durch Alpha-Blending entstehende deckende RGB-Farbe zu berechnen — ideal als Fallback dort, wo rgba() nicht unterstützt wird.

Die Formel des Alpha-Blending

Die Umwandlung von RGBA in deckendes RGB wird als „Alpha-Blending“ (der „Over“-Operator) bezeichnet. Die folgende Formel wird unabhängig auf die Kanäle R, G und B angewendet, das Ergebnis wird anschließend auf die nächste Ganzzahl gerundet.

Formel result = foreground × alpha + background × (1 − alpha)

Tipps

  • Manche HTML-E-Mail-Vorlagen und ältere Browser (etwa bestimmte IE-Versionen) unterstützen `rgba()` oder `opacity` nicht. Den hier berechneten deckenden RGB-Wert zusätzlich als `background-color` anzugeben, bietet einen sicheren Fallback.
  • Vordergrund- und Hintergrundfarbe können sowohl über den Farbwähler als auch per direkter HEX-Eingabe angegeben werden, sodass Sie eine in einem Designtool ermittelte exakte Farbe direkt einfügen können.
  • Die Deckkraft (Alphawert) wird mit einem Schieberegler von 0 bis 100 % eingestellt. 0 % bedeutet vollständig transparent (also nur die Hintergrundfarbe), 100 % vollständig deckend (also nur die Vordergrundfarbe).
  • Weiß und Schwarz werden als Hintergrund-Voreinstellungen angeboten, weil dies in der Praxis die beiden am häufigsten verglichenen Fälle sind (Hintergründe im Hell- bzw. Dunkelmodus). Für eine genauere Fallback-Farbe geben Sie als benutzerdefinierten Wert die tatsächliche Hintergrundfarbe Ihrer Seite ein.

Häufig gestellte Fragen

Manche E-Mail-Clients (insbesondere bestimmte Outlook-Versionen) und ältere Browser unterstützen die CSS-Funktion `rgba()` oder Alpha-Transparenz überhaupt nicht. In solchen Umgebungen kann der transparente Teil falsch dargestellt werden und das Design zerstören. Indem Sie vorab den deckenden RGB-Wert berechnen, der sich aus der Mischung Ihrer Farbe mit dem Hintergrund ergibt, können Sie einen sicheren Fallback für Umgebungen angeben, in denen `rgba()` nicht verfügbar ist, und so optische Abweichungen vermeiden.

Eine halbtransparente Farbe enthält sowohl ihre eigene Farbinformation als auch die durchscheinende Information des darunterliegenden Hintergrunds, weshalb das sichtbare Ergebnis immer vom Hintergrund abhängt. Dieselbe Farbe wirkt auf Schwarz dunkler und gedämpfter, auf Weiß heller und blasser. Das ist kein Fehler, sondern schlicht die Funktionsweise des Alpha-Blending — deshalb müssen Sie bei der Berechnung einer Fallback-Farbe unbedingt die tatsächlich verwendete Hintergrundfarbe angeben.

CSS-Alphawerte werden als Dezimalzahl von 0 (vollständig transparent) bis 1 (vollständig deckend) angegeben, gleichbedeutend auch als Prozentwert von 0 % bis 100 %. Dieses Tool nutzt einen Schieberegler im Bereich 0–100 %, damit Sie ihn intuitiv anpassen können.

Solange die Farbe genau über der von Ihnen angegebenen Hintergrundfarbe angezeigt wird, sieht sie theoretisch identisch aus. Das gilt jedoch nur für diesen speziellen Hintergrund — bei einem anderen Hintergrund ändert sich die Erscheinung. Wenn Sie dies als Fallback nutzen, ist es wichtig, die tatsächliche Hintergrundfarbe der Seite anzugeben, auf der die Farbe erscheinen wird.
ツールくん

Übrigens – Die Ursprünge des Alpha-Blending

Das Konzept des Alpha-Blending (Alpha-Compositing) wird gewöhnlich auf einen 1984 veröffentlichten Aufsatz mit dem Titel „Compositing Digital Images“ von Thomas Porter und Tom Duff aus dem Bereich der Computergrafik zurückgeführt. Zuvor beschränkte sich das Zusammensetzen von Vordergrund und Hintergrund meist auf reine Farbinformationen. Dieser Aufsatz systematisierte die Idee, einen vierten Kanal für die Deckkraft — den Alphakanal — mit den Farbdaten zu koppeln, und wurde seither zum Standardmodell in CG- und Bildbearbeitungssoftware.

Heute basiert nahezu jede Technologie, die Transparenz verarbeitet, auf dieser Idee des Alpha-Blending: Bildformate wie PNG und SVG, CSS-`rgba()`/`opacity` sowie die Ebenenfunktionen der meisten Zeichenprogramme. Die grundlegendste Kompositionsmethode, der sogenannte „Over“-Operator (Vordergrund über Hintergrund legen), entspricht genau der in diesem Tool verwendeten Formel.

Kompatibilitätsprobleme mit älteren E-Mail-Clients und veralteten Browsern sind allerdings bis heute nicht vollständig gelöst. Insbesondere HTML-E-Mails unterliegen starken Einschränkungen durch die Rendering-Engines, sodass moderne CSS-Transparenztechniken häufig nicht direkt verwendet werden können — weshalb das vorherige Berechnen einer deckenden Fallback-Farbe nach wie vor eine weit verbreitete praktische Technik ist.

→ Verwandte Wissenstexte lesen

→ Alle Wissenstexte ansehen

Weitere Tools in dieser Kategorie