RGB-zu-HEX-Konverter

Was ist ein RGB-zu-HEX-Konverter?

// Serialize {r, g, b, alpha} → canonical hex string
// Emits 6-digit #RRGGBB when alpha === 1, 8-digit #RRGGBBAA otherwise.
function formatHex({ r, g, b, alpha = 1 }) {
  const pair = (v) => Math.round(v).toString(16).padStart(2, '0').toUpperCase();
  const rgb = pair(r) + pair(g) + pair(b);
  if (alpha >= 1) return `#${rgb}`;
  const a = pair(alpha * 255);
  return `#${rgb}${a}`;
}

console.log(formatHex({ r: 255, g: 87, b: 51 }));              // '#FF5733'
console.log(formatHex({ r: 59, g: 130, b: 246 }));             // '#3B82F6'
console.log(formatHex({ r: 255, g: 87, b: 51, alpha: 0.5 })); // '#FF573380'
console.log(formatHex({ r: 5, g: 0, b: 0 }));                  // '#050000' — padStart matters

Kernfunktionen

Alternativen zum RGB-zu-HEX-Konverter

RGB-zu-HEX-Beispiele

rgb(255 87 51)

rgb(59 130 246)

rgb(255 87 51 / 0.5)

rgb(100% 50% 0%)

Häufige RGB → HEX Konvertierungen

Referenztabelle der 10 am häufigsten konvertierten RGB-Tripel und ihrer HEX-Entsprechungen — reine Primärfarben, reine Sekundärfarben und zwei reale Markenfarben aus der Tailwind-Palette.

So nutzen Sie den RGB-zu-HEX-Konverter

1. 1

   RGB-Tupel in das RGB-Feld tippen oder einfügen

   Legen Sie einen beliebigen `rgb()`-Wert in die RGB-Eingabe — modern leerzeichengetrennt `rgb(255 87 51)`, alt mit Komma `rgb(255, 87, 51)`, mit Alpha über Slash `rgb(255 87 51 / 0.5)` oder über die Form `rgba(255, 87, 51, 0.5)`, oder Prozent-Kanäle `rgb(100% 34% 20%)`. Das Tool normalisiert alle Eingabeformen zum selben internen RGB-Tupel, bevor der HEX berechnet wird. Ungültige Zeichen, Ganzzahlen außerhalb des Bereichs oder fehlerhafte Syntax erzeugen einen dezenten Inline-Fehler; gültiger RGB-Wert aktualisiert jedes andere Formatfeld in Echtzeit.

2. 2

   HEX-Code aus dem HEX-Feld ablesen

   Das HEX-Feld über dem RGB-Feld zeigt den passenden HEX-Wert: `#FF5733` für eine deckende Farbe, `#FF573380` für eine mit Alpha (8-stellige Form). Die Ausgabe verwendet standardmäßig Großbuchstaben-HEX-Ziffern, passend zu den meisten Marken-Richtlinien; Kleinbuchstaben (`#ff5733`) sind nur eine mechanische Ersetzung entfernt und gleichermaßen gültiges CSS. Die Konvertierung ist bitgenau — ein Rundlauf RGB → HEX → RGB stellt das ursprüngliche Tupel wortwörtlich ohne Float-Drift wieder her.

3. 3

   Auf Kopieren klicken, um die HEX-Zeichenkette zu übernehmen

   Jede Formatkarte hat rechts einen Kopieren-Knopf. Ein Klick und der Wert landet in der Zwischenablage — die Beschriftung blinkt kurz „Kopiert!“, damit Sie es sehen. Die kopierte Zeichenkette enthält das führende `#`, sodass sie sich direkt in eine CSS-Regel, ein Figma-Farbfeld, eine SwiftUI-HEX-Extension oder eine Android-`colors.xml` einfügen lässt. Für plattformspezifische Syntax (SwiftUI `Color(red:green:blue:)`, Compose `Color(0xFF...)`, Tailwind-v4-`@theme`-Tokens) nutzen Sie den Abschnitt Als Code kopieren unter dem Picker.

4. 4

   Ebenfalls sichtbar: HSL, OKLCH, OKLAB, CMYK, benannte Farbe

   Derselbe RGB, den Sie einfügen, leuchtet auch in den anderen Formatfeldern auf — HSL für Legacy-CSS, OKLCH und OKLAB für perzeptuell uniforme Designsysteme, HSV und HWB für Designer-Farbwähler-Workflows, CMYK für Druckschätzungen und der nächstgelegene benannte CSS-Farbname für Dokumentation und Fließtext. Sie sind nie nur auf RGB → HEX festgelegt; wenn Sie zusätzlich das OKLCH-Tripel für einen Tailwind-v4-`@theme`-Block brauchen, steht es direkt im OKLCH-Feld mit eigenem Kopieren-Knopf bereit.

