Design

Farb-Konverter

HEX, RGB, HSL, HSV, CMYK, LAB und OKLCH mit exakter Umrechnung.

Was es macht. Ein Farbkonverter überträgt eine Farbe zwischen Notationen. HEX und RGB beschreiben dieselben Werte in anderer Schreibweise, HSL und HSV ordnen sie nach Farbton, Sättigung und Helligkeit, LAB und OKLCH orientieren sich an der menschlichen Wahrnehmung. Für gleichmäßig wirkende Farbabstufungen ist OKLCH die richtige Wahl.

Läuft im BrowserKein UploadKeine AnmeldungFunktioniert offline

So benutzt du Farb-Konverter

Gib eine Farbe in beliebiger Notation ein — die anderen werden mitgerechnet.
Nutz die Regler, um die Farbe anzupassen; alle Werte aktualisieren sich gemeinsam.
Kopier die Notation, die du brauchst.

Welche Notation wofür?

Alle beschreiben dieselben Farben, aber nicht alle eignen sich für dieselbe Aufgabe.

Welche Notation wofür?
Notation	Gut für	Schwäche
HEX	Kompakt notieren, überall lesbar	Nicht lesbar, keine Transparenz ohne 8 Stellen
RGB	Programmatisch rechnen, Transparenz	Werte sagen nichts über die Wirkung
HSL	Farbton schnell verschieben	Helligkeit entspricht nicht der Wahrnehmung
HSV	Farbwähler in Grafikprogrammen	Wie HSL, plus Verwechslungsgefahr
CMYK	Druckvorstufe	Geräteabhängig, ohne Profil ungenau
LAB	Farbabstände messen	Werte schwer im Kopf vorstellbar
OKLCH	Gleichmäßige Abstufungen, Designsysteme	Ältere Browser kennen es nicht

Für Webprojekte ist OKLCH inzwischen die beste Wahl, wo Browserunterstützung kein Thema ist: Gleiche Zahlenschritte ergeben dort auch optisch gleiche Schritte, was bei HSL nicht der Fall ist.

Warum die Helligkeit in HSL täuscht

In HSL haben zwei Farben mit derselben Helligkeitsangabe sehr unterschiedliche wahrgenommene Helligkeit.

Reines Gelb und reines Blau stehen beide bei 50 Prozent Helligkeit. Auf dem Bildschirm ist Gelb aber ungleich heller — das Auge ist für Grün-Gelb-Töne weit empfindlicher als für Blau.

Praktisch führt das zu Farbpaletten, die auf dem Papier systematisch aussehen und in der Anwendung uneinheitlich wirken: Die gelbe Warnfarbe wirkt aufdringlich, die blaue Infofarbe verschwindet.

OKLCH löst das, weil seine Helligkeitsachse an der Wahrnehmung ausgerichtet ist. Eine Palette mit gleicher OKLCH-Helligkeit wirkt über alle Farbtöne hinweg gleich hell — genau das, was ein Designsystem braucht.

Warum CMYK nie genau passt

Weil RGB und CMYK verschiedene Farbräume sind, die sich nur teilweise überschneiden.

RGB mischt Licht und kann Farben erzeugen, die kein Druckverfahren wiedergeben kann — leuchtendes Cyan, sattes Orange, kräftiges Grün. CMYK mischt Pigmente und ist an anderer Stelle begrenzt.

Eine Umrechnung ohne Farbprofil ist deshalb immer eine Näherung. Für den Druck zählt das Profil des Druckverfahrens: In Deutschland ist PSO Coated v3 für gestrichenes Papier der übliche Standard, für Zeitungsdruck ISOnewspaper26v4.

Die Werte hier sind eine Standardumrechnung ohne Profil. Für eine Druckerei erzeugst du die CMYK-Daten im Layoutprogramm mit dem Profil, das die Druckerei vorgibt — nicht mit einem Konverter.

Häufige Fragen

Wie rechne ich HEX in RGB um?

Je zwei Stellen als Hexadezimalzahl lesen. #4A90D9 ergibt rgb(74, 144, 217).

Was ist OKLCH?

Ein wahrnehmungsbasierter Farbraum. Gleiche Zahlenschritte ergeben dort auch optisch gleiche Schritte — anders als in HSL.

Warum wirkt meine HSL-Palette uneinheitlich?

Weil HSL-Helligkeit nicht der wahrgenommenen entspricht. Gelb bei 50 % wirkt deutlich heller als Blau bei 50 %.

Kann ich die CMYK-Werte an die Druckerei geben?

Besser nicht. Ohne Farbprofil ist die Umrechnung eine Näherung. Nimm das Profil, das die Druckerei vorgibt.

Wie schreibe ich Transparenz?

Als achtstelliges HEX mit Alpha am Ende, oder als rgba beziehungsweise mit Schrägstrich in modernen Notationen.

Werden meine Farben gesendet?

Nein, alles rechnet in diesem Tab.

Ratgeber zu Farb-Konverter

Layout and Colour Decisions in CSS8 min read
HEX vs RGB vs HSL: Which to Use When7 min read
WCAG Contrast Requirements, Explained Properly8 min read