HEX zu RGB Konvertierung: Vollständiger Leitfaden zu Farbcodes

Ob Sie eine Website erstellen, ein Logo gestalten oder CSS-Styles debuggen — zu verstehen, wie man zwischen den Farbformaten HEX und RGB konvertiert, ist eine wesentliche Fähigkeit für Webentwickler und Designer. Diese beiden Farbsysteme sind das Rückgrat der digitalen Farbdarstellung, und zu wissen, wie sie zusammenhängen, macht Ihren Workflow schneller und präziser.

In diesem Leitfaden erfahren Sie genau, was HEX und RGB sind, wie man sie manuell ineinander umrechnet und wann man welches Format verwendet. Sie können auch unseren Farbumrechner nutzen, um sofort zwischen den Formaten zu wechseln.

Was ist HEX?

HEX steht für hexadezimal — ein Zahlensystem zur Basis 16, das zur Darstellung von Farben in der Webentwicklung verwendet wird. Ein HEX-Farbcode ist ein sechsstelliger Code, dem ein Hash-Symbol (#) vorangestellt ist, wobei jedes Ziffernpaar die Intensität von Rot, Grün und Blau darstellt.

#RRGGBB

• RR — Rotanteil (00 bis FF hexadezimal, 0 bis 255 dezimal)
• GG — Grünanteil (00 bis FF hexadezimal, 0 bis 255 dezimal)
• BB — Blauanteil (00 bis FF hexadezimal, 0 bis 255 dezimal)

Zum Beispiel bedeutet #ff5733: Rot = FF (255), Grün = 57 (87), Blau = 33 (51).

HEX unterstützt eine Kurzschreibweise, wenn beide Ziffern jedes Paars identisch sind: #f00 entspricht #ff0000 (reines Rot).

Was ist RGB?

RGB steht für Rot, Grün, Blau — das additive Farbmodell, das von Bildschirmen und digitalen Anzeigen verwendet wird. Jede Farbe wird durch drei Werte von 0 bis 255 definiert:

rgb(R, G, B)

• R — Rotintensität (0–255)
• G — Grünintensität (0–255)
• B — Blautintensität (0–255)

Zum Beispiel erzeugt rgb(255, 87, 51) dasselbe warme Orange wie #ff5733.

RGB ist intuitiv, weil es direkt abbildet, wie Bildschirme Farben erzeugen: durch die Kombination von rotem, grünem und blauem Licht mit unterschiedlichen Intensitäten.

HEX vs RGB: Ein Vergleich

Merkmal	HEX	RGB
Format	#RRGGBB	rgb(R, G, B)
Zahlensystem	Basis 16 (hexadezimal)	Basis 10 (dezimal)
Wertebereich	00–FF pro Kanal	0–255 pro Kanal
Kurzschreibweise	Ja (#f00 = #ff0000)	Nein
CSS-Verwendung	color: #ff5733;	color: rgb(255, 87, 51);
Alpha-Unterstützung	#RRGGBBAA (8-stellig)	rgba(R, G, B, A)
Lesbarkeit	Kompakt, üblich in Design-Tools	Auf den Blick leichter verständlich

Beide Formate erzeugen identische Farben — der Unterschied liegt ausschließlich in der Schreibweise der Werte.

HEX zu RGB konvertieren: Schritt für Schritt

Die Konvertierung eines HEX-Farbcodes in RGB erfolgt in drei einfachen Schritten:

1. Aufteilen des HEX-Codes in drei Zweierpaare (nach Entfernen des #).
2. Umrechnen jedes Paars von hexadezimal nach dezimal.
3. Zusammenfügen der drei Dezimalwerte zu rgb(R, G, B).

Beispiel: #3498db in RGB umrechnen

1. Aufteilen: 34, 98, db
2. Jedes Paar umrechnen:
   • 34 → (3 × 16) + 4 = 52
   • 98 → (9 × 16) + 8 = 152
   • db → (13 × 16) + 11 = 219
3. Ergebnis: rgb(52, 152, 219) — ein kräftiges Blau.

Die Konvertierungsformel

Die mathematische Formel zur Umrechnung eines zweistelligen Hexadezimalpaars in Dezimal lautet:

dezimal = (erste_ziffer × 16) + zweite_ziffer

Hexadezimale Ziffern verwenden 0–9 und A–F, wobei:

• A = 10, B = 11, C = 12, D = 13, E = 14, F = 15

Ausführliche Beispiele

Beispiel 1: #ff0000 (Rot)

• FF → (15 × 16) + 15 = 255
• 00 → 0
• 00 → 0
• Ergebnis: rgb(255, 0, 0)

Beispiel 2: #00ff00 (Grün)

• 00 → 0
• FF → 255
• 00 → 0
• Ergebnis: rgb(0, 255, 0)

Beispiel 3: #1a2b3c (Dunkles Blaugrün)

• 1A → (1 × 16) + 10 = 26
• 2B → (2 × 16) + 11 = 43
• 3C → (3 × 16) + 12 = 60
• Ergebnis: rgb(26, 43, 60)

Beispiel 4: #abcdef (Hellblau-Grau)

• AB → (10 × 16) + 11 = 171
• CD → (12 × 16) + 13 = 205
• EF → (14 × 16) + 15 = 239
• Ergebnis: rgb(171, 205, 239)

RGB zu HEX: Die umgekehrte Konvertierung

Um RGB zurück in HEX umzurechnen, kehren Sie den Prozess um:

1. Umrechnen jedes Dezimalwerts (0–255) in sein zweistelliges hexadezimales Äquivalent.
2. Verknüpfen der drei Hexadezimalpaare mit einem #-Präfix.

Formel

hex_paar = dezimal_zu_hex(wert)

Teilen Sie die Dezimalzahl durch 16. Der Quotient ist die erste Hexadezimalziffer, der Rest die zweite.

Beispiel: rgb(52, 152, 219) in HEX umrechnen

• 52 ÷ 16 = 3 Rest 4 → 34
• 152 ÷ 16 = 9 Rest 8 → 98
• 219 ÷ 16 = 13 Rest 11 → db
• Ergebnis: #3498db

Gängige Farbwerte

Hier ist eine Referenztabelle beliebter Farben in beiden Formaten:

Farbe	HEX	RGB
Rot	#ff0000	rgb(255, 0, 0)
Grün	#00ff00	rgb(0, 255, 0)
Blau	#0000ff	rgb(0, 0, 255)
Weiß	#ffffff	rgb(255, 255, 255)
Schwarz	#000000	rgb(0, 0, 0)
Gelb	#ffff00	rgb(255, 255, 0)
Cyan	#00ffff	rgb(0, 255, 255)
Magenta	#ff00ff	rgb(255, 0, 255)
Orange	#ff8c00	rgb(255, 140, 0)
Lila	#800080	rgb(128, 0, 128)
Grau	#808080	rgb(128, 128, 128)
Koralle	#ff7f50	rgb(255, 127, 80)

Einsatzgebiete in der Webentwicklung

CSS-Styling

Beide Formate funktionieren direkt in CSS:

/* HEX-Format */
.header { background-color: #3498db; }

/* RGB-Format */
.header { background-color: rgb(52, 152, 219); }

/* Mit Transparenz */
.overlay { background-color: rgba(52, 152, 219, 0.5); }
.overlay { background-color: #3498db80; }

HTML-Inline-Styles

<div style="color: #e74c3c;">Fehlermeldung</div>
<div style="color: rgb(231, 76, 60);">Fehlermeldung</div>

Dynamische Farben in JavaScript

// Zufällige Farbe erzeugen
const randomHex = '#' + Math.floor(Math.random()*16777215).toString(16);

// HEX in RGB umrechnen mit JavaScript
function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return { r, g, b };
}

Design-Tools

Tools wie Figma, Adobe Photoshop und Canva zeigen standardmäßig HEX-Farben an, ermöglichen aber den Wechsel zu RGB. Beim Kopieren von Farbwerten aus diesen Tools müssen Sie möglicherweise zwischen den Formaten für Ihre Codebasis konvertieren.

Für schnelle Umrechnungen verarbeitet der Farbumrechner HEX-, RGB- und HSL-Formate sofort. Wenn Sie zwischen anderen Zahlensystemen umrechnen müssen, ist der Zahlenbasis-Konverter ebenfalls nützlich.

Probieren Sie unseren kostenlosen Farbumrechner

Müssen Sie schnell Farben umrechnen? Unser Farbumrechner unterstützt HEX, RGB und HSL mit einer Live-Farbvorschau. Fügen Sie einfach Ihren Farbwert ein und erhalten Sie sofort alle Formate — keine Anmeldung erforderlich.

Entdecken Sie auch unseren Einheitenumrechner für andere alltägliche Umrechnungen.

Fazit

HEX und RGB sind zwei Seiten derselben Medaille — beide beschreiben exakt dieselben Farben mit unterschiedlichen Zahlensystemen. HEX verwendet die Basis 16 für eine kompakte Schreibweise, während RGB vertraute Dezimalwerte nutzt. Das Verständnis der Konvertierung zwischen beiden hilft Ihnen, in CSS, JavaScript und Design-Tools effizienter zu arbeiten.

Für tiefergehende Informationen zur digitalen Farbmodellierung lesen Sie unseren Leitfaden Was ist ein Farbraum?.

FAQ

Ist die HEX-zu-RGB-Konvertierung verlustbehaftet?

Nein. HEX und RGB repräsentieren exakt dieselben Werte in unterschiedlichen Zahlensystemen. Die Konvertierung zwischen beiden ist vollkommen umkehrbar ohne jeglichen Datenverlust.

Kann HEX mehr Farben darstellen als RGB?

Nein. Beide Formate können exakt 16.777.216 Farben darstellen (256 × 256 × 256). Sie decken denselben Farbraum ab — nur unterschiedlich geschrieben.

Warum bevorzugen Webentwickler HEX?

HEX ist kompakter (#f00 vs rgb(255, 0, 0)) und war das traditionelle Format in HTML und CSS. Viele Designer finden es außerdem einfacher, aus Design-Tools zu kopieren.

Wie konvertiere ich einen 3-stelligen HEX-Code in RGB?

Erweitern Sie jede Ziffer durch Verdopplung: #f00 wird zu #ff0000, dann normal konvertieren. Also #f00 → rgb(255, 0, 0).

Unterstützt RGB Transparenz?

Ja — verwenden Sie rgba(R, G, B, A), wobei A der Alphakanal von 0 (vollständig transparent) bis 1 (vollständig deckend) ist. HEX unterstützt ebenfalls Transparenz mit 8-stelligen Codes: #RRGGBBAA.

Wie lautet der HEX-Code für Weiß?

Weiß ist #ffffff in HEX, was rgb(255, 255, 255) entspricht — alle Kanäle auf maximaler Intensität.

Kann ich HEX in CSS-Custom-Properties verwenden?

Ja. HEX-Werte funktionieren in CSS-Variablen wie jeder andere Wert:

:root { --primary: #3498db; }

Was ist der Unterschied zwischen HEX und HSL?

HEX und RGB definieren Farben nach Kanalintensität, während HSL (Farbton, Sättigung, Helligkeit) Farben nach ihren visuellen Eigenschaften definiert. HSL ist oft intuitiver zum Anpassen von Farben — zum Beispiel um etwas heller oder gesättigter zu machen. Nutzen Sie unseren Farbumrechner, um zwischen allen drei Formaten zu wechseln.