5. 5

   Picker für visuelle Anpassungen nutzen

   Unter dem Formatraster befindet sich ein SL-Quadrat + Farbton-Schieberegler + Alpha-Schieberegler für die visuelle Erkundung. Bewegen Sie ein beliebiges Steuerelement und jedes Textfeld aktualisiert sich in Echtzeit, einschließlich des RGB und HEX, mit denen Sie begonnen haben. In Chromium-basierten Browsern (Chrome, Edge, Brave) aktiviert der EyeDropper-Knopf die native `EyeDropper`-API, um einen beliebigen Bildschirmpixel abzutasten — auch außerhalb des Browserfensters — nützlich, wenn Sie ein RGB-Tupel aus der UI einer anderen Anwendung übernehmen wollen, ohne vorher einen Screenshot zu machen, und anschließend direkt den HEX ablesen.

Häufige RGB-/HEX-Fehler

padStart überspringen:
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Erzeugt ungültigen 5-stelligen HEX.

padStart(2, '0') verwenden:
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Gültiger 6-stelliger HEX; funktioniert korrekt für alle Kanalwerte 0–255.

Runden überspringen:
(0.5 * 255).toString(16) → '7f.8'
Erzeugt ungültigen HEX mit Dezimalpunkt.

Zuerst zur Ganzzahl runden:
Math.round(0.5 * 255).toString(16).padStart(2, '0') → '80'
Gültiges 2-stelliges HEX-Paar; passt zur Normalisierung aus CSS Color 4.

Android-führender-Alpha-HEX in CSS einfügen:
rgb(255 87 51 / 0.5) → #80FF5733 (Android-Format)
CSS parst als Alpha=128, R=255, G=87, B=51 — komplett falsche Farbe.

Das dokumentierte Format der Zielplattform verwenden:
für CSS: #FF573380 (Alpha als letztes Byte)
für Android Compose: Color(0x80FF5733) (Alpha als erstes Byte)
Nicht ohne Umsortierung zwischen beiden hin- und herkopieren.

Gammacodierten RGB direkt mitteln:
(rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0)
Sieht aus wie dunkles Oliv, nicht wie kräftiges Gelb.

In linearem RGB mitteln:
dekodieren → lineares RGB → mitteln → zurückkodieren → rgb(188, 188, 0)
Sichtbar kräftiges Gelb, passend zu dem, was physikalische Lichtmischung ergibt.

Wer nutzt RGB zu HEX

Frontend-Entwickler konvertieren Canvas-RGB in CSS-HEX

Canvas-API-Zeichenfunktionen melden und akzeptieren Farben als RGB-Tupel (`ctx.fillStyle = 'rgb(255 87 51)'`), das umgebende CSS-Stylesheet will aber HEX-Variablen (`--color-fill: #FF5733`). Einmal das RGB einfügen, der passende HEX ist bereit, in eine CSS Custom Property zu fallen. Nützlich beim Extrahieren von Markenfarben aus einem Canvas-gerenderten Chart oder einer Datenvisualisierung zur Wiederverwendung in statischer UI.

Designer konvertieren Photoshop-RGB in Figma-HEX

Der Adobe-Farbwähler (in Photoshop, Illustrator und InDesign) meldet RGB als drei 0–255-Ganzzahlen über drei Kanalfelder. Figma hingegen zeigt Farbwerte in seinen Design-Panels standardmäßig als HEX. Tragen Sie die drei Photoshop-Ganzzahlen hier als `rgb(...)` ein, kopieren Sie die HEX-Ausgabe, fügen Sie sie in Figmas Farbfeld ein. Trifft die ursprüngliche Photoshop-Farbe exakt, ohne einen Umweg über Screenshot und Pipette.

Hardware-Entwickler konvertieren LED-Sensor-RGB in Web-HEX

Adressierbare LED-Streifen, Farbsensoren und Hardware-RGB-Kameras melden alle Kanalwerte als 0–255-Ganzzahlen. Wenn die Messwerte ein Web-Dashboard treiben sollen („die Lampe leuchtet aktuell in dieser Farbe“), erwartet das CSS-Attribut `style="background: ..."` den passenden HEX-Code. Tragen Sie das RGB-Tripel des Sensors ein, kopieren Sie den HEX, stecken Sie ihn in das Dashboard-Markup.

