Zum Hauptinhalt springen
ToolsByUs

Farbcode umrechnen

Der Farbkonverter liest eine Farbe in beliebiger Notation – Hex mit oder ohne Raute, rgb(), hsl(), hsb(), oklch() oder einen der 148 CSS-Farbnamen – und gibt sie auf einmal in allen davon aus. Er akzeptiert sowohl die Komma- als auch die Leerzeichensyntax, bewahrt Alpha, wo das Zielformat es aufnehmen kann, und liefert nichts statt Schwarz zurück, wenn die Eingabe keine Farbe ist, die er lesen kann.

Nur lokal
HEX-Eingabe

Links eine Farbe eingeben. Akzeptiert werden Hexwerte mit oder ohne Raute, rgb(), hsl(), oklch() und CSS-Farbnamen.

Wie funktioniert Farbcode umrechnen?

Alles läuft über sRGB. Was Sie eingeben, wird in drei Kanäle und ein Alpha zerlegt, und jede Ausgabe wird daraus berechnet. Genau das macht die Umwandlungen konsistent: In der Mitte gibt es eine einzige Darstellung und nicht fünfzehn paarweise Formeln, die sich gegenseitig widersprechen können.

Was der Parser akzeptiert

Hex mit drei, vier, sechs oder acht Ziffern, mit oder ohne führende Raute – Hex ohne Raute ist wichtig, weil Werte so aus einer Tabellenkalkulation oder einer Design-Token-Datei ankommen. Beide CSS-Syntaxen: rgb(255, 136, 0) und rgb(255 136 0 / 50%). Prozentwerte, die in rgb() gegen 255 statt gegen 100 aufgelöst werden. hsl(), hsb() / hsv(), oklch(), und alle 148 CSS-Farb-Keywords.

Was es mit etwas tut, das es nicht lesen kann

Das Tool sagt es Ihnen. Ein Farbtool, das stillschweigend einen Tippfehler in Schwarz verwandelt, ist schlechter als eines, das die Eingabe ablehnt: Sie bekommen ein Farbmuster, glauben daran und schicken es raus. Ein Hex der falschen Länge – fünf Ziffern, sieben Ziffern – ist ein Tippfehler und keine Farbe und wird abgelehnt, statt zu etwas Plausiblen aufgefüllt zu werden.

Welche Umwandlungen exakt sind und welche nicht

Hex, RGB, HSL und HSV sind dieselben drei Bytes in anderen Koordinaten. Diese lassen sich exakt hin- und herrechnen, begrenzt nur durch die Anzahl der Dezimalstellen, mit denen die Ausgabe ausgegeben wird.

OKLCH ist auch in die andere Richtung exakt, kann aber Farben beschreiben, die sRGB nicht zeigen kann. oklch(0.7 0.3 140) ist eine völlig gültige Koordinate ohne sRGB-Pixel dahinter, und ihre Umwandlung wird beschnitten – zwei verschiedene OKLCH-Werte können also als derselbe Hex-Wert zurückkommen. Das ist eine Eigenschaft des Gamut, kein Fehler in der Rechnung.

CMYK ist die Näherung. Eine echte Umwandlung braucht ein ICC-Profil für Druckmaschine, Papier und Tinte, und derselbe sRGB-Wert ergibt auf gestrichenem Papier andere Tintenprozente als auf Zeitungspapier. Der Wert hier ist die geräteunabhängige Formel, die jeder Online-Konverter verwendet: richtig, um ein Farbmuster zu wählen, falsch für eine Druckspezifikation.

Beliebige Notation

#ff8800
rgb(255, 136, 0)
hsl(32 100% 50%)
darkorange
FF8800

Alle

hex    #ff8800
rgb    rgb(255 136 0)
hsl    hsl(32 100% 50%)
hsv    hsv(32 100% 100%)
oklch  oklch(0.7538 0.1751 55.94)
cmyk   cmyk(0% 47% 100% 0%)

Welche Optionen und Sonderfälle unterstützt Farbcode umrechnen?

