Hex zu RGB Farbumrechnung: der vollständige Leitfaden

Was ist ein Hex-Farbcode?

Ein Hex-Farbcode ist eine sechsstellige Zeichenkette, die eine Farbe im Webdesign darstellt. Er sieht so aus: `#FF5733`. Das `#` ist ein Präfix, und die sechs Zeichen sind drei Paare hexadezimaler Ziffern — ein Paar jeweils für Rot, Grün und Blau. Hex ist die Abkürzung für „hexadezimal", was Basis 16 bedeutet, sodass jedes Paar einen Wert von 00 bis FF (0 bis 255 in Dezimal) darstellen kann.

Also `#FF5733` zerlegt sich so:

• `FF` = 255 Rot
• `57` = 87 Grün
• `33` = 51 Blau

Mische diese drei Lichtintensitäten und du erhältst ein warmes Orange. Hex-Codes sind die gängigste Art, Farben in CSS, HTML und den meisten Designwerkzeugen zu schreiben. Sie sind kurz, gehen sauber mit RGB hin und her, und sind die Lingua Franca der Farbe im Web.

Die anderen gängigen Farbnotationen, die dir begegnen werden, sind RGB (Rot 0-255, Grün 0-255, Blau 0-255), HSL (Farbton 0-360, Sättigung 0-100 %, Helligkeit 0-100 %) und CMYK (Cyan, Magenta, Gelb, Key/Schwarz in Prozent, für den Druck). Zwischen ihnen umrechnen zu können ist eine tägliche Aufgabe für Webentwickler, Designer und digitale Marketer.

Methode 1: Den kostenlosen Farbumrechner von UtilBoxx verwenden (Empfohlen)

Die schnellste, sicherste und privateste Methode, Farbcodes umzurechnen, ist das Hex-zu-RGB-Werkzeug von UtilBoxx. Es läuft vollständig in deinem Browser, sodass keine Daten dein Gerät verlassen. Kein Upload, keine Registrierung, kein Tracking.

So verwendest du es:

1. Gehe zu utilboxx.com/de/tools/color/hex-rgb
2. Tippe oder füge deinen Hex-Code ein (mit oder ohne führendes `#`)
3. Sieh die Live-Umrechnung in RGB, HSL und CMYK auf einmal
4. Nutze die Pipette, um eine Farbe von einer beliebigen Stelle des Bildschirms aufzunehmen
5. Klicke auf eine beliebige Ausgabe, um sie in die Zwischenablage zu kopieren

Warum wir diese Methode empfehlen:

• 100 % kostenlos, kein Konto, keine Registrierung, keine E-Mail-Bestätigung
• Privatsphäre zuerst: Alles wird lokal in deinem Browser verarbeitet. Es wird nichts hochgeladen.
• Alles in einem: HEX, RGB, HSL und CMYK auf einem Bildschirm
• Bidirektional: gib in einem beliebigen Format ein, erhalte alle anderen
• Pipette: nimm eine Farbe von einem beliebigen Bildschirm-Pixel auf
• Ein-Klick-Kopie: kopiere ein beliebiges Format in die Zwischenablage
• Funktioniert auf jedem Gerät: Windows, Mac, Linux, ChromeOS, iOS, Android

Wenn du nur gelegentlich Farben umrechnen musst, ist dies die reibungsloseste Option.

Methode 2: Photoshop-Farbwähler (Kostenpflichtig)

Photoshop ist das Schwergewicht der Bildbearbeitung, und sein Farbwähler (aktiviert durch Klick auf den Vorder-/Hintergrund-Farbschalter in der Werkzeugleiste) ist der Goldstandard für die Farbauswahl. Er zeigt HEX, RGB, HSL, CMYK, Lab und einige andere Farbräume nebeneinander. Du kannst einen Hex-Code in das `#`-Feld eingeben, die H/S/B-Schieberegler bewegen, irgendwo in das Farbfeld klicken oder mit der Pipette eine Farbe aus einem offenen Bild aufnehmen.

Der Haken ist der Preis. Photoshop ist Teil eines Creative-Cloud-Abonnements, das ungefähr 22,99 $ pro Monat (etwa 240 $ pro Jahr) kostet. Für eine gelegentliche Umrechnung ist das übertrieben. Und es braucht eine Desktop-Installation, die auf älteren Maschinen schwer wiegen kann.

Photoshop lohnt sich nur, wenn du es bereits für Retusche, Compositing oder Design nutzt. Wenn Farbumrechnung alles ist, was du brauchst, erledigt ein Browser-Werkzeug die Arbeit ohne Rechnung.

Methode 3: Mit Code umrechnen (JavaScript oder Python)

Wenn du Entwickler bist, kannst du Farben mit einer Einzeiler-Lösung in deiner bevorzugten Sprache umrechnen. Hier sind zuverlässige Snippets:

```bash # In jeder Unix-Shell mit Python: python3 -c "import sys; h=sys.argv[1].lstrip('#'); print(tuple(int(h[i:i+2], 16) for i in (0,2,4)))" "#FF5733" # (255, 87, 51) ```

