Zum Hauptinhalt springen
ToolsByUs

HEX in RGB umwandeln

HEX zu RGB zerlegt einen Hex-Farbwert in seine drei Dezimalkanäle. Jedes Paar aus Hex-Ziffern ist ein Kanal zur Basis 16, also ist #FF8800 gleich rgb(255 136 0). Ein Hex-Wert mit vier oder acht Ziffern trägt ein viertes Paar für den Alphawert, der in rgba() als 0–1-Wert herauskommt. Die Umwandlung ist in beide Richtungen exakt – keine Farbe geht verloren, denn beide Notationen beschreiben dieselben drei Bytes.

Nur lokal
HEX-Eingabe

Links eine Farbe eingeben. Akzeptiert werden Hexwerte mit oder ohne Raute, rgb(), hsl(), oklch() und CSS-Farbnamen.

Wie funktioniert HEX in RGB umwandeln?

Ein Hex-Farbwert sind drei Bytes zur Basis 16. Jedes Byte ist ein Kanal – Rot, Grün, Blau – und hält einen Wert von 0 bis 255, was exakt zwei Hex-Ziffern sind, denn 16² ist 256. Das ist die gesamte Umwandlung: zwei Zeichen lesen und zur Basis 16 interpretieren.

Eine Hex-Ziffer lesen

Die Ziffern laufen von 0–9 und dann a–f, wobei a für 10 steht und f für 15. Die linke Ziffer zählt die Sechzehner, die rechte gibt den Rest an: 88 ist also 8×16 + 8 = 136, und ff ist 15×16 + 15 = 255. Auf die Groß-/Kleinschreibung kommt es nicht an: #FF8800 und #ff8800 sind derselbe Farbwert, und CSS hat sie nie unterschieden.

Dreistelliger Hex-Wert und warum das keine Rundung ist

#f80 ist die Kurzform von #ff8800 – jede Ziffer wird verdoppelt, nicht mit einer Null aufgefüllt. Das ist wichtig: Die Verdopplung bildet f auf ff = 255 ab, das echte Maximum; eine aufgefüllte Null ergäbe f0 = 240, und jede Kurzform-Farbe käme leicht zu dunkel heraus. Die Kurzform kann nur die 4,096 Farben ausdrücken, deren Kanalpaare zufällig Verdopplungen sind – deshalb überlebt sie bei schnellen Werten wie #fff und verschwindet aus allem, was bewusst gestaltet ist.

Das vierte Paar ist der Alphawert

CSS Color 4 führte den 4- und 8-stelligen Hex-Wert ein, wobei das letzte Paar die Opazität auf derselben 0–255-Skala ist. #ff880080 ist rgb(255 136 0 / 0.5), denn 0x80 ist 128, und 128/255 ist 0.502. Die leichte Ungenauigkeit steckt im System: Alpha ist in CSS ein Bruchteil, und Hex kann davon nur 256 Stufen speichern, deshalb ergibt ein in rgba() als 0.5 geschriebener Wert über Hex den Rückweg als 0.502.

Welche Schreibweise?

Modernes CSS trennt die Kanäle mit Leerzeichen und den Alphawert mit einem Schrägstrich – rgb(255 136 0 / 50%) – und rgb() nimmt Alpha inzwischen direkt, weshalb rgba() ein Legacy-Alias ist, der aus Kompatibilitätsgründen erhalten bleibt. Die Komma-Schreibweise funktioniert weiterhin in jedem Browser und wird das auch bleiben; es gibt keine Deprecation und keinen Grund, deswegen ein Stylesheet umzuschreiben. Beide Formen werden hier ausgegeben, sodass Sie die einfügen können, die Ihre Codebasis bereits verwendet.

Ein Hex-Farbwert

#ff8800

Seine RGB-Kanäle

rgb(255 136 0)

ff → 255   (15 × 16 + 15)
88 → 136   (8 × 16 + 8)
00 → 0     (0 × 16 + 0)

Welche Optionen und Sonderfälle unterstützt HEX in RGB umwandeln?

