Mach jede Hex-Farbe transparent. Wähle eine Deckkraft, kopiere den 8-stelligen Hex-, rgba-, hsla- oder Android-Wert und sieh dir die Farbe auf hellem, dunklem und kariertem Hintergrund an. Vollständige Alpha-Tabelle von 0 bis 100%.
Um eine Hex-Farbe transparent zu machen, hängst du zwei weitere Hex-Ziffern für den Alphawert an: #RRGGBBAA. Das Paar ist die Deckkraft mal 255, in Hex geschrieben, also ist 50% gleich 80, 75% gleich BF und 25% gleich 40. Wähle unten eine Farbe und eine Deckkraft, um den 8-stelligen Hex-Wert sowie die passenden rgba- und hsla-Werte zu erhalten.
Häufig verwendete Deckkraftwerte
Deckkraft
Alpha-Paar
Beispiel auf #4F98FB
BF
Wähle eine Farbe, zieh den Deckkraft-Regler und kopiere das Format, das dein Code braucht. Die Vorschau zeigt die Farbe auf Weiß, Schwarz und einem Schachbrettmuster, zusammen mit der deckenden Farbe, die sich jeweils daraus ergibt.
Gib eine Grundfarbe ein oder wähle sie aus. Drei-, sechs- und achtstellige Hex-Werte funktionieren; ein vorhandenes Alpha-Paar stellt den Regler ein.
Zieh den Regler oder gib einen Prozentwert von 0 bis 100 ein.
Kopiere den 8-stelligen Hex-Wert, rgba(), modernes rgb() mit Schrägstrich, hsla() oder die Android-Form #AARRGGBB.
Prüfe die gemischte Farbe auf Weiß und auf Schwarz, wenn du einen deckenden Fallback brauchst oder den Textkontrast testen willst.
Alpha-Paare werden gerundet, daher ergibt ein Prozentwert nach der Umrechnung nicht immer exakt denselben Wert. 80 in Hex ist 128 von 255, also 50,2%, nah genug für jeden Bildschirm.
Android-Farbressourcen setzen den Alphawert an den Anfang (#AARRGGBB), umgekehrt zu CSS. Diese Vertauschung ist ein häufiger Grund, warum eine Farbe in einer App falsch aussieht.
Prüfe bei Text den Kontrast gegen die gemischte Farbe, nicht gegen die transparente. Ein Schwarz mit 60% auf Weiß wirkt ganz anders als 60% Schwarz auf einem Foto.
Nutze die Eigenschaft opacity nur, wenn das ganze Element samt Kindelementen verblassen soll. Für einen durchscheinenden Hintergrund mit deckendem Text gehört der Alphawert stattdessen in die Hintergrundfarbe.
Häufige Fragen
Unterstützen alle Browser 8-stellige Hex-Farben?
Ja. Die Formen #RRGGBBAA und #RGBA stammen aus CSS Color Level 4 und funktionieren in allen aktuellen Versionen von Chrome, Edge, Firefox und Safari. Sehr alte Browser ignorieren sie, füge also nur dann einen rgba()-Fallback hinzu, wenn du diese noch unterstützt.
Wie rechne ich Deckkraft in Hex um?
Multipliziere die Deckkraft (0 bis 1) mit 255, runde auf eine ganze Zahl und schreibe sie als zwei Hex-Ziffern. Für 30%: 0,3 mal 255 ergibt 76,5, gerundet 77, und das ist 4D in Hex. Die vollständige Tabelle auf dieser Seite listet jeden Schritt von 5% auf.
Ist #RRGGBBAA dasselbe wie rgba()?
Beide beschreiben dieselbe Farbe. rgba(79, 152, 251, 0.5) und #4F98FB80 werden identisch dargestellt, abgesehen von der winzigen Rundung im Hex-Alphawert. Nimm das, was deine Codebasis bereits verwendet.
Und was ist mit 4-stelligem Hex?
Das Alpha-Paar lesen
Ein Hex-Paar zählt von 00 bis FF, also von 0 bis 255. Das Alpha-Paar nutzt dieselbe Skala, wobei 00 vollständig transparent und FF vollständig deckend ist. Deshalb wirken die gängigen Werte zuerst seltsam: Die Hälfte von 255 ist 127,5, also wird 50% auf 128 gerundet, und das ist 80 in Hex.
Designer exportieren Farben aus einer Designdatei oft mit einem separaten Deckkraftwert. Wandelst du das in einen einzigen 8-stelligen Wert um, kannst du ihn ganz einfach in ein Design-Token oder eine Tailwind-Konfiguration übernehmen.
Transparente Farben in Tailwind
Tailwind fügt Deckkraft mit einem Schrägstrich nach dem Farbnamen hinzu, zum Beispiel bg-sky-500/50, was mit jeder Farbe im Theme funktioniert. Für eine eigene Farbe akzeptiert ein Arbitrary Value wie bg-[#4F98FB80] den 8-stelligen Hex-Wert direkt.
Intern mischt Tailwind 4 die Farbe mit color-mix() mit transparent, ältere Versionen verwenden rgb() mit Alphawert. Das Ergebnis auf dem Bildschirm entspricht dem Hex-Wert, den dir dieses Tool liefert.