# Hex in RGB umrechnen: Farbcodes von Hand oder im Code

[Canonical HTML page](https://gradiently.design/de/guide/hex-to-rgb)

Ein Hex-Code ist nur drei Zahlen, geschrieben zur Basis 16. Sobald du die Paare siehst, dauert die Umrechnung von Hand Sekunden, und die Code-Version hat vier Zeilen.

## The short version

- Um Hex in RGB umzurechnen, teilst du den sechsstelligen Code in drei Paare und rechnest jedes Paar von der Basis 16 in eine Zahl zwischen 0 und 255 um.
- Jedes Paar ergibt sich aus der ersten Ziffer mal 16 plus der zweiten Ziffer, wobei die Buchstaben a bis f für 10 bis 15 stehen.
- Der Hex-Code #7c3aed ist rgb(124 58 237): 7c ist 124, 3a ist 58 und ed ist 237.
- Ein dreistelliger Hex-Code ist eine Kurzform, bei der jede Ziffer verdoppelt wird, also ist #f60 dieselbe Farbe wie #ff6600.
- Hex und RGB beschreiben genau dieselben sRGB-Farben, die Umrechnung ändert also nie, wie eine Farbe aussieht.

Um **Hex in RGB** umzurechnen, teilst du den Code in drei Zeichenpaare, je eines für Rot, Grün und Blau, und wandelst jedes Paar von der Basis 16 in eine normale Zahl zwischen 0 und 255 um. Bei `#7c3aed` sind die Paare `7c`, `3a` und `ed`, daraus werden 124, 58 und 237, die Farbe ist also `rgb(124 58 237)`. An der Farbe ändert sich nichts. Hex und RGB sind zwei Schreibweisen derselben drei Zahlen.

## So ist ein Hex-Farbcode aufgebaut

Ein Hex-Code hat sechs Zeichen nach der Raute. Die ersten zwei sind der Rotkanal, die mittleren zwei Grün und die letzten zwei Blau. Jeder Kanal kann 256 Werte annehmen, von 0 (nichts von diesem Licht) bis 255 (alles davon). Zur Basis 16 lässt sich jeder dieser 256 Werte mit genau zwei Zeichen schreiben, deshalb wurde Hex zur kompakten Art, Farben im Web einzutippen. Für das größere Bild, wie diese Codes zusammenhängen, siehe [Hex-Farbcodes erklärt](https://gradiently.design/de/guide/color-codes-explained).

Die Basis 16 zählt von 0 bis 9 und macht dann mit Buchstaben weiter. Das ist das Einzige, was du dir merken musst:

| Hex-Ziffer | Wert | Hex-Ziffer | Wert |
| --- | --- | --- | --- |
| 0 bis 9 | 0 bis 9 | c | 12 |
| a | 10 | d | 13 |
| b | 11 | e | 14 |
| f | 15 | ff (ein Paar) | 255 |

Groß- und Kleinschreibung spielt keine Rolle: #7C3AED und #7c3aed sind dieselbe Farbe.

## Hex von Hand in RGB umrechnen

Jedes Paar ist eine zweistellige Zahl zur Basis 16. Die linke Ziffer zählt Sechzehner, die rechte zählt Einer. Multipliziere die linke Ziffer mit 16, addiere die rechte, und du hast den Wert dieses Kanals.

1. **Raute weglassen und in Paare teilen** Aus `#7c3aed` werden `7c`, `3a` und `ed`. Das sind Rot, Grün und Blau in dieser Reihenfolge.
2. **Das rote Paar umrechnen** `7c`: 7 × 16 = 112, und c ist 12, also ist Rot 112 + 12 = **124**.
3. **Das grüne Paar umrechnen** `3a`: 3 × 16 = 48, und a ist 10, also ist Grün 48 + 10 = **58**.
4. **Das blaue Paar umrechnen** `ed`: e ist 14, 14 × 16 = 224, und d ist 13, also ist Blau 224 + 13 = **237**.
5. **Das Ergebnis schreiben** Modernes CSS nimmt `rgb(124 58 237)`. Die ältere Form mit Kommas, `rgb(124, 58, 237)`, funktioniert weiterhin überall.

Zwei schnelle Kontrollen halten dich ehrlich. `00` ist immer 0 und `ff` immer 255, also ist jedes Paar, das mit einem Buchstaben von a bis f beginnt, 160 oder mehr, und jedes Paar, das mit 0 bis 7 beginnt, liegt unter 128. Kommt bei `ed` ein kleiner Wert heraus, hast du die Ziffern verkehrt herum gelesen.

- #7c3aed = 124 58 237: #7c3aed
- #336699 = 51 102 153: #336699
- #ff6600 = 255 102 0: #ff6600
- #0d9488 = 13 148 136: #0d9488
- #1e293b = 30 41 59: #1e293b

Fünf durchgerechnete Beispiele. Rechne eins von Hand und prüfe es dann am Namen des Farbfelds.

## Kurzformen und Alpha

Ein **dreistelliger Code** ist eine Abkürzung: Verdopple jede Ziffer, um den vollen Code zu bekommen. `#f60` bedeutet `#ff6600`, also `rgb(255 102 0)`. `#fff` ist Weiß und `#000` Schwarz. Nur Farben, deren Paare jeweils eine Ziffer wiederholen, lassen sich so schreiben, `#7c3aed` hat also keine Kurzform.

Ein **achtstelliger Code** ergänzt ein viertes Paar für die Deckkraft. Es wird genauso umgerechnet, dann teilst du durch 255, um einen Bruch zu erhalten. `#7c3aed80` endet auf `80`, das ist 128, und 128 ÷ 255 ist etwa 0,5, also entspricht es `rgb(124 58 237 / 50%)`. Ein vierstelliger Code wie `#f608` ist die Kurzform derselben Idee.

```css
.card {
  /* the same violet written four ways */
  color: #7c3aed;
  color: rgb(124 58 237);
  color: rgb(124, 58, 237);

  /* half transparent */
  background: #7c3aed80;
  background: rgb(124 58 237 / 50%);
}
```

Jede Zeile einer Gruppe wird identisch dargestellt. Nimm die Schreibweise, die dein Team am schnellsten liest, und bleib dabei.

## Hex in RGB mit JavaScript

Im Code übernimmt `parseInt` mit der Basis 16 die Umrechnung für dich. Die Funktion unten akzeptiert drei-, vier-, sechs- und achtstellige Codes, mit oder ohne Raute, und gibt die Kanäle plus einen Alphawert zwischen 0 und 1 zurück.

```js
function hexToRgb(hex) {
  let h = hex.replace(/^#/, '');
  if (h.length === 3 || h.length === 4) {
    h = h.split('').map((c) => c + c).join('');
  }
  if (!/^[0-9a-f]{6}([0-9a-f]{2})?$/i.test(h)) {
    throw new Error('Not a hex colour: ' + hex);
  }
  const n = (i) => parseInt(h.slice(i, i + 2), 16);
  return {
    r: n(0),
    g: n(2),
    b: n(4),
    a: h.length === 8 ? Math.round((n(6) / 255) * 100) / 100 : 1,
  };
}

hexToRgb('#7c3aed');   // { r: 124, g: 58, b: 237, a: 1 }
hexToRgb('f60');       // { r: 255, g: 102, b: 0, a: 1 }
hexToRgb('#7c3aed80'); // { r: 124, g: 58, b: 237, a: 0.5 }
```

Keine Bibliothek nötig. Die Validierungszeile verhindert, dass ein Tippfehler still zu Schwarz wird.

## RGB in Hex umrechnen

Der Rückweg ist eine Division. Teile den Kanal durch 16: Die ganze Zahl ist die erste Ziffer, der Rest die zweite. Bei 153 ergibt 153 ÷ 16 9 Rest 9, das Paar ist also `99`. Bei 51 sind es 3 Rest 3, also `33`, und 102 ergibt 6 Rest 6, also `66`. Damit ist `rgb(51 102 153)` gleich `#336699`. In JavaScript erledigt das `toString(16)`, mit Auffüllen, damit einstellige Werte ihre führende Null behalten:

```js
const rgbToHex = (r, g, b) =>
  '#' + [r, g, b].map((v) => v.toString(16).padStart(2, '0')).join('');

rgbToHex(51, 102, 153); // '#336699'
rgbToHex(13, 148, 136); // '#0d9488'
```

Ohne padStart würde aus 13 d statt 0d, und dem Code fehlte ein Zeichen.

## Wann Hex, RGB oder etwas anderes passt

Hex ist kompakt und lässt sich leicht zwischen Tools kopieren, deshalb nutzen es Markenrichtlinien und Designdateien. RGB ist leichter zu durchschauen, wenn du im Code einen Kanal ändern oder Transparenz ergänzen musst. Keines von beiden taugt für die Fragen, die Designer wirklich stellen, etwa „mach das etwas heller“ oder „finde eine weichere Version dieses Blaus“. Dafür beschreiben [HSL-Farben](https://gradiently.design/de/guide/hsl-colors) und [OKLCH](https://gradiently.design/de/guide/oklch-explained) Farben über Farbton und Helligkeit, sodass sich kleine Änderungen vorhersehbar verhalten.

### Hex oder RGB passt für

- Markenrichtlinien und Übergabe an Entwickler
- Eine Farbe zwischen Apps kopieren
- Transparenz in CSS oder Canvas ergänzen
- Einen exakten Wert aus einer Vorgabe treffen

### Greif zu HSL oder OKLCH für

- Eine Farbe heller oder dunkler machen
- Hellere und dunklere Abstufungen für eine Palette bauen
- Weichere Verläufe zwischen weit entfernten Farbtönen
- Theming mit CSS-Variablen

Für den Druck zählt noch ein Unterschied. Hex und RGB beschreiben Licht auf einem Bildschirm, ein Drucker muss sie also in Farbe übersetzen, und sehr leuchtende Bildschirmfarben können auf Papier matter werden. [RGB vs. CMYK](https://gradiently.design/de/guide/rgb-vs-cmyk) erklärt, was dich erwartet. Auf dem Bildschirm sind die umgerechneten Farben identisch, und wenn eine Farbe ausblenden soll, schreibst du die Alpha-Formen von oben; [transparente Verläufe in CSS](https://gradiently.design/de/guide/css-gradient-transparent) zeigt sie in Aktion.

Bevor du eine umgerechnete Farbe als Textfarbe einsetzt, prüfe sie mit einem [Kontrastprüfer](https://gradiently.design/de/guide/color-contrast-accessibility) gegen ihren Hintergrund. In Gradiently brauchst du das selten: Automatische Farbe wählt für jede Zeile helle oder dunkle Schrift aus der eigenen Palette des Marks, damit die Wörter lesbar sind.

## FAQ

### Wie rechnet man Hex in RGB um?

Teile den sechsstelligen Code in drei Paare und rechne jedes von der Basis 16 um: erste Ziffer mal 16 plus zweite Ziffer, wobei a bis f für 10 bis 15 stehen. Aus #7c3aed wird 124, 58, 237.

### Was ist #ffffff in RGB?

Es ist rgb(255 255 255), reines Weiß. Jedes Paar ist ff, also 15 × 16 + 15 = 255.

### Wie rechne ich Hex in RGBA um?

Rechne die ersten drei Paare wie gewohnt um. Hat der Code acht Stellen, rechne auch das letzte Paar um und teile es durch 255 für den Alphawert, aus 80 wird also etwa 0,5.

### Ändert die Umrechnung von Hex in RGB die Farbe?

Nein. Beide sind Schreibweisen für dieselben sRGB-Werte, die Farbe wird also so oder so identisch dargestellt.

### Wie rechne ich RGB zurück in Hex um?

Teile jeden Kanal durch 16: Die ganze Zahl ist die erste Hex-Ziffer, der Rest die zweite. In JavaScript nutzt du value.toString(16).padStart(2, '0').