So nutzt du: HEX zu RGBA Konverter
- Gib einen HEX-Code wie
#ff6347ein oder füge ihn ein. Alternativ wähle eine Farbe über das Farbfeld. - Zieh den Regler für die Deckkraft (0 bis 1), um die Transparenz einzustellen. Die Karovorschau zeigt das Ergebnis.
- Klicke neben dem gewünschten Format auf Kopieren:
rgba(), modernergb(), 8-stelliges HEX, HSLA oder OKLCH. - Füge einen
rgba()- oder 8-stelligen HEX-Wert ein, um in die andere Richtung umzuwandeln. Der Regler übernimmt dann den Alpha-Wert.
Was macht ein HEX-zu-RGBA-Konverter?
Ein HEX-Code wie #FF6347 besteht aus drei Paaren hexadezimaler Ziffern: Rot FF (255), Grün 63 (99) und Blau 47 (71). In der klassischen sechsstelligen Form lässt HEX keinen Platz für Transparenz. Wenn du ein halbtransparentes Overlay, einen Schatten oder einen Hover-Zustand brauchst, wandelst du die Farbe deshalb in rgba(255, 99, 71, 0.5) um. Der vierte Wert ist der Alpha-Kanal von 0 (unsichtbar) bis 1 (volldeckend).
So funktioniert die Umwandlung
Jedes Zweier-Paar wird von der Basis 16 in die Basis 10 umgerechnet: FF = 15×16 + 15 = 255, 63 = 6×16 + 3 = 99. Eine Kurzschreibweise mit drei Ziffern wie #f63 wird erweitert, indem jede Ziffer verdoppelt wird (#ff6633). Der gewählte Alpha-Wert wird unverändert angehängt.
Welche Schreibweise sollte ich verwenden?
| Schreibweise | Beispiel | Hinweise |
|---|---|---|
| Klassisches rgba() | rgba(255, 99, 71, 0.5) | Funktioniert überall, auch in sehr alten Browsern und E-Mail-Clients. |
| Modernes rgb() | rgb(255 99 71 / 50%) | CSS Color Level 4: durch Leerzeichen getrennt, Alpha nach einem Schrägstrich. Wird von allen aktuellen Browsern unterstützt. |
| 8-stelliges HEX | #ff634780 | Das letzte Paar ist der Alpha-Wert (80 hex = 128 ≈ 50 %). Praktisch in Design-Tools und in Webflow-Farbfeldern. |
| Kanal-Variable | rgb(var(--color) / .5) | Speichere nur die Farbkanäle in einer eigenen Property und variiere die Deckkraft je nach Verwendung. Dieses Muster nutzt Tailwind. |
Deckkraft vs. Alpha
Die CSS-Eigenschaft opacity blendet ein gesamtes Element einschließlich Text und Kindelementen aus. Ein RGBA-Hintergrund macht nur die Farbe selbst transparent, sodass darüberliegender Text vollständig lesbar bleibt. Für Overlays auf Bildern und getönte Karten ist RGBA (oder color-mix()) meist die richtige Wahl. Beachte, dass halbtransparente Textfarben je nach Hintergrund unterschiedlich kontrastieren. Prüfe das Ergebnis mit dem Kontrast-Checker.
Auch gesucht als: hex zu rgba, hex zu rgb, rgba rechner, transparenz css, deckkraft farbe, hex8, rgba zu hex.
Passende Tools zu: HEX zu RGBA Konverter
- Farbkonverter — Füge eine beliebige CSS-Farbe ein — HEX, rgb(), hsl(), hwb(), oklch() oder einen Namen wie tomato — und erhalte sofort alle anderen Formate sowie eine fertige 50–950-Palette.
- OKLCH Farbkonverter — Erkunde den wahrnehmungsgleichmäßigen OKLCH-Farbraum mit Live-Reglern, prüfe, ob eine Farbe in sRGB passt, und kopiere passende HEX-, RGB- und HSL-Fallbacks.
- Farbmischer — Wähle zwei Farben und die Anzahl der Schritte, um gleichmäßig gemischte Übergangsfarben zu erhalten — ideal für Verläufe, Rahmen, Diagramme und Hover-Zustände.
- Tailwind-Farbgenerator — Füge eine Markenfarbe ein und erhalte eine ausgewogene 11-stufige Farbskala (50 bis 950), die in OKLCH integriert ist – mit Kontrasthinweisen und Exportmöglichkeiten für Tailwind v3, v4, CSS und SCSS.
Häufige Fragen
Wie wandle ich HEX manuell in RGBA um?
#336699 mit 70 % wird zu rgba(51, 102, 153, 0.7).Welcher HEX-Wert entspricht 50 % Deckkraft?
80 in hex ergibt. 50 % Schwarz ist also #00000080. 25 % entspricht 40, 75 % entspricht BF.Ist rgba() veraltet?
rgba() als Alias von rgb(), und beide akzeptieren einen Alpha-Wert. Die Schreibweise mit Kommas funktioniert in jedem Browser weiterhin.Kann ich RGBA wieder in HEX umwandeln?
rgba()-Wert in das Eingabefeld ein. Du erhältst das deckende HEX sowie ein 8-stelliges HEX, das den Alpha-Kanal enthält.