```javascript // JavaScript: parseInt auf jedes Hex-Paar const hex = "#FF5733"; const r = parseInt(hex.slice(1, 3), 16); // 255 const g = parseInt(hex.slice(3, 5), 16); // 87 const b = parseInt(hex.slice(5, 7), 16); // 51 console.log(`rgb(${r}, ${g}, ${b})`); // "rgb(255, 87, 51)"

// Umgekehrt: RGB zu HEX function rgbToHex(r, g, b) { return "#" + [r, g, b].map(x => x.toString(16).padStart(2, "0")).join("").toUpperCase(); } console.log(rgbToHex(255, 87, 51)); // "#FF5733" ```

```python # Python f-string mit format spec hex = "FF5733" r, g, b = int(hex[0:2], 16), int(hex[2:4], 16), int(hex[4:6], 16) print(f"rgb({r}, {g}, {b})") # "rgb(255, 87, 51)"

# RGB zu HEX def rgb_to_hex(r, g, b): return "#{:02X}{:02X}{:02X}".format(r, g, b) print(rgb_to_hex(255, 87, 51)) # "#FF5733" ```

```css / Modernes CSS unterstützt color() und relative Farben / :root { --brand: #FF5733; --brand-rgb: 255, 87, 51; / in rgba() einsetzen / }

.button { background: rgb(var(--brand-rgb)); border: 1px solid rgba(var(--brand-rgb), 0.5); } ```

Für Ad-hoc-Umrechnungen ist ein Browser-Werkzeug schneller. Für die Integration in eine Build-Pipeline oder ein Design-System ist Code die richtige Antwort.

Häufige Fragen

Was ist der Unterschied zwischen HEX und RGB?

HEX ist eine sechsstellige hexadezimale Zeichenkette. RGB sind drei Dezimalzahlen von 0-255. Sie repräsentieren exakt dieselbe Farbe; die Formate sind austauschbar. `#FF5733` = `rgb(255, 87, 51)` = derselbe warme Orangeton.

Wofür ist HSL besser?

HSL (Farbton, Sättigung, Helligkeit) ist eine viel intuitivere Art, über Farbe nachzudenken, als RGB. Um eine Farbe „heller" zu machen, erhöhst du L. Um sie „lebhafter" zu machen, erhöhst du S. Um dich durch das Spektrum zu bewegen, drehst du H. Deshalb bevorzugen moderne CSS-Farbmischfunktionen und viele Designwerkzeuge HSL.

Wofür ist CMYK?

CMYK ist das Farbmodell für den Druck. RGB ist das Farbmodell für Bildschirme. Sie überlappen sich, sind aber nicht identisch: ein lebendiges RGB-Blau kann unmöglich in CMYK gedruckt werden, ohne ins Violette zu kippen. Rechne vor dem Senden an eine Druckerei in CMYK um, um eine Vorschau dessen zu erhalten, was tatsächlich herauskommt.

Sind Hex-Codes case-sensitive?

Nein. `#FF5733` und `#ff5733` sind dieselbe Farbe. CSS behandelt sie identisch. Die Konvention ist, der Klarheit halber Großbuchstaben zu verwenden (`#FFFFFF` liest sich schneller als „Weiß" als `#ffffff`).

Wie nehme ich eine Farbe von einer Webseite auf?

Nutze die Pipette in den DevTools deines Browsers. Öffne in Chrome, Firefox oder Edge die DevTools (F12 oder Cmd+Opt+I), klicke auf das „Untersuchen"-Werkzeug und dann auf den Farbschalter im Styles-Panel. Du kannst den Hex-, RGB- oder HSL-Wert aus dem Popup kopieren. Das UtilBoxx-Werkzeug hat ebenfalls eine eingebaute Bildschirm-Pipette.

Ist die Nutzung eines Online-Farbumrechners sicher?

Das hängt vom Dienst ab. UtilBoxx verarbeitet alles in deinem Browser — kein Upload, keine serverseitige Verarbeitung, keine Logs. Bei anderen Werkzeugen solltest du davon ausgehen, dass deine Eingabe protokolliert wird. Für gelegentliche Farbcodes ist das kein großes Ding, aber für proprietäre Markenfarben lohnt sich ein privates Werkzeug.

Fazit

Farbumrechnung ist eine kleine Aufgabe, die für jeden, der mit Webdesign, Branding oder Druck arbeitet, ständig anfällt, und keine kostenpflichtige Subskription oder Software-Installation erfordern sollte. Für die meisten Menschen ist der kostenlose Farbumrechner von UtilBoxx die offensichtliche Wahl: privat, schnell, kostenlos, ohne Registrierung.

Wenn du Designer bist und bereits in Photoshop lebst, ist der Farbwähler ein großartiges Backup. Wenn du skriptest, sind JavaScript- und Python-Einzeiler unschlagbar. macOS-Nutzer können auch das eingebaute Digital Color Meter (in Programme/Dienstprogramme) verwenden, um eine beliebige Farbe auf dem Bildschirm abzutasten und in RGB abzulesen.

Für alles andere besuche die Farb-Werkzeuge von UtilBoxx: Dort findest du einen kompletten, auf Privatsphäre ausgelegten Werkzeugkasten für die Arbeit mit Farben — alles im Browser.