Farbkonverter

Aktualisiert: 3 Oktober 2026

Geben Sie einen CSS-Farbnamen oder -Code ein, um die zugehörigen RGB-, HEX-, HSL-, HWB-, CMYK- und NCol-Werte samt Farbvorschau anzuzeigen.

HEX ⇄ RGB ⇄ HSL Farbkonverter

Formel des Farbkonverters

Formel

\[R=16h_1+h_2,\qquad G=16h_3+h_4,\qquad B=16h_5+h_6\]

Wobei gilt:

\(h_1,\ldots,h_6\) — die sechs Ziffern einer HEX-Farbe, gelesen als Werte von 0 bis 15; A bis F stehen für 10 bis 15.
\(R\), \(G\) und \(B\) — die Werte der roten, grünen und blauen Kanäle, jeweils von 0 bis 255.

Diese Formel wandelt eine sechsstellige HEX-Farbe in RGB um. Der Rechner akzeptiert auch andere unterstützte Farbformate und rechnet zwischen ihnen um.

Farbkonverter – Rechenbeispiel

Beispiel: Die Standardeingabe ist skyblue. Diese benannte Farbe entspricht #87CEEB, sodass ihre HEX-Ziffernpaare in RGB umgerechnet werden können.

\[R=8(16)+7=135,\qquad G=12(16)+14=206,\qquad B=14(16)+11=235\]

Ergebnis: skyblue hat den HEX-Wert #87CEEB und den RGB-Wert rgb(135, 206, 235). Die HSL-Werte liegen ungefähr bei einem Farbton von 197°, einer Sättigung von 71 % und einer Helligkeit von 73 %.

So verwenden Sie den Farbkonverter

Geben Sie eine Farbe in das Feld Farbe ein. Sie können mit der Voreinstellung skyblue beginnen, einen CSS-Farbnamen wie red eintippen oder einen Code wie #f00 oder rgb(255,0,0) eingeben.
Prüfen Sie das Ergebnis unter Farbe für eine visuelle Vorschau der interpretierten Eingabe.
Kopieren Sie das gewünschte Format aus Name, RGB, HEX, HSL, HWB, CMYK oder NCol.

Wenn unter Name „kein Name“ steht, hat die Farbe keinen passenden Namen in der Namensliste des Konverters. Die numerischen Ergebnisse können trotzdem eine gültige Farbe darstellen.

Was die Farbformate bedeuten

Eine digitale Farbe lässt sich auf mehrere Arten beschreiben, ohne ihr Aussehen zu verändern. HEX schreibt Rot, Grün und Blau als hexadezimale Ziffernpaare: #87CEEB bedeutet Rot 87, Grün CE und Blau EB zur Basis 16. RGB drückt dieselben Kanäle als Dezimalzahlen von 0 bis 255 aus. Wenn Sie die Umrechnung zur Basis 16 separat nachvollziehen möchten, nutzen Sie den Hex-Rechner; er rechnet Zahlen um, keine vollständigen CSS-Farbwerte.

HSL beschreibt Farbton, Sättigung und Helligkeit. Der Farbton ist eine Position auf dem Farbkreis, üblicherweise in Grad ausgedrückt; die Sättigung beschreibt die Farbintensität, und die Helligkeit verläuft von Schwarz zu Weiß. HWB nutzt stattdessen Farbton, Weißanteil und Schwarzanteil. Diese Formate sind oft leichter zu lesen, wenn Sie Farbtöne vergleichen oder eine Farbe nach Augenmaß anpassen. RGB und HEX sind häufig praktischer, wenn eine Spezifikation exakte Kanalwerte verlangt.

CMYK liefert Cyan-, Magenta-, Gelb- und Schwarzwerte, die aus der Bildschirmfarbe abgeleitet werden. NCol ist eine farbtonbasierte Notation, die der Konverter bereitstellt; sie wird in CSS nicht so häufig verwendet wie HEX, RGB oder HSL. Das Ausgabeformat ändert nur, wie eine Farbe geschrieben wird, nicht die gewählte Farbe selbst. Kleine Unterschiede in den angezeigten Prozentwerten können durch Rundung entstehen.

Praktische Grenzen und Tipps

Der Konverter braucht eine Eingabe, die sein Farbparser erkennt. Standardisierte CSS-Farbnamen und gängige CSS-Farbcodes sind gute Ausgangspunkte. Ein dreistelliger HEX-Code ist eine Kurzschreibweise: #f00 steht beispielsweise für #ff0000. HEX-Buchstaben sind unabhängig von Groß- und Kleinschreibung, sodass #87ceeb und #87CEEB dieselbe Farbe darstellen.

Manche Eingaben enthalten einen Alphawert, der die Transparenz steuert. Bei erkannten Eingaben mit Alphawert verwenden die RGB-, HSL-, HWB- und NCol-Ergebnisse Formen mit Alphawert. Prüfen Sie jedes Ergebnis, bevor Sie es in eine andere Anwendung kopieren: Nicht jedes aufgeführte Format beschreibt Transparenz auf dieselbe Weise. Die Vorschau kann zudem vor einem anderen Hintergrund anders aussehen, wenn eine Farbe teilweise transparent ist.