Spieleentwickler exportieren Unity-`Color` in Web-Mockups

Unitys `Color` und Unreals `FLinearColor`-Konstruktoren nehmen normalisierte 0–1-Floats; jeden mit 255 zu multiplizieren ergibt die passenden RGB-Ganzzahlen. Tragen Sie das entstehende `rgb(...)` hier ein, kopieren Sie den HEX, fügen Sie ihn in das Web-Mockup oder die Marketingseite ein, die die Akzentfarbe aus dem Spiel exakt treffen muss. Die simultane OKLCH-Ansicht blendet zusätzlich die wahrgenommene Helligkeit ein, sodass die Mockup-Palette von Hand auf die Helligkeitsstufen des Spiels abgestimmt werden kann.

Accessibility-Engineers prüfen Photoshop-Markenfarben

Wenn der Marken-Styleguide Farben als RGB-Ganzzahl-Tripel angibt („das Marken-Orange ist RGB 255 / 87 / 51“), das WCAG-Audit-Tool aber HEX-Codes will, ist dieser Konverter die Brücke. Tripel einfügen, HEX kopieren, durchs Audit schicken. Die WCAG- und APCA-Kontrast-Badges in diesem Tool blenden außerdem das Urteil in einem Schritt ein, sodass Sie nicht zwischen drei separaten Tools springen müssen.

E-Mail-Entwickler migrieren `rgba()` in 8-stelligen HEX

Moderne E-Mail-Client-HTML unterstützt 8-stelligen HEX (`#FF573380`) für Farben mit Alpha, alte Vorlagen speichern denselben Wert aber oft als `rgba(255, 87, 51, 0.5)`. Den `rgba()` hier einzufügen und die 8-stellige HEX-Ausgabe abzulesen macht die Migration mechanisch. Das HEX-Feld zeigt `#FF573380` für den 50-%-Alpha-Fall; die alte `rgba()`-Form bleibt im RGB-Feld für Fallback-Kontexte, die sie weiterhin brauchen.

Entwickler dokumentieren Marken-Tokens mit beiden Formaten

Design-Token-Dokumentationen zeigen dieselbe Farbe oft in beiden Formen, RGB und HEX: HEX für den CSS-Codeblock, RGB für die Prosa-Erklärung („das Marken-Orange ist `#FF5733`, entsprechend RGB 255 / 87 / 51“). Beide nebeneinander sichtbar zu haben, erlaubt es Autoren, jedes Format in einem Durchgang zu kopieren, statt zwei separate Tools zu bedienen. Der teilbare URL-Hash erlaubt Lesern außerdem, sich auf die genau besprochene Farbe durchzuklicken.

QA-Engineers prüfen Pixel-Farben gegen HEX-Spezifikationen

Visuelle Regressionstests erfassen Pixelfarben manchmal als RGB-Ganzzahlen (`expect(pixel).toMatchRgb([255, 87, 51])`), während die zugrundeliegende Spezifikation als HEX angegeben ist („Buttons müssen als `#FF5733` rendern“). Das erfasste RGB hier einzufügen, liefert den passenden HEX, den der QA-Engineer direkt mit der Spezifikation vergleichen kann. Die Bitgenauigkeit der Konvertierung sorgt dafür, dass der Vergleich nicht durch Float-Drift-Unterschiede ins Flackern gerät.

RGB-zu-HEX-Mathematik & Serialisierung

`toString(16).padStart(2, '0')` ist die einzeilige Implementierung

Die gesamte RGB-zu-HEX-Konvertierung passt in einen Ausdruck pro Kanal: `value.toString(16).padStart(2, '0')`. JavaScripts `toString(16)` konvertiert eine dezimale Ganzzahl in ihre Darstellung zur Basis 16. Das `padStart(2, '0')` ist das leicht zu vergessende Detail — ohne es würde der Kanalwert 5 als `'5'` statt `'05'` serialisiert und einen ungültigen 5-Zeichen-HEX wie `#55733` erzeugen, wenn er mit den anderen Kanälen verkettet wird. Die Standardredewendung ist `[r, g, b].map(v => v.toString(16).padStart(2, '0')).join('')` gefolgt von einem `'#'`-Präfix.

Prozent-Normalisierung: × 255 / 100, dann runden

