Wie rechne ich eine Hex-Farbe in RGBA um?

Teilen Sie das Hex in seine Rot-, Grün- und Blau-Byte-Paare auf und wandeln Sie jedes in eine Dezimalzahl (0–255) um, genau wie bei einer einfachen Hex-zu-RGB-Umrechnung, und fügen Sie dann einen vierten Alphawert zwischen 0 (vollständig transparent) und 1 (vollständig deckend) hinzu: rgba(R, G, B, A). Zum Beispiel ist #FF6B35 bei 50 % Deckkraft rgba(255, 107, 53, 0.5).

Was ist der Unterschied zwischen rgba() und einer 8-stelligen Hex-Farbe?

Sie stellen dieselbe Information unterschiedlich dar. rgba(255, 107, 53, 0.5) und #FF6B3580 bedeuten beide dasselbe Orange bei 50 % Deckkraft — das 8-stellige Hex hängt für Alpha nur zwei weitere Hex-Ziffern (00–FF) an, statt einen separaten Dezimalwert zu nutzen. Beide werden seit 2017 in allen gängigen Browsern unterstützt.

Wie rechne ich einen Alpha-Prozentsatz in die zwei Hex-Ziffern um?

Multiplizieren Sie den Prozentsatz (als Bruch zwischen 0 und 1) mit 255, runden Sie auf die nächste Ganzzahl und wandeln Sie diese in einen zweistelligen Hex-Wert um. 50 % Deckkraft sind 0,5 × 255 = 127,5, gerundet 128, was 0x80 entspricht — daher #FF6B3580 für 50 % deckkräftiges Orange.

Ist rgba() oder 8-stelliges Hex besser für CSS geeignet?

Funktional identisch — wählen Sie, was besser zum Stil Ihrer Codebasis passt. rgba() macht den Alphawert auf einen Blick expliziter; 8-stelliges Hex ist kompakter und passt natürlicher zu Design-Tools, die bereits Hex-Farbmuster ausgeben.

Guide

Hex zu RGBA: Transparenz für Hex-Farben

#FF6B35 kennt kein Konzept von Transparenz. rgba(255, 107, 53, 0.5) schon — die Umrechnung teilt die Hex-Ziffern nur wieder in Kanäle auf.

By Buğra SözeriPublished September 25, 2026

Eine gewöhnliche 6-stellige Hex-Farbe wie #FF6B35 kodiert Rot, Grün und Blau — sonst nichts. Für Transparenz gibt es in diesem Format keinen Platz. Um eine Farbe in CSS teilweise durchsichtig zu machen, brauchen Sie entweder die Funktion rgba(), die einen vierten Alphakanal als Dezimalzahl zwischen 0 und 1 hinzufügt, oder die neuere 8-stellige Hex-Syntax (#RRGGBBAA), die für denselben Zweck zwei weitere Hex-Ziffern anhängt. Die Umrechnung zwischen Hex und RGBA ist dieselbe Kanal-Aufteilungsrechnung wie bei einer einfachen Hex-zu-RGB-Umrechnung, plus eine zusätzliche Zahl.

Die Hex-Ziffern in RGB-Kanäle aufteilen

Eine 6-stellige Hex-Farbe besteht aus drei aufeinanderfolgenden 2-stelligen Hex-Byte-Paaren: FF (Rot), 6B (Grün), 35 (Blau). Jedes Paar ist eine Zahl zur Basis 16 von 00 bis FF, was dezimal 0–255 entspricht. FF = 255, 6B = 107, 35 = 53 — das ergibt rgb(255, 107, 53). Fügen Sie einen Alphawert zwischen 0 und 1 als viertes Argument hinzu, erhalten Sie rgba(255, 107, 53, 1) für vollständig deckend, oder jeden Bruch unter 1 für teilweise Transparenz.

Gängige Deckkraft-Werte, beide Richtungen

