Farbumrechner

Farben zwischen HEX, RGB, HSL, HWB, OKLCH und CMYK umrechnen – mit Farbwähler, Alpha-Wert und Copy-Buttons, kostenlos.

Der Farbumrechner wandelt Farben zwischen HEX, RGB, HSL, HWB, OKLCH, OKLab und CMYK um. Du gibst eine Farbe in einer beliebigen Schreibweise ein, zum Beispiel #3b82f6, rgb(59 130 246), hsl(217 91% 60%) oder einen Namen wie tomato, und siehst sofort alle anderen Formate zum Kopieren. Auch Transparenz wird unterstützt. Alles läuft lokal im Browser.

Farbe

Deckkraft (Alpha) %

HEX

#3b82f6

RGB

rgb(59 130 246)

RGB (mit Kommas)

rgb(59, 130, 246)

HSL

hsl(217 91% 60%)

HSL (mit Kommas)

hsl(217, 91%, 60%)

HWB

hwb(217 23% 4%)

OKLCH

oklch(0.623 0.188 259.81)

OKLab

oklab(0.623 -0.033 -0.185)

CMYK (einfach)

cmyk(76% 47% 0% 4%)

Farbformate im Überblick

Format	Beispiel	Einsatz
HEX	`#3b82f6`	Kompakt, überall verbreitet
RGB	`rgb(59 130 246)`	Direkte Rot-, Grün- und Blauanteile
HSL	`hsl(217 91% 60%)`	Farbton, Sättigung, Helligkeit anpassen
HWB	`hwb(217 23% 4%)`	Farbton mit Weiß- und Schwarzanteil
OKLCH	`oklch(0.623 0.188 259.8)`	Wahrnehmungsgleiche Skalen, moderne Paletten
OKLab	`oklab(0.623 -0.033 -0.185)`	Mischen und Verläufe

So gehst du vor

Farbe in beliebiger Schreibweise eingeben.
Bei Bedarf Deckkraft anpassen.
Format kopieren. Ob die Farbe als Textfarbe genug Kontrast hat, prüfst du im Farbkontrast-Prüfer. Eine ganze Palette erzeugt der Tailwind-Farbgenerator.

Beispiel

Das Design liefert hsl(217 91% 60%), dein Tailwind-Projekt braucht Hex. Du gibst den HSL-Wert ein und kopierst #3b82f6. Für Tailwind v4 nimmst du direkt die OKLCH-Zeile.

Häufige Fragen

Welche Farbformate unterstützt der Umrechner?

Eingabe und Ausgabe: HEX (auch mit Alpha), RGB, HSL, HWB, OKLCH und OKLab. Dazu kommen benannte CSS-Farben als Eingabe und CMYK als einfache Ausgabe.

Was ist OKLCH und warum wird es wichtig?

OKLCH beschreibt Farben über Helligkeit, Sättigung (Chroma) und Farbton. Gleiche Helligkeitswerte wirken wirklich gleich hell, das macht Farbskalen berechenbar. Moderne Browser unterstützen es in CSS, Tailwind v4 nutzt es in seiner Standardpalette.

Warum weichen HSL-Werte leicht ab, wenn ich zurückrechne?

HSL wird auf ganze Zahlen gerundet. Beim Zurückrechnen in HEX kann eine Abweichung von einem Farbwert entstehen. Für exakte Werte nutze HEX oder RGB als Quelle.

Ist der CMYK-Wert für den Druck geeignet?

Nein. Die Umrechnung ist eine einfache mathematische Näherung ohne Farbprofil. Für Druckdaten brauchst du ein Farbmanagement in Grafikprogrammen mit passendem ICC-Profil.

Stimmt etwas nicht auf dieser Seite? – wir schauen uns das an.