Technische Referenz und Optionen
ParameterTypStandardVerhalten & Sonderfälle
HEXEin- und Ausgabeexakt3, 4, 6 und 8 Stellen, mit oder ohne Raute. Groß-/Kleinschreibung wird ignoriert.
RGBEin- und AusgabeexaktBeide Syntaxen, Ganzzahlen oder Prozentwerte, mit Alpha nach einem Schrägstrich oder als viertes Argument.
HSLEin- und AusgabeexaktDie gleichen drei Bytes in Polarkoordinaten. Der Farbwert wird umschlossen, daher ist 370 dasselbe wie 10.
HSV / HSBEin- und AusgabeexaktDie Grundlage für die meisten Design-Tools. Kein gültiges CSS, daher wird es zwar gelesen, aber niemals als empfohlene Ausgabe empfohlen.
OKLCHEin- und AusgabebegrenztWahrnehmungsgleichmäßig und größer als sRGB. Ein Koordinatenwert außerhalb des Farbumfangs wird bei der Rückkonvertierung abgeschnitten.
CMYKoutangenähertDie geräteunabhängige Formel. Ein Drucker führt die eigentliche Konvertierung mit seinem eigenen Profil durch.
Farbnamenin148Jeder CSS-Schlüsselwort, zusätzlich `transparent`.
Alpha0–1beibehaltenIn jedem Format, das es ausdrücken kann, erhalten. CMYK kann es nicht und lässt es weg.

Häufig gestellte Fragen

Welche Farbformate kann ich einfügen?

Hex mit drei, vier, sechs oder acht Ziffern, mit oder ohne Raute; rgb() und rgba() in der Komma- oder der Leerzeichensyntax; hsl() und hsla(); hsb() oder hsv(); oklch(); und jeden der 148 CSS-Farbnamen. Prozentwerte funktionieren überall dort, wo CSS sie erlaubt. Wird die Eingabe geparst, erscheinen alle anderen Formate sofort.

Warum kommt mein OKLCH-Wert als eine andere Farbe zurück?

Weil OKLCH mehr Farben beschreibt, als ein sRGB-Bildschirm zeigen kann. oklch(0.7 0.3 140) ist eine gültige Koordinate ohne sRGB-Pixel dahinter; bei der Umwandlung wird der Chroma-Wert so lange beschnitten, bis die Farbe passt – und zwei verschiedene kräftige OKLCH-Werte können auf denselben Hex-Wert beschnitten werden. Es liegt am Gamut, nicht an der Rechnung. Wenn Sie die Version innerhalb des Gamut brauchen: Der Picker auf dieser Seite zieht die Werte in den Gamut zurück, statt sie zu beschneiden, und sagt Ihnen, was er geändert hat.

Kann ich den CMYK-Werten für den Druck vertrauen?

Als Ausgangspunkt ja, als Spezifikation nein. CMYK ist geräteabhängig: Derselbe sRGB-Wert ergibt auf gestrichenem Papier andere Tintenprozente als auf ungestrichenem und auf einer anderen Druckmaschine wieder andere. Kein Online-Konverter kann wissen, welche Druckmaschine läuft. Schicken Sie der Druckerei die sRGB- oder die Pantone-Referenz und lassen Sie sie mit dem Profil für den jeweiligen Auftrag umrechnen.

Was passiert, wenn ich etwas einfüge, das keine Farbe ist?

Es entsteht nichts, und das Feld meldet, dass es die Eingabe nicht lesen konnte. Das ist Absicht. Ein Konverter, der bei einem Tippfehler stillschweigend Schwarz zurückgibt, liefert Ihnen ein Farbmuster, an dem Sie nicht zu zweifeln brauchen – und ein Hex der falschen Länge, fünf oder sieben Ziffern, ist ein Tippfehler und keine Farbe, die aufgefüllt werden müsste.

Wird davon irgendetwas an einen Server gesendet?

Nein. Jede Umwandlung hier ist Rechenarbeit in diesem Browser-Tab. Nach dem Laden macht die Seite keine Netzwerkanfrage – das können Sie über das Netzwerk-Panel prüfen oder einfacher, indem Sie Ihre Verbindung trennen und zusehen, wie es weiterarbeitet.

Welches Farbformat sollte ich in CSS tatsächlich verwenden?

HEX für eine feste Markenfarbe, HSL, wenn Sie eine hellere oder dunklere Variante ableiten wollen, indem Sie eine Zahl verschieben, und OKLCH, wenn es auf wahrnehmungsgleiche Abstände ankommt – ein Zehn-Punkte-Schritt in der Helligkeit sieht in OKLCH bei jedem Farbton gleich aus, was in HSL nicht gilt. Alle drei beschreiben dieselben Farben; der Unterschied ist, welche Anpassung sich von Hand leicht machen lässt.

ToolsByUs-Team · Wie wir unsere Tools prüfen