HEX-zu-RGB-Konverter

Wie die HEX-zu-RGB-Konvertierung funktioniert

HEX-Farben verwenden einen sechsstelligen hexadezimalen String (#RRGGBB), bei dem jedes Paar die Rot-, Grün- und Blau-Kanäle darstellt. Die Werte reichen von 00 (0) bis FF (255).

RGB verwendet drei Dezimalzahlen (0–255) für jeden Kanal. Beispielsweise zerfällt #2b7190 in R:43, G:111, B:142.

Häufig gestellte Fragen

Wie konvertiere ich HEX manuell in RGB?

Teilen Sie das 6-stellige Hex in 3 Paare auf (z. B. #FF8800 → FF, 88, 00) und konvertieren Sie dann jedes Paar von Basis 16 nach Basis 10: FF=255, 88=136, 00=0. Das Ergebnis ist rgb(255, 136, 0).

Was ist mit 3-stelligen HEX-Codes?

Drei-stelliges Hex ist eine Kurzform, bei der jede Stelle verdoppelt wird: #F80 = #FF8800. Dieser Konverter behandelt beide Formate automatisch.

Wann sollte ich HEX vs. RGB verwenden?

HEX ist kompakter und in CSS beliebter. RGB ist besser, wenn Sie einzelne Kanäle programmatisch manipulieren oder rgba() für Transparenz verwenden müssen.

Was die Hex-Notation eigentlich ist

Eine Hex-Farbe ist eine Darstellung einer 24-Bit-RGB-Farbe zur Basis 16. Sechs Ziffern nach dem #, drei Paare: Rot, Grün, Blau. Jedes Paar ist eine Zahl von 00 bis ff: ein Byte (8 Bit) pro Kanal, drei Kanäle, 24 Bit insgesamt. Das reicht genau aus, um eine beliebige von 2²⁴ = 16.777.216 diskreten Farben zu kodieren. Der Bereich „True Color“ / „Millionen Farben“, der seit den späten 1990er-Jahren der Standard für Verbraucherdisplays ist.

Das Rautezeichen ist nicht Teil des Werts, es ist ein syntaktisches Präfix, das dem CSS-Parser sagt: „was folgt, ist eine Hex-Farbe, kein Variablenname“. Ohne es könnte eine Zeichenkette wie ff0000 für den Lexer mehrdeutig sein. Die Ziffern 0 bis 9 behalten ihre dezimale Bedeutung; die Buchstaben A bis F (in CSS Groß-/Kleinschreibung-unabhängig) stehen für dezimal 10 bis 15. Also ist f gleich 15, ff ist 15 × 16 + 15 = 255.

Die Mathematik, mit durchgerechneten Beispielen

Jedes zweistellige Hex-Paar wird per Formel (high_digit × 16) + low_digit auf eine Dezimalzahl von 0 bis 255 abgebildet, wobei jede Ziffer als 0 bis 15 interpretiert wird (A=10 bis F=15):

• FF → (15 × 16) + 15 = 255
• 88 → (8 × 16) + 8 = 136
• 00 → 0
• 2B → (2 × 16) + 11 = 43 (der Rotkanal des Standard-Farbfelds #2b7190 oben)
• 71 → (7 × 16) + 1 = 113
• 90 → (9 × 16) + 0 = 144

In JavaScript passt das gesamte Parsen in zwei Zeilen. const n = parseInt(hex.slice(1), 16); gefolgt von const [r, g, b] = [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];: das ist im Wesentlichen der inhaltliche Code jedes Hex-zu-RGB-Umrechners im Web. Die umgekehrte Richtung ist '#' + ((r << 16) | (g << 8) | b).toString(16).padStart(6, '0').

Kurzschreibweisen mit 3, 4 und 8 Ziffern

CSS erlaubt abgekürzte Formen, wenn die Kanäle symmetrisch sind:

• 3 Ziffern (#RGB), jede Ziffer wird verdoppelt, um den entsprechenden 6-stelligen Code zu bilden. #F00 → #FF0000; #FFF → #FFFFFF; #369 → #336699. Die Form ist praktisch für „runde“, designerfreundliche Farben, kann aber nur 4.096 eindeutige Werte ausdrücken, nicht 16,7 Millionen; für #778899 gibt es keine Kurzform, weil sich die Paare unterscheiden.
• 8 Ziffern (#RRGGBBAA), wie 6-stellig plus ein Alpha-Paar. 00 = vollständig transparent, FF = vollständig deckend, 80 ≈ 50 % Deckkraft. Funktional identisch zu rgba(255, 0, 0, 0.5), aber kompakter.
• 4 Ziffern (#RGBA), Verdopplungs-Kurzform der 8-stelligen Form. #F00A → #FF0000AA.

Die 3-stellige Kurzform gab es bereits in CSS Level 1 (1996). Die 4- und 8-stelligen Alpha-Formen kamen viel später in CSS Color Module Level 4, mit breiter browserübergreifender Verfügbarkeit seit etwa Mitte 2015.

Benannte Farben und die Geschichte von rebeccapurple

Bevor Hex zum Standard-Idiom des Webs wurde, waren benannte Farben die Norm. HTML 4.01 (Dezember 1999) spezifizierte 16 benannte Farben, black, silver, gray, white, maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal, aqua: basierend auf den 16 Standardfarben der Windows-VGA-Palette. CSS 2.1 ergänzte orange als 17. CSS Color Module Level 3 übernahm dann formell rund 130 zusätzliche Namen aus der X11-Datei rgb.txt (die Mosaic und das frühe Netscape von ihren Wurzeln im X Window System erbten) und brachte die Gesamtzahl auf etwa 147 bis 148, je nachdem, wie man Aliasnamen wie cyan/aqua und gray/grey zählt.

CSS Color Module Level 4 fügte eine weitere hinzu, mit einer Geschichte dahinter. Rebecca Meyer war die sechsjährige Tochter von Eric A. Meyer, einer frühen CSS-Autorität und W3C-Teilnehmer. Sie starb am 7. Juni 2014, an ihrem sechsten Geburtstag, an Hirnkrebs. Eric schrieb in derselben Woche in seinem Blog: „Sie hat es bis sechs geschafft. Fast zwölf Stunden lang war sie sechs.“ Ein Community-Mitglied schlug vor, ihre Lieblingsfarbe hinzuzufügen, ein tiefes Auberginenviolett, Hex #663399: als beccapurple; Eric stimmte mit einer Auflage zu: Es müsse rebeccapurple heißen, nicht beccapurple, weil Rebecca selbst kürzlich verkündet hatte, sie sei nun zu groß für den Kosenamen. Die CSS Working Group genehmigte die Änderung am 22. Juni 2014, zwei Wochen nach ihrem Tod. WebKit und andere Browser-Engines lieferten innerhalb von Tagen Unterstützung. Es ist die einzige CSS-Farbe, die nach einer Person benannt ist, ein stilles Andenken in jedem modernen Browser.

sRGB: der implizite Farbraum jedes Hex-Codes

Wenn Sie #FF5733 in CSS schreiben, geben Sie nicht nur eine Zahl an, Sie geben sie im sRGB-Farbraum an. Das ist implizit; der Browser interpretiert Ihren Hex-Wert als sRGB, sofern Sie nicht eine der neueren color()-Funktionen verwenden, um etwas anderes anzugeben.

sRGB wurde 1996 gemeinsam von Hewlett-Packard und Microsoft vorgeschlagen und als IEC 61966-2-1:1999 übernommen, ein einziger, geräteunabhängiger Farbraum, der um die Kennlinie des typischen CRT-Monitors jener Zeit herum entworfen wurde. Er teilt seine Primärfarbörter mit ITU-R BT.709 (dem HDTV-Standard) am Weißpunkt D65 (6500 K). Das W3C definierte sRGB ausdrücklich als den Standard-Farbraum für das Web; alle Hex-Codes, alle rgb()-Werte, alle klassischen JPEG- und nicht getaggten PNG-Bilder werden als sRGB interpretiert.

Ehrliche Einschränkung: sRGB deckt rund 35,9 % des sichtbaren Farbdiagramms nach CIE 1931 ab. Es gibt Farben, die in der Natur existieren, von modernen OLED-Handybildschirmen dargestellt werden können, sich aber nicht in Hex-Notation angeben lassen, gesättigte Smaragdgrüntöne, leuchtende rot-orange Sonnenuntergangstöne, fluoreszierende Farben. CSS Color Module Level 4 führte neue Räume für sie ein, zugänglich über die color()-Funktion: Display P3 (von Apple-Displays seit dem iPhone 7 und dem iMac von Ende 2015 verwendet, etwa 25 % breiter als sRGB) und Rec. 2020 (der Broadcast-Standard für 4K/8K, etwa 75 % von CIE 1931). Auf älteren reinen sRGB-Geräten greift der Browser elegant auf einen Ersatz zurück.

Moderne Alternativen: HSL, HWB, OKLCH

Hex ist kompakt, aber nicht menschenfreundlich; Sie können #3DE7C9 nicht ansehen und den Farbton erraten. CSS hat nach und nach funktionale Notationen ergänzt, die dem entsprechen, wie Menschen über Farbe denken:

• HSL: Farbton (hue), Sättigung (saturation), Helligkeit (lightness). Der Farbton ist ein Winkel von 0 bis 360°. Eingeführt in CSS Color Module Level 3 (2011). Intuitive Schieberegler, aber die Helligkeit ist nicht wahrnehmungsgleichmäßig; Gelb bei L = 50 % sieht viel heller aus als Blau bei gleicher Helligkeit.
• HWB: Farbton (hue), Weißanteil (whiteness), Schwarzanteil (blackness). Einfacher für das mentale Modell eines Malers („ein Blau mit etwas Weiß und einem Hauch Schwarz“). Gleicher Farbumfang wie HSL.
• LCH / Lab: wahrnehmungsgleichmäßig; gleiche numerische Änderungen entsprechen gleichen wahrgenommenen Änderungen. Unterstützt den weiten P3+-Farbumfang.
• OKLCH: der neueste Zugang, im Dezember 2020 von Björn Ottosson eingeführt. Behebt die Farbtonverzerrung von CIELAB und die Probleme mit Verläufen dunkler Farben. Gleiche Helligkeitszahlen sehen über alle Farbtöne hinweg gleich hell aus. Lineare Interpolation in OKLCH erzeugt visuell glatte Verläufe ohne die matschigen grauen Mittelpunkte, die Sie von linear-gradient(red, green) in sRGB bekommen. Tailwind CSS v4.0 (Januar 2025) stellte seine gesamte Standard-Farbpalette von rgb() auf oklch() um. Die Browser-Unterstützung ist seit etwa 2023 breit.

OKLCH ist die langfristige Richtung für CSS-Farbe, aber Hex-Codes bleiben die Lingua franca von Design-Werkzeugen, Markenvorgaben und kopierten Schnipseln; sie sind kurz, über jedes Textmedium hinweg kopiersicher und universell verständlich.

Der Ursprung des additiven RGB von 1861

Das RGB-Modell geht auf die trichromatische Sehtheorie von Young-Helmholtz (frühes 19. Jahrhundert) zurück, die vorschlug, dass das menschliche Auge drei Arten von Farbrezeptoren hat, die Rot, Grün und Blau entsprechen. James Clerk Maxwell wies dies am 17. Mai 1861 an der Royal Institution in London experimentell nach. Er projizierte drei Schwarz-Weiß-Fotografien eines Tartan-Bandes (eine durch einen roten Filter aufgenommen, eine grün, eine blau) durch drei Projektoren mit denselben Farbfiltern; das wieder zusammengesetzte Bild auf der Leinwand zeigte das Band in annähernd voller Farbe. Dies gilt allgemein als die erste Farbfotografie. Dasselbe additive RGB-Prinzip treibt jedes jemals gebaute CRT-, LCD-, OLED- und Plasma-Display an: Jedes Pixel ist eine Dreiergruppe aus roten, grünen und blauen Subpixeln mit unabhängig variabler Helligkeit, und Ihre Netzhaut mischt sie zu einer wahrgenommenen Farbe.

Weitere Fragen

Unterscheidet Hex zwischen Groß- und Kleinschreibung?

Nein. #abcdef und #ABCDEF sind für den Parser identisch. Die CSS-Spezifikation ist eindeutig: Hex-Farbwerte sind unabhängig von Groß-/Kleinschreibung. Gemischte Schreibweise wie #FfAa00 ist ebenfalls zulässig, in Produktionscode aber unüblich. (Nicht zu verwechseln mit URL-Fragmenten, bei denen die führende Raute ein völlig anderes syntaktisches Konzept ist.)

Warum ergibt das Mitteln zweier Hex-Codes ein matschiges Grau?

Weil Hex-Werte gamma-kodiert sind (die sRGB-Übertragungsfunktion wird angewendet) und das Mitteln im Gamma-Raum nicht dasselbe ist wie das Mitteln im linearen Licht. Das klassische Beispiel ist linear-gradient(red, green), das einen matschigen olivfarbenen Mittelpunkt erzeugt; die Mathematik ist im gamma-kodierten Raum korrekt, aber visuell falsch. Moderne Farbfunktionen wie OKLCH lösen das, indem sie in einem wahrnehmungsgleichmäßigen Raum interpolieren, weshalb sie glattere Verläufe erzeugen.

Warum gibt es keinen Hex-Code für „Neon“- oder „fluoreszierende“ Farben?

Weil die Hex-Notation implizit sRGB ist und sRGB nur etwa 36 % der Farben abdeckt, die das menschliche Auge sehen kann. Viele leuchtende Farben (gesättigte Smaragdgrüntöne, helle Rot-Orangetöne, fluoreszierende Farben) existieren in der Natur und können auf modernen Wide-Gamut-Bildschirmen dargestellt werden, fallen aber aus dem sRGB-Würfel heraus. Um sie zu erreichen, brauchen Sie color(display-p3 …), color(rec2020 …) oder oklch() mit hohen Chroma-Werten. Diese Farben haben kein Hex-Äquivalent.

Was war die „websichere Palette“?

In den späten 1990er-Jahren, als viele Monitore auf 256 Farben beschränkt waren, hielten sich Designer an eine Palette von 216, die Schnittmenge der Systempaletten von Windows und Mac OS. Die 216 stammten aus einem 6×6×6-Würfel: Jeder der Werte R, G und B nahm nur die Werte 00, 33, 66, 99, CC, FF an. Lynda Weinman machte sie 1996 in ihrem Buch Designing Web Graphics populär. Sie wurde um 2000 obsolet, als 24-Bit-Farbe auf Verbraucher-Hardware kam. Heute ist sie eine reine historische Kuriosität, gelegentlich noch in altertümlichen Hex-Codes wie #CC0033 oder #993366 sichtbar.

Werden Daten an einen Server gesendet?

Nein. Hex-zu-RGB ist zwei Zeilen reiner JavaScript-Funktionsarithmetik. Die Umrechnung läuft lokal; nichts über die von Ihnen eingegebene Farbe wird irgendwohin hochgeladen; die Seite funktioniert offline, sobald sie geladen ist.

Verwandte Tools