CMYK ist hier eine mathematische Umrechnung aus einer digitalen Farbe, keine Konvertierung über ein Druckprofil. Das gedruckte Erscheinungsbild hängt vom Drucker, den Tinten, dem Papier und den Farbmanagement-Einstellungen ab; nutzen Sie daher einen geeigneten Druck-Workflow, wenn es auf exakte Produktionsfarben ankommt. Ebenso hängt das Erscheinungsbild einer Farbe auf dem Bildschirm vom Display und dessen Einstellungen ab; allein übereinstimmende Zahlenwerte können kein identisches Erscheinungsbild auf jedem Gerät garantieren.

Wenn Sie eine HEX-Farbe in einen URL-Abfrageparameter einfügen, beachten Sie, dass # in URLs eine besondere Bedeutung hat. Verwenden Sie den URL-Encoder, um den Wert bei Bedarf zu kodieren.

Häufig gestellte Fragen

Wie rechne ich RGB von Hand in HEX um?

Wandeln Sie jeden RGB-Kanal vom Dezimalsystem in zwei Hexadezimalziffern um und fügen Sie die drei Paare nach einer # zusammen. Teilen Sie einen Kanalwert durch 16: Der ganzzahlige Quotient ist die erste Ziffer, der Rest die zweite. Beispielsweise ergibt 206 den Quotienten 12 (C) und den Rest 14 (E), also CE. Ein Wert unter 16 braucht eine führende Null, zum Beispiel wird 9 zu 09.

Wie kann ich HSL aus RGB berechnen?

Teilen Sie zunächst jeden RGB-Kanal durch 255 und ermitteln Sie dann den größten Wert \(M\) und den kleinsten Wert \(m\). Die Helligkeit ist \(L=(M+m)/2\). Wenn \(M=m\), ist die Sättigung null und der Farbton hat keinen sinnvollen Wert. Andernfalls beträgt die Sättigung \((M-m)/(1-|2L-1|)\); der Farbton hängt davon ab, welcher Kanal am größten ist. Zum Beispiel ist reines Rot, rgb(255, 0, 0), gleich hsl(0, 100%, 50%).

Welches Kontrastverhältnis ist gut für Text- und Hintergrundfarben?

Für die üblichen WCAG-2.2-AA-Ziele sollten Sie mindestens 4,5:1 für normalen Text und 3:1 für großen Text anstreben. Die AAA-Ziele liegen entsprechend bei 7:1 und 4,5:1. Ein Farbkonverter allein kann Ihnen nicht sagen, ob eine Kombination diese Ziele erfüllt: Der Kontrast hängt von beiden Farben ab. Prüfen Sie Vordergrund und Hintergrund gemeinsam, einschließlich des Hintergrunds, der hinter transparenten Farben sichtbar ist.

Warum hat eine Graufarbe einen Farbton?

Der Farbton ist mathematisch undefiniert, wenn eine Farbe keine Sättigung hat, wie bei RGB-Werten, deren drei Kanäle gleich sind. Ein Konverter zeigt möglicherweise einen Platzhalter-Farbton an, oft 0°, um die HSL- oder HWB-Notation vollständig zu halten. Diese Zahl macht das Grau nicht rötlich. Wenn die Sättigung gegen null geht, können kleine Kanaländerungen auch große Änderungen des angezeigten Farbtons bewirken, ohne dass sich sichtbar viel ändert.

Verändert ein Alphawert die RGB-Kanäle einer Farbe?

Alpha steuert, wie viel von einer Farbe über ihrem Hintergrund sichtbar ist; es verändert für sich genommen nicht die gespeicherten RGB-Kanäle der Farbe. Ein Alphawert von 0 bedeutet vollständige Transparenz, 1 bedeutet vollständige Deckkraft. Das sichtbare Ergebnis hängt vom Hintergrund ab: Für jeden Kanal gilt für den angezeigten Wert näherungsweise \(\alpha\times\text{Vordergrund}+(1-\alpha)\times\text{Hintergrund}\). Ein transparentes Rot kann daher über Weiß rosafarben wirken.

Warum kann sich eine Farbe nach wiederholtem Hin- und Herkonvertieren leicht ändern?

Umrechnungen können Rundungsfehler verursachen. RGB-Kanäle werden üblicherweise als ganze Zahlen von 0 bis 255 gespeichert, während HSL und andere Formate möglicherweise gerundete Grad- oder Prozentwerte anzeigen. Werden diese gerundeten Ergebnisse erneut eingegeben, können sich leicht andere RGB-Werte ergeben. Um eine exakte RGB-Farbe beim Bearbeiten oder Kopieren zu bewahren, behalten Sie den ursprünglichen RGB- oder sechstelligen HEX-Wert, statt sich auf gerundete Zwischenergebnisse zu verlassen.