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.

Zuletzt aktualisiert: 2026-10-03

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)

Was die Umwandlung von RGBA in RGB bedeutet

Eine halbtransparente RGBA-Farbe funktioniert in modernem CSS und in Designtools problemlos, wird aber in Umgebungen, die Transparenz nicht interpretieren können — etwa vielen E-Mail-Clients und älteren Rendering-Engines —, nicht wie beabsichtigt dargestellt. Dieses Tool nimmt eine Vordergrundfarbe (RGBA) und eine Hintergrundfarbe entgegen und berechnet die verschmolzene, deckende RGB-Farbe, die nach dem Zusammensetzen beider tatsächlich sichtbar wäre — ausgegeben in einer Form, die Sie direkt als Fallback für Umgebungen ohne Transparenzunterstützung verwenden können.

Grundlage der Berechnung ist ein Kompositionsverfahren namens „Alpha-Blending“ (der „Over“-Operator): Jeder Kanal (R, G und B) der Vordergrundfarbe wird mit dem Alphawert multipliziert, der jeweils entsprechende Kanal der Hintergrundfarbe wird mit (1 − Alphawert) multipliziert, und beide Produkte werden addiert. Da diese Formel unabhängig auf jeden der drei Kanäle angewendet wird, ergibt dieselbe halbtransparente Farbe je nach Hintergrund ein völlig anderes Resultat. Bei der Vorbereitung einer Fallback-Farbe ist es entscheidend, genau die Hintergrundfarbe anzugeben, auf der das Element tatsächlich angezeigt wird.

So verwenden Sie den RGBA-zu-RGB-Konverter

Vordergrundfarbe (halbtransparent) angeben Wählen Sie sie über den Farbwähler aus, oder fügen Sie einen HEX-Code ein, den Sie bereits in einem Designtool bestätigt haben.
Deckkraft (Alphawert) anpassen Stellen Sie die Transparenz mit dem Schieberegler von 0 bis 100 % ein. Gleichen Sie den Wert mit dem ab, den Sie tatsächlich in Ihrem CSS verwenden.
Hintergrundfarbe angeben Nutzen Sie die Voreinstellungen Weiß oder Schwarz, oder geben Sie einen benutzerdefinierten Wert ein, der der tatsächlichen Hintergrundfarbe Ihrer Seite nahekommt.
Verschmolzenes Ergebnis (deckendes RGB) prüfen HEX-Code und RGB-String werden sofort berechnet, zusammen mit einem direkten Vergleich, wie die Farbe auf Weiß und auf Schwarz wirkt.
Berechneten RGB-Wert als Fallback einfügen Kopieren Sie ihn direkt in Eigenschaften wie `background-color`, bei denen `rgba()` nicht unterstützt wird.

Tipps für die Nutzung

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.

Anwendungsfälle für die RGBA-zu-RGB-Umwandlung

Hintergrundfarben-Fallbacks für HTML-E-Mails

Für E-Mail-Clients, die `rgba()` nicht interpretieren — darunter bestimmte Outlook-Versionen —, können Sie vorab einen berechneten deckenden RGB-Wert als `background-color` angeben.

Farbwerte für ältere Browser oder PDF-Export

Berechnen Sie im Voraus die Farbe, die an Rendering-Engines ohne Transparenzunterstützung oder an PDF-Exportwerkzeuge übergeben wird, die CSS-Alphawerte nicht berücksichtigen.

Farbkombinationen in einem Designentwurf prüfen

Erfahren Sie als exakte Zahl, welche Farbe beim Übereinanderlegen halbtransparenter Elemente entsteht, ohne Photoshop oder ein anderes Programm zu öffnen.

Erscheinungsbild in Light Mode und Dark Mode prüfen

Nutzen Sie die Hintergrund-Voreinstellungen Weiß und Schwarz, um auf einen Blick zu vergleichen, wie sich dieselbe halbtransparente Farbe in beiden Themes verändert.

Feste halbtransparente Variante einer Markenfarbe erzeugen

Exportieren Sie eine Markenfarbe mit einem bestimmten Alphawert als feste, endgültige Farbe vor einem bestimmten Hintergrund, bereit zur Aufnahme in einen Markenleitfaden.

Glossar

RGBA: Ein Farbformat, das den drei Grundkanälen Rot, Grün und Blau einen Alphakanal hinzufügt, der die Deckkraft darstellt. In CSS wird es etwa als `rgba(255, 0, 0, 0.5)` geschrieben.
Alphawert: Eine Zahl, die die Deckkraft einer Farbe ausdrückt, angegeben als Dezimalzahl von 0 (vollständig transparent) bis 1 (vollständig deckend) oder gleichbedeutend als Prozentwert. Je niedriger der Wert, desto stärker scheint der Hintergrund durch.
Alpha-Blending: Die Berechnung, die eine halbtransparente Vordergrundfarbe mit einer Hintergrundfarbe in einem durch den Alphawert bestimmten Verhältnis mischt, um eine einzige deckende Farbe zu erzeugen. Auch „Over“-Operator genannt und Grundlage der Formel dieses Tools.
Hexadezimaler Farbcode (HEX): Eine Darstellung der RGB-Kanalwerte in hexadezimaler Schreibweise im Format `#RRGGBB`. Eine der gebräuchlichsten Arten, Farben in CSS und Designtools anzugeben.
Fallback-Farbe: Ein vorab vorbereiteter Ersatzwert für Fälle, in denen die eigentlich gewünschte Darstellung — hier eine halbtransparente Farbe — in einer bestimmten Umgebung nicht korrekt interpretiert wird.
Over-Operator: Die grundlegendste Form des Alpha-Blending: das Legen einer Vordergrundfarbe „über“ eine Hintergrundfarbe. Genau diese Formel setzt dieses Tool um.

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.

Alle Wissenstexte ansehen