CSS Color 4 erlaubt Prozent-Kanäle in `rgb()`: `rgb(100% 34% 20%)` entspricht `rgb(255 87 51)`. Die Normalisierungsregel lautet `Math.round(prozent × 255 / 100)`. `50 % × 255 / 100 = 127,5` rundet auf 128 (Banker's Rounding weg von ,5). Dieselbe Regel gilt für Alpha, wenn es als Prozent ausgedrückt wird (`rgb(255 87 51 / 50%)` ↔ `rgb(255 87 51 / 0.5)`). Ganzzahl- und Prozentformen erzeugen nach der Normalisierung identische HEX-Ausgaben; das Tool blendet im RGB-Feld nach der Re-Normalisierung die kanonische Ganzzahlform ein.

Alpha zu HEX: mit 255 multiplizieren, runden, als hinteres Paar kodieren

RGB mit Alpha (`rgb(255 87 51 / 0.5)`) gibt 8-stelligen HEX aus, indem Alpha mit 255 multipliziert, auf die nächste Ganzzahl gerundet und als 4. HEX-Paar hinter RGB angehängt wird. `0,5 × 255 = 127,5`, gerundet auf 128 = `0x80`, Ausgabe `#FF573380`. Die CSS-Color-4-Spezifikation verwendet für diese Konvertierung Banker's Rounding (Round-half-to-even), dem das Tool folgt. Die 8-stellige Form fällt auf 6-stellig zurück, wenn Alpha exakt 1 ist, um keine nachgelagerten `FF`-Paare in Stylesheets zu leaken.

RGB-Eingabe: CSS Color 4 leerzeichengetrennt und alt mit Komma — beides akzeptiert

Der Parser akzeptiert sowohl die moderne CSS-Color-4-Form `rgb(255 87 51)` als auch die alte CSS-1-Form `rgb(255, 87, 51)`. Die moderne Form passt zu den anderen funktionalen Notationen von CSS Color 4 (`hsl()`, `lab()`, `oklch()`, `color()`), die alle Leerzeichen-Trennung und Slash für Alpha verwenden. Die alte Komma-Form wird in jedem Evergreen-Browser weiter unterstützt und bleibt in älteren Codebasen verbreitet. Beide erzeugen identische HEX-Ausgaben; dem HEX-Serialisierer des Tools ist es egal, welche Eingabeform ankommt.

OKLCH als interne Source-of-Truth für rundlauf-stabile Werte

Auch wenn dieser Spoke gezielt RGB → HEX adressiert, hält der gemeinsame zugrundeliegende Konverter die kanonische Farbe intern als OKLCH-Tripel. Dadurch laufen RGB → HEX → HSL → OKLAB → CMYK → RGB ohne Float-Drift bei jedem Schritt; Legacy-Konverter, die HSL oder sRGB als Pivot nutzen, sammeln Rundungsfehler bei jeder Konvertierung an. Die Wahl von OKLCH (gegenüber OKLAB) bewahrt den Farbton als stabile Achse, sodass das Ziehen am Farbton-Schieberegler nicht versehentlich durch Grau crossfaded. Nach Björn Ottossons OKLAB-Papier von 2020.

Kanal-Kodierung: 8 Bit ohne Vorzeichen, sRGB-gammacodiert

Jeder RGB-Kanal ist eine 8-Bit-Ganzzahl ohne Vorzeichen (0–255), kodiert im sRGB-Farbraum gemäß IEC 61966-2-1 (1996). Die Werte sind *gammacodiert* — der Zusammenhang zwischen Kanalwert und wahrgenommener Helligkeit ist nicht-linear und folgt der stückweisen sRGB-Transferfunktion (etwa ein Exponent von 2,4 mit einem kleinen linearen Segment nahe null). Das ist bei Farbmathematik wichtig: Zwei RGB-Werte in ihrer gammacodierten Form zu mitteln, ergibt den falschen perzeptuellen Mittelpunkt. Für korrektes Blending zuerst nach linearem RGB dekodieren (CSS Color 4 §11.2), dann mitteln, dann zurückkodieren. Das OKLCH-Interne-Modell des Tools macht das transparent.

Best Practices für RGB-/HEX-Workflows

In Marken-Richtlinien Großbuchstaben-HEX bevorzugen, in Code Kleinbuchstaben

Marken-Richtlinien, Marketing-PDFs und designerorientierte Dokumentation verwenden für visuelle Konsistenz typischerweise Großbuchstaben-HEX (`#FF5733`) — das Großbuchstaben-Erscheinungsbild liest sich als Marken-Bezeichner. Code (CSS, JSON, JavaScript-Quelltext) verwendet aus Konvention typischerweise Kleinbuchstaben (`#ff5733`), weil sie schneller zu tippen sind und in automatisch erzeugten Linter-Ausgaben häufiger vorkommen. Beide sind gültiges CSS und werden identisch geparst; wählen Sie pro Kontext eine Schreibweise und bleiben Sie konsistent. Das Tool gibt standardmäßig Großbuchstaben aus; eine mechanische Ersetzung wechselt zu Kleinbuchstaben.

8-stelligen HEX nur ausgeben, wenn Alpha < 1

Wenn Alpha gleich 1 ist (vollständig deckend), fallen Sie auf die 6-stellige Form zurück. Ein nachgelagertes `FF`-Paar (`#FF5733FF`) ist gültiges CSS, überfrachtet aber Stylesheets visuell und bringt einige Legacy-Parser dazu, die Farbe falsch zu rendern. Die 8-stellige Form sollte nur erscheinen, wenn Alpha nennenswert transparent ist. Dieses Tool folgt der Regel automatisch — deckende Farben geben 6-stelligen HEX aus, Farben mit Alpha geben 8-stelligen HEX aus, und der Schnitt ist exakt (Alpha = 1,0 gibt 6 Stellen aus; Alpha = 0,9999 gibt 8 Stellen aus, um die Information zu erhalten).

RGB-Kanäle nicht direkt für Farbmathematik mitteln

RGB-Kanäle sind gammacodiert — das Mitteln zweier RGB-Werte ergibt den falschen perzeptuellen Mittelpunkt. `(255, 0, 0)` gemittelt mit `(0, 255, 0)` liefert `(127, 127, 0)`, ein matschiges Dunkeloliv, nicht den visuell hellen Gelb-Mittelpunkt, den man erwarten würde. Für korrektes Blending zuerst nach linearem RGB dekodieren (CSS Color 4 §11.2), dann mitteln, dann zurückkodieren. Oder besser in OKLAB oder OKLCH arbeiten, wo perzeptuelle Distanz uniform ist — genau das tun Paletten-Generatoren in Designsystemen.

HEX für CSS-Variablen bevorzugen, RGB für Hardware

Wenn Sie eine CSS Custom Property oder ein Tailwind-Konfig-Token schreiben, bevorzugen Sie HEX — es ist knapper und passt sauber in JSON oder YAML. Wenn der verbrauchende Code pro Kanal rechnet (Canvas-Aufrufe, Bildmanipulation, Hardware-LED-Treiber, OpenGL-Farbattribute), ist die RGB-Ganzzahlform schneller zu konsumieren. Beide Formate beschreiben dieselbe Farbe; die Wahl hängt rein davon ab, wer liest und schreibt, nicht von Korrektheit. Die simultane Feldansicht dieses Tools macht beide gleich günstig.

Alpha-Bereich vor der Multiplikation mit 255 prüfen

Wenn Sie Ihren eigenen RGB-zu-8-stelligen-HEX-Konverter implementieren, prüfen Sie, ob der Alpha-Float in `[0, 1]` liegt, bevor Sie den `× 255`-Schritt ausführen. Alpha außerhalb des Bereichs (negativ oder > 1) erzeugt stillschweigend ungültige HEX-Paare, die manche Parser akzeptieren und andere ablehnen — ein fragiles Fehlverhalten. Zuerst clampen (`Math.max(0, Math.min(1, alpha))`), dann multiplizieren, dann runden, dann hexadezimal kodieren. Das Tool gibt für Alpha außerhalb des Bereichs einen dezenten Inline-Fehler aus, statt einen kaputten HEX zu erzeugen.

URL-Hash zum Teilen von Live-Farbentscheidungen nutzen

Jede Farbänderung aktualisiert den URL-Hash automatisch als `#hex=ff5733`. Kopieren Sie die URL in einen Slack-Thread oder ein GitHub-Issue und wer sie öffnet, landet bei derselben Farbe mit demselben HEX. Das ist zuverlässiger, als ein RGB-Tupel in den Chat zu kopieren — Empfänger vertippen beim manuellen Eintippen Kommata oder lassen einen Kanal weg — und erlaubt es einem Design-Review-Thread, sich auf eine exakte Farbe zu beziehen statt auf „das Orange, das wir am Dienstag besprochen haben“. Der Hash wird nie an den Server übertragen.

Häufig gestellte Fragen