Technische Referenz und Optionen
ParameterTypStandardVerhalten & Sonderfälle
#rgb3 ZiffernKurzformJede Ziffer wird verdoppelt: #f80 wird zu #ff8800. Mit dieser Methode können nur 4.096 Farben dargestellt werden.
#rgba4 ZiffernKurzformDie gleiche Verdopplung, mit einer vierten Ziffer für Alpha. #f808 wird zu #ff880088.
#rrggbb6 ZiffernStandardEin Byte pro Kanal, jeweils 0–255. 16,7 Millionen Farben.
#rrggbbaa8 ZiffernCSS Color 4Alpha als viertes Byte. Überall in aktuellen Browsern unterstützt; in sehr alten Browsern wird auf undurchsichtig zurückgefallen, anstatt ignoriert zu werden.
Groß-/Kleinschreibung—ignoriert#FF8800 und #ff8800 sind identisch. Kleinschreibung ist der gängige Standard.
rgb(r g b)modernLeerzeichenDie aktuelle Syntax. Alpha folgt nach einem Schrägstrich: rgb(255 136 0 / 50%).
rgba(r,g,b,a)klassischKommasNoch überall gültig und nicht veraltet. rgb() und rgba() sind jetzt dieselbe Funktion.
Prozentangaben0–100%erlaubtrgb(100% 53.3% 0%) ist dieselbe Farbe. Prozentwerte beziehen sich auf 255, nicht auf 100.

Häufig gestellte Fragen

Wie rechne ich Hex von Hand in RGB um?

Teilen Sie die sechs Ziffern in drei Paare und lesen Sie jedes Paar zur Basis 16: Die linke Ziffer sagt, wie viele Sechzehner drinstecken, die rechte gibt den Rest an. 88 ist also 8×16 + 8 = 136. Die Buchstaben setzen die Zählung fort – a ist 10, b ist 11, bis hin zu f mit 15 –, also ist ff 15×16 + 15 = 255. Drei Paare, drei Zahlen – und das ist die gesamte Umwandlung.

Ist #f80 dasselbe wie #ff8800?

Ja. Der dreistellige Hex-Wert verdoppelt jede Ziffer, statt sie mit einer Null aufzufüllen, deshalb expandiert #f80 zu #ff8800. Diese Verdopplung ist der Grund, warum #fff reines Weiß bedeutet; würde stattdessen aufgefüllt, wäre #fff gleich #f0f0f0 und jede Kurzform wäre leicht zu dunkel.

Wie funktioniert Alpha bei einem 8-stelligen Hex-Wert?

Die letzten beiden Ziffern sind die Opazität auf derselben 0–255-Skala wie die Farbkanäle: #ff880080 ist 0x80 = 128, also 128/255 = 0.502 Alpha. Da Hex nur 256 Stufen kennt, kommt ein in rgba() als 0.5 geschriebener Alpha-Wert über Hex als 0.502 zurück. Der Unterschied ist auf dem Bildschirm unsichtbar und fällt auf, sobald Sie Zeichenketten vergleichen.

Soll ich rgb() oder rgba() verwenden?

rgb() – es nimmt Alpha inzwischen selbst, weshalb rgba() nur noch ein Legacy-Alias für dieselbe Funktion ist. Keines von beiden ist veraltet, beide funktionieren überall; es gibt also keinen Grund, bestehenden Code umzuschreiben. Für neuen Code ist rgb(255 136 0 / 50%) die aktuelle Schreibweise.

Warum zeigt mein Design-Tool für denselben Hex-Wert andere RGB-Zahlen?

Fast immer ein Farbprofil. Hex ist ein Wert in einem Farbraum, und ist das Dokument als Display P3 oder Adobe RGB getaggt statt als sRGB, beschreiben dieselben drei Bytes eine andere Farbe, und das Tool zeigt Ihnen womöglich das sRGB-Äquivalent statt der rohen Zahlen. Diese Seite behandelt Hex als sRGB, was auch ein Browser in CSS damit macht.

Wie verwende ich einen RGB-Wert in einer CSS-Custom-Property?

Speichern Sie die drei Kanäle ohne den rgb()-Wrapper – --brand: 240 84 30; – und schreiben Sie dann color: rgb(var(--brand)) für die Volltonfarbe und background: rgb(var(--brand) / 0.12) für eine durchscheinende Tönung davon. Eine Variable deckt dann die Farbe und jede ihrer Transparenzstufen ab, weshalb Designsysteme Kanäle statt fertiger Farbzeichenketten speichern.

ToolsByUs-Team · Wie wir unsere Tools prüfen