Konvertieren Sie jeden HEX-Farbcode direkt im Browser in RGB — 3-stellige, 6-stellige und 8-stellige HEX-Werte mit Alpha werden unterstützt. Kostenlos, sofort, ohne Anmeldung, Ihre Farben verlassen die Seite nie.
Helle Tönungen
Dunkle Tönungen
Töne
Harmonien
— — — — — Ein HEX-zu-RGB-Konverter ist ein kleines Werkzeug, das einen HEX-Farbcode (`#FF5733`) in die drei Kanal-Ganzzahlen umwandelt, die er repräsentiert (`rgb(255 87 51)`). HEX und RGB sind die beiden Formate, um die jedes Web-Stylesheet, jedes Designwerkzeug und jede Bildpixel-Pipeline seit Ende der 1990er-Jahre aufgebaut wurde, und die Konvertierung zwischen beiden ist die mit Abstand häufigste Operation in der Farbverarbeitung. HEX ist das knappe Copy-Paste-Format, das Figma, Sketch, Photoshop und jedes Marken-Richtlinien-PDF standardmäßig exportieren — eine 6-stellige Hexadezimalzeichenkette, die bequem in eine CSS Custom Property passt und auf einen Blick lesbar wird, sobald sich das Auge an die Muster gewöhnt hat. RGB ist das kanaladressierte Format, das Hardware-APIs, Canvas-Zeichenaufrufe, Bildpuffer-Manipulation, OpenGL-Farbattribute und die meisten Grafik-SDKs erwarten — drei separate 0–255-Ganzzahlen (oder auf 0–1 normalisierte Floats), die direkt auf die roten, grünen und blauen Subpixel eines LCD oder auf die Leuchtstoffe einer Bildröhre abbilden. Die Konvertierung dazwischen ist mechanisch: Den HEX in drei 2-stellige Paare aufteilen und jedes Paar als Hexadezimalzahl lesen. Dieses Tool führt die Konvertierung live während der Eingabe aus, ohne „Konvertieren“-Knopf, und blendet kostenlos jedes weitere gängige Farbformat (HSL, OKLCH, OKLAB, HSV, HWB, CMYK sowie die 148 benannten CSS-Farben) neben der RGB-Ausgabe ein.
**Das RGB-Format selbst verdient einen genaueren Blick.** Standard-24-Bit-sRGB kodiert jeden Kanal als 8-Bit-Ganzzahl ohne Vorzeichen von 0 bis 255 — 256 Werte je Kanal, insgesamt 16.777.216 Farben (256³). Der Referenzstandard ist IEC 61966-2-1, die sRGB-Spezifikation von 1996, die an die CRT-Leuchtstoffprimärfarben gebunden ist, die damals die Bildschirme dominierten. CSS gibt RGB über die `rgb()`-Funktion in drei syntaktischen Varianten frei. Die ursprüngliche CSS-1-Form verwendet Komma-Trennzeichen: `rgb(255, 87, 51)`. CSS Color 4 (W3C Candidate Recommendation seit 2022) ergänzte eine moderne leerzeichengetrennte Form: `rgb(255 87 51)`, mit optionalem Alpha-Kanal nach einem Slash: `rgb(255 87 51 / 0.5)`. Beide Formen sind austauschbar und werden in jedem Evergreen-Browser ausgeliefert. RGB akzeptiert außerdem Prozent-Kanäle: `rgb(100% 33% 20%)` ist gleichwertig zu `rgb(255 87 51)` und in handgeschriebenen Stylesheets manchmal lesbarer. Speziell für Alpha gibt es für Legacy-Zwecke eine separate `rgba()`-Funktion — `rgba(255, 87, 51, 0.5)` ist die kanonische Form, die überall bis hinunter zu IE 9 funktioniert. CSS Color 4 fügte außerdem eine `color(srgb 1 0.341 0.2)`-Syntax für explizite sRGB-Adressierung hinzu sowie parallele `color(display-p3 ...)`- und `color(rec2020 ...)`-Funktionen für Wide-Gamut-Werte, die HEX nicht kodieren kann.
Die Konvertierungsmathematik funktioniert in beide Richtungen sauber. **HEX zu RGB**: Den 6-stelligen HEX `#RRGGBB` als drei 2-stellige Hexadezimalzahlen über `parseInt(hex.slice(1, 3), 16)`, `parseInt(hex.slice(3, 5), 16)`, `parseInt(hex.slice(5, 7), 16)` parsen. Bei der 3-stelligen Kurzform `#RGB` wird jede Ziffer durch Verdoppelung erweitert (`#F73` → `#FF7733`), bevor geparst wird — das ist *kein* Links-Auffüllen. Bei 8-stelligem Alpha `#RRGGBBAA` wird das hintere Paar genauso geparst und durch 255 dividiert, um den Alpha-Float 0–1 zu erhalten. Bei der 4-stelligen Alpha-Kurzform `#RGBA` wird jede Ziffer zuerst erweitert (`#F738` → `#FF773388`). **RGB zu HEX** ist die Umkehrung: Für jeden Kanal `value.toString(16).padStart(2, '0')` aufrufen, um das 2-stellige HEX-Paar zu erhalten (das `padStart` ist entscheidend — ohne würde der Kanalwert 5 als `'5'` statt `'05'` serialisiert und einen ungültigen HEX erzeugen), dann verketten. Beide Richtungen sind bitgenau: 16² = 256, was exakt dem Byte-Bereich 0–255 jedes Kanals entspricht, sodass ein Rundlauf HEX → RGB → HEX die ursprüngliche Eingabe ohne Float-Drift wortwörtlich wiederherstellt.
**Warum HEX statt RGB?** HEX ist kürzer, designwerkzeug-nativ und das Format, an das sich das Auge mit der Zeit gewöhnt — die meisten Frontend-Entwickler erkennen `#3b82f6` auf den ersten Blick als Tailwind blue-500. RGB ist explizit kanaladressiert, in JavaScript leichter zu berechnen und das einzige der beiden, das Alpha und Prozente sauber akzeptiert. Beide Formate existieren nebeneinander, weil sie unterschiedliche Probleme lösen. Web-Stylesheets und Marken-Richtlinien tendieren zu HEX, weil die Copy-Paste-Kosten dominieren. Canvas-Zeichenaufrufe, Bildverarbeitung, Hardware-LED-APIs und jeder Code, der pro Kanal rechnet, tendieren zu RGB, weil das Indizieren in ein Tupel schneller ist als das Slicen einer Zeichenkette. Der Wechsel zwischen beiden geschieht in einem typischen Webprojekt dutzendfach — HEX aus Figma einfügen, in RGB-Ganzzahlen für einen `ctx.fillStyle = ...`-Aufruf umwandeln, zurück in HEX für eine CSS-Variablendefinition.
Der HEX-→-RGB-Workflow dieses Tools ist eine Richtung einer 5-Spoke-Familie, die alle denselben zugrundeliegenden vereinheitlichten Farbkonverter nutzen. Der dedizierte vereinheitlichte Farbkonverter ist der Hub — er zeigt alle 9 Formate gleichzeitig bearbeitbar und ist das richtige Werkzeug, wenn Ihr Workflow mehr als nur HEX und RGB braucht. Die einseitigen Spokes zielen auf konkrete Google-Suchintents: der umgekehrte RGB-zu-HEX-Konverter für die Gegenrichtung, der HEX-zu-HSL-Konverter für den klassischen Designer-Kognitionsraum, der HEX-zu-OKLCH-Konverter für moderne perzeptuell uniforme Designsysteme (Tailwind v4 und shadcn setzen inzwischen beide standardmäßig auf OKLCH) sowie der HEX-zu-CMYK-Konverter für Druckvorstufen-Näherungen. Alle fünf Spokes und der Hub teilen sich denselben Parser und dieselbe Konvertierungsmathematik, sodass die Ergebnisse in der gesamten Familie garantiert identisch sind. Jede Konvertierung läuft lokal in Ihrem Browser — Ihre HEX-Codes werden niemals hochgeladen, niemals geloggt, und während der Eingabe werden null Netzwerkanfragen abgesetzt. In den DevTools überprüfbar.
// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
let h = input.trim().replace(/^#/, '');
// Expand 3-digit and 4-digit shorthand by duplicating each digit
if (h.length === 3 || h.length === 4) {
h = h.split('').map(c => c + c).join('');
}
if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
throw new Error(`Invalid hex: ${input}`);
}
const r = parseInt(h.slice(0, 2), 16);
const g = parseInt(h.slice(2, 4), 16);
const b = parseInt(h.slice(4, 6), 16);
const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
return [r, g, b, a];
}
console.log(parseHex('#FF5733')); // [255, 87, 51, 1]
console.log(parseHex('#F73')); // [255, 119, 51, 1]
console.log(parseHex('#FF573380')); // [255, 87, 51, 0.5019607843137255] 3-stellig `#F73`, 4-stellig mit Alpha `#F738`, 6-stellig `#FF5733`, 8-stellig mit Alpha `#FF5733CC`, plus jeweils die Variante ohne `#` (`F73`, `FF5733` usw.). Der Parser normalisiert sie alle vor der Anzeige in dasselbe interne RGB-Tupel, sodass Sie die Form einfügen können, die Ihre Quelle nutzt, ohne die Kurzform vorher manuell zu erweitern. Auch die Groß-/Kleinschreibung wird normalisiert — `#ff5733` und `#FF5733` liefern identische Ausgaben.
Das RGB-Feld blendet den Wert in der modernen Form von CSS Color 4 ein: `rgb(255 87 51)` für deckende Farben, `rgb(255 87 51 / 0.5)` für solche mit Alpha. Beide Formen funktionieren in jedem Evergreen-Browser (Chrome 65+, Safari 13+, Firefox 52+). Die alte Komma-Form `rgb(255, 87, 51)` ist nur eine mechanische Ersetzung entfernt, falls Ihr Ziel sie braucht; in neuem Code wird die moderne Syntax bevorzugt, weil sie zu den anderen funktionalen Syntaxen von CSS Color 4 passt.
HEX → RGB ist Integer-zu-Integer-Mathematik: `parseInt(hex, 16)` liefert einen exakten 0–255-Wert ohne Beteiligung von Floats. Die umgekehrte Richtung (`.toString(16).padStart(2, '0')`) ist genauso exakt. Ein Rundlauf HEX → RGB → HEX → RGB → HEX gibt die ursprüngliche Eingabe unbegrenzt wortwörtlich zurück. Die OKLCH-interne Source-of-Truth sorgt dafür, dass sogar die längere Kette HEX → RGB → HSL → OKLAB → HEX bit-stabil bleibt — was Legacy-Konverter, die über HSL routen, nicht garantieren.
8-stelliger und 4-stelliger HEX mit Alpha (`#RRGGBBAA` und `#RGBA`) werden korrekt geparst. Das hintere Paar bildet auf einen 0–1-Alpha-Float ab: `00` → 0, `80` → 0.502, `FF` → 1. Die Ausgabe nutzt standardmäßig die Slash-Syntax von CSS Color 4 (`rgb(255 87 51 / 0.5)`); die alte Form `rgba(255, 87, 51, 0.5)` ist nur eine Ersetzung entfernt. Nützlich für die Migration von Design-Tokens, bei denen Alpha-Werte in 8-stelligen HEX-Codes vergraben waren.
Derselbe HEX, den Sie einfügen, treibt auch HSL, HSV, HWB, OKLCH, OKLAB, CMYK und den nächstgelegenen benannten CSS-Farbnamen — alles auf einen Blick auf derselben Seite. Sie sind nie nur auf HEX → RGB festgelegt. Wenn ein Kollege das OKLCH-Tripel für einen Tailwind-v4-Token braucht, den nächstgelegenen benannten Farbnamen für die Dokumentation oder die CMYK-Näherung für ein Druckangebot, sind die Werte bereits mit eigenen Kopieren-Knöpfen vorhanden.
Lassen Sie einen HEX durchlaufen und die Kontrast-Zeile bewertet ihn sofort gegen Weiß und gegen Schwarz mithilfe von WCAG 2.1 (regulatorische Untergrenze: 4,5:1 für Fließtext, 7:1 für AAA) und APCA Lc (vorgeschlagener WCAG-3-Nachfolger: Ziel `|Lc| ≥ 75` für Fließtext). Nützlich, wenn Sie gerade einen Marken-HEX in RGB konvertiert haben und vor der Auslieferung prüfen wollen, ob er als Fließtextfarbe wirklich lesbar ist.
Unter dem Picker verwandelt der Abschnitt Als Code kopieren die aktuelle Farbe in einfügefertige Snippets für fünf Plattformen: CSS Custom Property (`--color-brand: rgb(255 87 51)`), Tailwind-v4-`@theme`-Token, SwiftUI-`Color(red:green:blue:)`-Literal, Jetpack-Compose-Konstante `Color(0xFFFF5733)`, Flutter `Color(0xFFFF5733)`. Die exakte Syntax, die jede Plattform erwartet — bereit, in einen iOS-Asset-Katalog, eine Android-Theme-Datei oder ein Flutter-`ThemeData` zu fallen.
Das gesamte HEX-Parsing, die RGB-Konvertierung, die Kontrastbewertung und die Paletten-Erzeugung laufen lokal in Ihrem Browser. Ihre HEX-Codes werden niemals übertragen, niemals auf einem Server geloggt, niemals analysiert. Null Netzwerkanfragen während der Eingabe — in den DevTools überprüfbar. Sicher für unangekündigte Markenpaletten, interne Design-Tokens, NDA-geschützte Mockup-Entwürfe und jede andere vertrauliche Farbarbeit.
Die aktuelle Farbe wird bei jeder Änderung automatisch als `#hex=ff5733` in den URL-Hash kodiert. Kopieren Sie die URL, fügen Sie sie in einen Slack-Thread oder ein GitHub-Issue ein, und wer sie öffnet, landet beim selben HEX mit demselben RGB-Ergebnis. Der Hash lebt nur in Ihrer Adressleiste und wird niemals an den Server übertragen (Browser nehmen URL-Fragmente nicht in HTTP-Anfragen auf), sodass selbst das Teilen des Links die Farbe an keinen Dritten leakt.
Das Standard-Google-Ergebnis für „hex to rgb“ — ein Einbahn-Formular mit HEX rein, RGB raus, keine anderen Formate sichtbar. Brauchbar für einmalige Nachschlagewerke, wenn man aus der Suche kommt. Es fehlen OKLCH, Kontrastprüfung, Farbraum-Erkennung, Alpha-Behandlung und die simultane Multi-Format-Ansicht. Dieses Tool gewinnt auf jeder Achse außer dem rein minimalistischen Einzelkonvertierungsfall.
Lange laufende SEO-Seiten pro Farbe mit umfangreichen Metadaten: Konvertierungen, Paletten, Harmonien, Verläufe für jeden abgefragten HEX. Die UI ist veraltet (frühe 2010er), keine OKLCH-Unterstützung, kein APCA-Kontrast, keine Wide-Gamut-Behandlung. Stark für die SEO-Auffindbarkeit eines bestimmten HEX über Google; schwächer für aktive Konvertierungs-Workflows, bei denen das Tippen in einer vereinheitlichten Feld-UX schneller ist.
Anfängerfreundlicher HEX/RGB/HSL-Umschalter auf einer lehrorientierten Seite, allgegenwärtig in Suchergebnissen. Kein OKLCH, keine Alpha-Behandlung jenseits von rgba, keine fortgeschrittenen Funktionen. Brauchbar als Referenz neben den Erklärinhalten von W3Schools. Dieses Tool gewinnt auf jeder anderen Achse: mehr Formate, perzeptuelle Mathematik, Farbraum- + Kontrast- + CVD-Funktionen, moderner Code-Export für Tailwind v4 / SwiftUI / Compose / Flutter.
Chrome, Firefox und Safari liefern in den DevTools alle einen Farbwähler, der HEX inline in RGB konvertiert, wenn Sie im CSS-Bereich auf ein Farbfeld klicken. Kostenlos, keine Installation, immer verfügbar. Es fehlen OKLCH, teilbare URLs und Code-Export für Nicht-Web-Plattformen (SwiftUI, Compose). Greifen Sie zu den DevTools, wenn Sie ohnehin CSS debuggen; greifen Sie zu diesem Tool, wenn Sie plattformübergreifende Ausgabe brauchen.
In jedem Mac seit OS X enthalten — über jeden Pixel fahren und RGB-/HEX-/lineare Werte ablesen. Hervorragend zum Abtasten von Pixelfarben aus beliebigen Apps auf dem Bildschirm. Es konvertiert keine eingefügten HEX-Werte; es ist ein Bildschirm-Sampler, kein Konverter. Nutzen Sie für dieselbe Bildschirm-Sampling-Fähigkeit innerhalb des Browsers den EyeDropper-Knopf im Picker dieses Tools (nur Chromium-Browser).
SEO-Seiten pro Farbe, die viele Räume abdecken (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Es fehlen moderne OKLCH-Unterstützung und die vereinheitlichte Feld-Bearbeitungs-UX. Auto-generierte Inhaltsseiten wirken Content-Farm-artig, die Konvertierungsdaten sind aber korrekt. Gut zum Stöbern einzelner Farb-Metadaten über Google; dieses Tool ist für aktive Workflows schneller.
#FF5733
RGB-Ausgabe: `rgb(255 87 51)`. Der klassische Anwendungsfall — ein Designer hat eine Markenfarbe in Figma abgelegt, Sie haben einen Screenshot gemacht, eine Pipette hat den HEX geliefert, und nun brauchen Sie die Kanal-Ganzzahlen für einen Canvas-Zeichenaufruf, einen Hardware-LED-Streifen oder Pixel-Arithmetik gegen einen Bildpuffer. Die in CSS Color 4 leerzeichengetrennte Syntax ist die moderne Form; die alte Komma-Schreibweise `rgb(255, 87, 51)` ist bedeutungsgleich und wird in jedem Browser seit IE 3 unterstützt.
#3b82f6
RGB-Ausgabe: `rgb(59 130 246)`. Der Adobe-Farbwähler (in Photoshop, Illustrator und InDesign) akzeptiert RGB-Ganzzahlen im Bereich 0–255 als native Eingabe — tragen Sie 59 / 130 / 246 in die drei Kanalfelder ein und Sie haben Tailwinds `blue-500` exakt getroffen. Nützlich, wenn ein Designer eine Webfarbe in einem druckorientierten Layoutprogramm vormocken muss, oder wenn Sie Markenfarben in eine Farbfeld-Bibliothek für Bildbearbeitungen abtasten.
#FF573380
RGB-Ausgabe: `rgb(255 87 51 / 0.5)`. Das letzte Paar (`80`) wird als `128/255 ≈ 0.502` dekodiert und über die Slash-Syntax aus CSS Color 4 als Alpha-Kanal eingeblendet. Die äquivalente Altform ist `rgba(255, 87, 51, 0.5)`, die überall weiter unterstützt wird und die ältere Präprozessoren erwarten. 8-stelliger HEX wurde 2018 nativ in alle Evergreen-Browser ausgeliefert; davor musste Alpha über die `rgba()`-Funktion ausgedrückt werden.
#F73
RGB-Ausgabe: `rgb(255 119 51)`. Die CSS-Spezifikation definiert 3-stelligen HEX als Kurzform, bei der jede Ziffer verdoppelt wird, um das 6-stellige Äquivalent zu bilden: `#F73` expandiert zu `#FF7733`, also R = `FF` = 255, G = `77` = 119, B = `33` = 51. Das ist *kein* Links-Auffüllen — `#F73` ist **nicht** `#000F73`. Viele Anfänger missverstehen das; das Expansionsverhalten des Tools macht die Regel auf einen Blick sichtbar.
Referenztabelle der 10 am häufigsten konvertierten HEX-Codes und ihrer RGB-Entsprechungen — reine Primärfarben, reine Sekundärfarben und zwei reale Markenfarben aus der Tailwind-Palette.
Reines Schwarz. Alle drei Kanäle bei null — die Abwesenheit von ausgesendetem Licht. RGB-Tripel (0, 0, 0).
#000000 → rgb(0 0 0) Reines Schwarz auf einem Bildschirm ist selten die richtige Designentscheidung — versuchen Sie `#111` oder OKLCH-Helligkeit 0,1–0,15 für weicheren Fließtext.
Brauchen Sie stattdessen OKLCH? Probieren Sie den dedizierten HEX-zu-OKLCH-Konverter für perzeptuell uniforme Ausgabe.
Reines Weiß. Alle drei Kanäle auf ihrem Maximalwert (255). Die hellste Farbe in sRGB.
#FFFFFF → rgb(255 255 255) Reinweiße Hintergründe können in dunklen Umgebungen Augenbelastung erzeugen — erwägen Sie `#fafafa` oder OKLCH 0,98 als wärmere Alternative.
Brauchen Sie stattdessen OKLCH? Probieren Sie den dedizierten HEX-zu-OKLCH-Konverter für perzeptuell uniforme Ausgabe.
Reines Rot. R-Kanal auf Maximum, G und B bei null. Die erste der drei sRGB-Primärfarben.
#FF0000 → rgb(255 0 0) Reines Rot ist stark gesättigt und passt selten in eine Markenpalette — die meisten „roten“ Markenfarben liegen näher bei #DC2626 oder #E53935.
Brauchen Sie stattdessen OKLCH? Probieren Sie den dedizierten HEX-zu-OKLCH-Konverter für perzeptuell uniforme Ausgabe.
Reines Grün. G-Kanal auf Maximum, R und B bei null. Der benannte CSS-Farbname `lime` (nicht `green`, was #008000 ist).
#00FF00 → rgb(0 255 0) Das CSS-Schlüsselwort `green` löst zu #008000 auf (halbhell), nicht zu #00FF00 — eine häufige Verwechslungsquelle. Nutzen Sie `lime` für reines RGB-Grün.
Brauchen Sie stattdessen OKLCH? Probieren Sie den dedizierten HEX-zu-OKLCH-Konverter für perzeptuell uniforme Ausgabe.
Reines Blau. B-Kanal auf Maximum, R und G bei null. Die dritte sRGB-Primärfarbe.
#0000FF → rgb(0 0 255) Reines Blau auf weißem Hintergrund scheitert am WCAG-AA-Kontrast (3,7:1) — erwägen Sie dunklere Marken-Blautöne wie #1D4ED8 (Tailwind blue-700) für Fließtext.
Brauchen Sie stattdessen OKLCH? Probieren Sie den dedizierten HEX-zu-OKLCH-Konverter für perzeptuell uniforme Ausgabe.
Cyan — Grün und Blau auf Maximum, Rot bei null. Eine der drei sRGB-Sekundärfarben. Benannter CSS-Farbname `cyan` (oder gleichwertig `aqua`).
#00FFFF → rgb(0 255 255) Cyan und aqua sind in CSS exakte Synonyme — beide lösen zu #00FFFF auf. Wählen Sie eines und bleiben Sie über das ganze Stylesheet konsistent.
Brauchen Sie stattdessen OKLCH? Probieren Sie den dedizierten HEX-zu-OKLCH-Konverter für perzeptuell uniforme Ausgabe.
Magenta — Rot und Blau auf Maximum, Grün bei null. Benannter CSS-Farbname `magenta` (oder gleichwertig `fuchsia`).
#FF00FF → rgb(255 0 255) Magenta und fuchsia sind in CSS exakte Synonyme — beide lösen zu #FF00FF auf. Häufig in Testmustern und Entwicklerwerkzeug-Overlays.
Brauchen Sie stattdessen OKLCH? Probieren Sie den dedizierten HEX-zu-OKLCH-Konverter für perzeptuell uniforme Ausgabe.
Gelb — Rot und Grün auf Maximum, Blau bei null. Nach wahrgenommener Leuchtdichte die hellste der drei sRGB-Sekundärfarben.
#FFFF00 → rgb(255 255 0) Gelb ist die nicht-weiße Farbe mit der höchsten Leuchtdichte auf einem Bildschirm — gelber Text auf weißem Hintergrund ist fast unsichtbar, auch wenn der HEX auf dem Papier in Ordnung aussieht.
Brauchen Sie stattdessen OKLCH? Probieren Sie den dedizierten HEX-zu-OKLCH-Konverter für perzeptuell uniforme Ausgabe.
Die Standard-Marken-Blautöne blue-500 von Tailwind CSS — das kanonische „Web-Blau“ der mittleren 2020er. Auf unzähligen Dashboards, Marketingseiten und Admin-Werkzeugen im Einsatz.
#3b82f6 → rgb(59 130 246) Tailwind v4 definiert blue-500 in OKLCH neu (`oklch(0.629 0.193 263.4)`) für perzeptuell uniforme Rampen — der HEX bleibt als Fallback gleich.
Brauchen Sie stattdessen OKLCH? Probieren Sie den dedizierten HEX-zu-OKLCH-Konverter für perzeptuell uniforme Ausgabe.
Tailwind CSS' Standard-rose-500 — ein stark gesättigtes Pink-Rot, das häufig für Akzent-Buttons, Alarm-Zustände und Markenkontrast verwendet wird.
#f43f5e → rgb(244 63 94) Rose-500 besteht WCAG AA (4,6:1) gegen Weiß bei großem Text, scheitert aber bei Fließtext — kombinieren Sie es mit rose-600 (#e11d48) oder dunkler für Fließtext auf Weiß.
Brauchen Sie stattdessen OKLCH? Probieren Sie den dedizierten HEX-zu-OKLCH-Konverter für perzeptuell uniforme Ausgabe.
Legen Sie einen beliebigen HEX-Wert in die HEX-Eingabe — mit oder ohne führendes `#`, als 3-stellige Kurzform (`#F73`), 6-stellige Vollform (`#FF5733`), 4-stellige Alpha-Kurzform (`#F738`) oder 8-stellige Alpha-Vollform (`#FF5733CC`). Das Tool normalisiert alle fünf Eingabeformen intern zur gleichen kanonischen Farbe. Groß-/Kleinschreibung ist egal (`#ff5733` und `#FF5733` werden identisch geparst). Ungültige Zeichen oder eine falsche Stellenzahl erzeugen einen dezenten Inline-Fehler; gültiger HEX aktualisiert jedes andere Formatfeld in Echtzeit.
Das RGB-Feld unter dem HEX-Feld zeigt den passenden `rgb()`-Wert in der modernen leerzeichengetrennten Syntax von CSS Color 4: `rgb(255 87 51)` für eine deckende Farbe, `rgb(255 87 51 / 0.5)` für eine mit Alpha. Jeder Kanal ist eine Ganzzahl 0–255; Alpha wird auf 0–1 normalisiert. Die Werte sind bitgenau — `parseInt('FF', 16)` liefert 255, ohne Float-Arithmetik, sodass ein Rückweg zu HEX die ursprüngliche Eingabe wortwörtlich wiederherstellt.
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 folgt der kanonischen CSS-Color-4-Syntax (`rgb(255 87 51)`); falls Ihr Ziel die alte Komma-Form benötigt, ist die Konvertierung mechanisch (Leerzeichen durch `, ` ersetzen). Für plattformspezifische Ausgaben (SwiftUI, Compose, Flutter, Tailwind v4) nutzen Sie den Abschnitt Als Code kopieren unter dem Picker.
Derselbe HEX, 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 HEX → RGB 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.
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 HEX und RGB, 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 einen HEX aus der UI einer anderen Anwendung übernehmen wollen, ohne vorher einen Screenshot zu machen.
Die 3-stellige Kurzform `#RGB` expandiert durch *Verdoppelung jeder Ziffer*, nicht durch Links-Auffüllen mit Nullen. `#F73` wird zu `#FF7733` (kräftiges Orange), nicht zu `#000F73` (dunkles Blau). Das ist die mit Abstand meistmissverstandene Ecke der CSS-Farbsyntax; Anfänger nehmen häufig an, die Kurzform sei eine Art Zero-Pad und enden mit völlig falschen Farben. Dieselbe Regel gilt für die 4-stellige Alpha-Kurzform `#RGBA` — jede Ziffer verdoppelt sich zur 8-stelligen Entsprechung.
Annahme: #F73 wird links zu #000F73 aufgefüllt: erwartet: dunkles Blau rgb(0, 15, 115) tatsächlich: kräftiges Orange rgb(255, 119, 51)
3-stellige Kurzform verdoppelt jede Ziffer: #F73 → #FF7733 → rgb(255, 119, 51) Verifiziert durch die Live-Expansion des Tools während der Eingabe.
Das Zurückkonvertieren von RGB zu HEX verlangt, dass jedes `toString(16)` des Kanals links auf 2 Stellen aufgefüllt wird. Ohne `padStart(2, '0')` erzeugen einstellige Kanalwerte ungültigen HEX: `rgb(5, 87, 51)` würde als `#55733` (5 Zeichen) statt `#055733` (6 Zeichen) serialisiert. Viele Ad-hoc-Konverter überspringen das Padding und produzieren kaputte Ausgaben für jeden Kanalwert unter 16. Die Standardredewendung ist `value.toString(16).padStart(2, '0')` für jeden Kanal R, G, B.
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. CSS-8-stelliger HEX ist `#RRGGBBAA` — Alpha ist das *hintere* Paar. Manche Farbbibliotheken (insbesondere das ältere `Color.parseColor()` unter Android) nutzen die umgekehrte Reihenfolge `#AARRGGBB` mit Alpha als *führendem* Paar, was mit CSS-HEX inkompatibel ist. Ein Web-HEX `#FF573380` (Orange bei 50 % Alpha), als `#AARRGGBB` interpretiert, wird zu Alpha=255, R=87, G=51, B=128 — ein dunkles Cyan bei voller Deckkraft. Verifizieren Sie immer die Alpha-Reihenfolge der Zielplattform, bevor Sie 8-stelligen HEX hin- und herschicken.
CSS-8-stelligen HEX in das ältere Android Color.parseColor() einfügen: #FF573380 als #AARRGGBB interpretiert → völlig falsche Farbe und falsches Alpha.
Das dokumentierte Format der Zielplattform verwenden: für Android Compose: Color(0xFFFF5733) mit Alpha als erstem Byte für CSS: #FF573380 mit Alpha als letztem Byte Nicht ohne Umsortierung zwischen beiden hin- und herkopieren.
RGB-Kanäle sind gammacodiert, nicht linear. Das Mitteln zweier RGB-Werte liefert einen perzeptuell falschen Mittelpunkt. `(255, 0, 0)` gemittelt mit `(0, 255, 0)` ergibt `(127, 127, 0)`, ein matschiges Dunkeloliv, nicht den hellen Gelb-Mittelpunkt, den man von der Mischung von rotem und grünem Licht erwartet. Für korrektes Blending zuerst über die sRGB-Transferfunktion nach linearem RGB dekodieren (CSS Color 4 §11.2), im linearen Raum mitteln, dann zurückkodieren. Oder in OKLAB / OKLCH arbeiten, wo perzeptuelle Distanz uniform ist.
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.
Konvertierungswerkzeuge
Zahlen zwischen Binär, Hexadezimal, Dezimal, Oktal und beliebigen Basen (2–36) sofort konvertieren. Kostenlos, privat, ohne Anmeldung — alles läuft in Ihrem Browser.
Konvertierungswerkzeuge
Konvertieren Sie HEX zu RGB, HSL, OKLCH, OKLAB und CMYK direkt im Browser — jedes Format mit einem Klick kopieren. Kostenlos, ohne Anmeldung, Ihre Farben verlassen die Seite nie.
Konvertierungswerkzeuge
Konvertieren Sie HEX-Farben direkt im Browser in CMYK. Naive sRGB-basierte Näherung für Druckvorschauen. Kostenlos, ohne Anmeldung, Ihre Farben bleiben lokal.
Konvertierungswerkzeuge
Konvertieren Sie jede HEX-Farbe direkt im Browser in HSL — 3-stellig, 6-stellig und 8-stellig mit Alpha werden unterstützt. Kostenlos, sofort, ohne Anmeldung, Ihre Farben verlassen die Seite nie.
Konvertierungswerkzeuge
Konvertieren Sie HEX in OKLCH für Tailwind-v4-Design-Tokens. Perzeptuell uniforme Live-Ausgabe mit Display-P3-Farbraum-Warnungen. Kostenlos, ausschließlich im Browser.
Konvertierungswerkzeuge
Bildgröße um bis zu 80 % reduzieren — JPEG, PNG & WebP im Browser komprimieren, kein Upload nötig. Stapelverarbeitung für 20 Bilder, Qualität anpassen, Vorher-Nachher vergleichen. Kostenlos & privat.