Deckkraft	rgba()-Alpha	8-stelliges Hex-Suffix
100 %	1	FF
90 %	0,9	E6
75 %	0,75	BF
50 %	0,5	80
25 %	0,25	40
10 %	0,1	1A
0 %	0	00

Das Hex-Suffix ergibt sich, indem man den Deckkraft-Bruch mit 255 multipliziert und in Hex umwandelt — 50 % sind 0,5 × 255 = 127,5, was auf 128 (dezimal) bzw. 80 (hex) gerundet wird. Sowohl die Funktion rgba() als auch die 8-stellige Hex-Syntax werden laut W3C CSS Color Module seit 2017 in jedem gängigen Browser unterstützt, sodass die Wahl zwischen beiden rein stilistisch ist.

Warum das über CSS hinaus wichtig ist

Dieselbe Rechnung gilt überall, wo ein Design-Tool oder eine API eine alpha-fähige Farbe verlangt — SVGs fill-opacity, Canvas-fillStyle-Strings oder ein Design-System-Token, das durchscheinende Overlay-Farben speichert. Starten Sie von einer Marken-Hex-Farbe und benötigen eine halbtransparente Overlay-Variante (ein gängiges Muster für Hover-Zustände oder Modal-Hintergründe), rechnen Sie die Basis-Hex-Farbe mit einem Hex-zu-RGB-Konverter in RGB um und setzen Sie sie dann als rgba() mit dem vom Design geforderten Alpha neu zusammen — ohne die Byte-Paare jedes Mal von Hand zu berechnen.

Frequently asked questions

Wie rechne ich eine Hex-Farbe in RGBA um?: Teilen Sie das Hex in seine Rot-, Grün- und Blau-Byte-Paare auf und wandeln Sie jedes in eine Dezimalzahl (0–255) um, genau wie bei einer einfachen Hex-zu-RGB-Umrechnung, und fügen Sie dann einen vierten Alphawert zwischen 0 (vollständig transparent) und 1 (vollständig deckend) hinzu: rgba(R, G, B, A). Zum Beispiel ist #FF6B35 bei 50 % Deckkraft rgba(255, 107, 53, 0.5).
Was ist der Unterschied zwischen rgba() und einer 8-stelligen Hex-Farbe?: Sie stellen dieselbe Information unterschiedlich dar. rgba(255, 107, 53, 0.5) und #FF6B3580 bedeuten beide dasselbe Orange bei 50 % Deckkraft — das 8-stellige Hex hängt für Alpha nur zwei weitere Hex-Ziffern (00–FF) an, statt einen separaten Dezimalwert zu nutzen. Beide werden seit 2017 in allen gängigen Browsern unterstützt.
Wie rechne ich einen Alpha-Prozentsatz in die zwei Hex-Ziffern um?: Multiplizieren Sie den Prozentsatz (als Bruch zwischen 0 und 1) mit 255, runden Sie auf die nächste Ganzzahl und wandeln Sie diese in einen zweistelligen Hex-Wert um. 50 % Deckkraft sind 0,5 × 255 = 127,5, gerundet 128, was 0x80 entspricht — daher #FF6B3580 für 50 % deckkräftiges Orange.
Ist rgba() oder 8-stelliges Hex besser für CSS geeignet?: Funktional identisch — wählen Sie, was besser zum Stil Ihrer Codebasis passt. rgba() macht den Alphawert auf einen Blick expliziter; 8-stelliges Hex ist kompakter und passt natürlicher zu Design-Tools, die bereits Hex-Farbmuster ausgeben.

Sources & references

Authoritative references cited by this piece. Verified by Buğra Sözeri on the dates shown and re-checked at every deploy.

W3C CSS Color Module Level 4 — Die Spezifikation, die rgba(), die 8-stellige #RRGGBBAA-Hex-Syntax und die Alpha-Kompositierung definiert(as of 2026-09-25)
MDN — <color> CSS data type — MDN-Referenz für jede CSS-Farbsyntax einschließlich Alpha-Varianten(as of 2026-09-25)

Published September 25, 2026