Farbmodell-Konverter (RGB, HSL, HSV, CMYK)

Geben Sie einen HEX-Farbcode ein oder wählen Sie eine Farbe über den Farbwähler aus, um sofort die entsprechenden Werte in RGB, HSL, HSV (HSB) und CMYK gleichzeitig zu berechnen.

Zuletzt aktualisiert: 2026-09-06

Wie sich die Farbmodelle unterscheiden

Modell	Beschreibung	Typische Verwendung
RGB	Ein additives Farbmodell, das die drei Grundfarben des Lichts (Rot, Grün, Blau) jeweils in einer Skala von 0 bis 255 mischt.	Bildschirme, Webentwicklung (CSS) und das Basisformat der meisten Bildbearbeitungsprogramme.
HSL	Stellt eine Farbe über Farbton, Sättigung und Helligkeit dar. Das entspricht eher der intuitiven menschlichen Beschreibung von Farben.	Die CSS-Funktion `hsl()` sowie die Anpassung von Farbton/Sättigung in Farbschema-Werkzeugen.
HSV/HSB	Stellt eine Farbe über Farbton, Sättigung und Hellwert (Brightness) dar. Ähnlich wie HSL, definiert die dritte Achse aber anders.	Die Farbwähler in Design-Werkzeugen wie Photoshop und Illustrator.
CMYK	Ein subtraktives Farbmodell, das vier Farben übereinanderlegt: Cyan, Magenta, Gelb und eine Schwarzplatte (Key).	Druckdesign und Desktop-Publishing (DTP), bei denen Farbe mit Tinte auf Papier wiedergegeben wird.

Was das Umrechnen zwischen Farbmodellen bedeutet

Zwischen Farbmodellen umzurechnen heißt, ein und dieselbe Farbe als Zahlen in verschiedenen Systemen auszudrücken: RGB, HSL, HSV (auch HSB genannt) und CMYK. RGB folgt der Art, wie ein Bildschirm Licht abgibt; HSL und HSV beschreiben eine Farbe entlang von Achsen, die dem menschlichen Empfinden näher stehen – Farbton, Sättigung und Helligkeit beziehungsweise Hellwert; CMYK folgt dem Übereinanderlegen von Druckfarben. Die Farbe ist dieselbe, die Betrachtungsachse jedoch eine völlig andere.

Geben Sie diesem Werkzeug eine einzelne Farbe, als Hex-Code oder über die Farbauswahl, und es rechnet sie zugleich in alle vier Systeme um. Das passt zu den Fällen, die eine einzelne Umrechnung nicht abdeckt: die Schreibweise in CSS ändern, unterschiedliche Farbangaben zwischen Gestaltungswerkzeugen abgleichen oder CMYK-Werte für den Druck prüfen – also überall dort, wo Sie mehrere Modelle nebeneinander sehen möchten.

So verwenden Sie den Umrechner

Hex-Farbcode eingeben Der Code wird mit und ohne führendes Rautezeichen angenommen, ebenso die dreistellige Kurzform wie #f60.
Oder eine Farbe mit der Farbauswahl bestimmen Was Sie wählen, erscheint automatisch im Feld für den Hex-Code.
Die Farbe in der Vorschau prüfen Das Farbfeld lässt Sie mit dem Auge bestätigen, dass der eingegebene Wert so gelesen wurde, wie Sie es meinten.
Die Werte für RGB, HSL, HSV und CMYK ablesen Die Zahlen aller vier Systeme erscheinen gleichzeitig.
Die benötigten Werte verwenden Übertragen Sie sie in eine CSS-Funktion hsl(), prüfen Sie die CMYK-Werte für den Druck – ganz wie die Aufgabe es verlangt.

Tipps für die Nutzung

Das HEX-Feld akzeptiert Codes mit oder ohne führendes `#`, sowohl in der 3-stelligen Kurzform (z. B. `#f60`) als auch in der 6-stelligen Vollform.
Jede über den Farbwähler ausgewählte Farbe wird automatisch im HEX-Code übernommen, sodass Sie Farben visuell auswählen und gleichzeitig die genauen Zahlenwerte prüfen können.
Wenn Sie in CSS eine Hintergrund- oder Textfarbe mit der Funktion `hsl()` festlegen möchten, können Sie die hier berechneten HSL-Werte direkt in das Format `hsl(H, S%, L%)` einsetzen.
Beim Erstellen von Druckvorlagen sollten Sie bedenken, dass die hier angezeigten CMYK-Werte eine vereinfachte Umrechnung sind; die tatsächlichen Werte, die das ICC-Profil einer Druckerei verwendet, können geringfügig abweichen.

Wofür sich der Umrechner eignet

Die Schreibweise einer Farbe in CSS ändern

Rechnen Sie einen im Entwurf vorgegebenen Hex-Code in die HSL-Werte um, die Sie brauchen, wenn Sie Farbton oder Sättigung über die CSS-Funktion hsl() feinjustieren wollen.

Richtwerte in CMYK für den Druck prüfen

Bevor Sie eine fürs Web gewählte Palette in Druckerzeugnissen weiterverwenden, macht ein Blick auf die CMYK-Entsprechung den Unterschied zwischen Bildschirm und Papier leichter erkennbar. Wo es auf genaue Wiedergabe ankommt, gleichen Sie die Umrechnung gesondert mit dem ICC-Profil der Druckerei ab.

Eine Farbe zwischen Gestaltungswerkzeugen übernehmen

Photoshop, Illustrator und ähnliche Programme zeigen ihre Farbauswahl häufig in HSV (HSB). Wenn die Zahlen daher nicht zu einem Webfarbcode zu passen scheinen, zeigt dieses Werkzeug die Entsprechung.

Eine Palette feinjustieren

Zerlegt man eine Farbe in Farbton, Sättigung und Helligkeit, erkennt man viel leichter, in welche Richtung anzupassen ist – etwa den Farbton zu halten und allein die Helligkeit zu ändern. Für den Aufbau ausgearbeiteter Paletten lohnt sich zusätzlich ein eigener Palettengenerator.

Begriffe zu Farbmodellen

RGB: Ein additives Modell, das Farbe durch Mischen von rotem, grünem und blauem Licht ausdrückt. Jede Komponente wird als Zahl von 0 bis 255 angegeben; es ist die grundlegende Farbangabe auf Bildschirmen und in CSS.
HSL: Ein Modell, das Farbe über Farbton, Sättigung und Helligkeit ausdrückt. Gegenüber den bloßen Zahlen von RGB lassen sich Helligkeit und Leuchtkraft weit anschaulicher einstellen.
HSV (HSB): Ein Modell, das Farbe über Farbton, Sättigung und Hellwert beziehungsweise Helligkeit ausdrückt. Es ähnelt HSL, bestimmt die dritte Achse aber anders, und ist in den Farbauswahlen von Programmen wie Photoshop weit verbreitet.
CMYK: Ein subtraktives Modell, das Farbe durch Übereinanderlegen von vier Druckfarben ausdrückt: Cyan, Magenta, Gelb und der Schwarzplatte, also Schwarz. Damit arbeitet die Druckgestaltung.
Farbton: Die Art der Farbe – Rot, Grün, Blau und so fort –, angegeben als Winkel von 0 bis 360 Grad. Es ist die Achse, die HSL und HSV teilen; sie läuft im Kreis von Rot über Gelb, Grün, Blau und Violett zurück zu Rot.
Sättigung: Wie leuchtend eine Farbe ist. Nahe 0 Prozent nähert sie sich Grau, nahe 100 Prozent wird sie zu einer leuchtenden reinen Farbe.
Helligkeit und Hellwert: Die Helligkeit in HSL beschreibt, wie viel Schwarz oder Weiß beigemischt ist, während der Hellwert in HSV beschreibt, wie viel Schwarz in die Farbe gemischt ist. Es ist das klassische Beispiel dafür, dass dieselbe Farbe je nach Modell andere Zahlen bedeutet.
Schwarzplatte (K): Der Schwarzanteil in CMYK. Mit Cyan, Magenta und Gelb allein lässt sich ein tiefes Schwarz kaum erzielen, weshalb im Druck schwarze Farbe gesondert aufgetragen wird, damit Text und dunkle Flächen klar wirken.

Häufig gestellte Fragen

RGB stellt eine Farbe dar, indem es die drei Grundfarben des Lichts (Rot, Grün, Blau) jeweils in einer Skala von 0 bis 255 mischt, und ist das grundlegende Format, das Computer intern verwenden. HSL drückt dieselbe Farbe über drei Achsen aus, die der menschlichen Intuition näherkommen (Farbton, Sättigung, Helligkeit), wodurch Anpassungen wie "etwas heller" oder "etwas kräftiger" leichter fallen.

HSV und HSL teilen dieselben Achsen für Farbton (H) und Sättigung (S), definieren die dritte Achse aber unterschiedlich. Die Helligkeit bei HSL beschreibt, wie stark eine Farbe in Richtung Schwarz oder Weiß gemischt ist, während der Hellwert bei HSV nur beschreibt, wie viel Schwarz der Farbe beigemischt wurde. Wenn man eine kräftige, fast reine Farbe auswählen möchte, wirkt HSV oft intuitiver, weshalb es das Modell ist, das in den Farbwählern von Werkzeugen wie Photoshop verwendet wird.

Theoretisch sollte das Mischen gleicher Anteile Cyan-, Magenta- und Gelbtinte Schwarz ergeben, doch echte Tinten sind nie vollkommen rein, sodass die Mischung aller drei nur ein trübes Braun ergibt. Um scharfe, tiefe Schwarztöne zu erzielen (besonders für Text), fügt die Druckindustrie eine eigene schwarze Tinte hinzu, die Schwarzplatte, bezeichnet mit K.

Bildschirme erzeugen Farbe durch additive Mischung, indem sie rotes, grünes und blaues Licht kombinieren, weshalb RGB, das auf den Grundfarben des Lichts basiert, sich natürlich anbietet. Der Druck hingegen funktioniert durch subtraktive Mischung, bei der Tinten auf Papier aufgetragen werden, die Licht absorbieren, weshalb CMYK, die Grundfarben der Tinte plus Schwarz, verwendet wird. Da beide Verfahren auf unterschiedlichen Prinzipien beruhen, stimmen Bildschirmfarben und gedruckte Farben nicht immer exakt überein – ein Unterschied, der als Farbraum (Gamut) bezeichnet wird.

Übrigens – die Geschichte hinter diesen Farbmodellen

Die Idee der additiven Farbmischung hinter RGB reicht bis in die Farbtheorie des 19. Jahrhunderts zurück, wurde in der Computergrafik aber erst ab den 1970er-Jahren weit verbreitet. Frühe Farbfernseher und Monitore erzeugten Farbe, indem sie rote, grüne und blaue Leuchtstoffe auf einer Kathodenstrahlröhre zum Leuchten brachten, weshalb RGB als das numerische Modell übernommen wurde, das dieser physischen Hardware direkt entsprach.

HSL und HSV wurden beide in den 1970er- und 1980er-Jahren von Computergrafik-Forschern entwickelt, um ein konkretes Usability-Problem zu lösen: Rohe RGB-Zahlen direkt anzupassen ist für Menschen nicht intuitiv. HSV ist besonders dafür bekannt, 1978 in einem Paper von Alvy Ray Smith formalisiert worden zu sein, der später einer der Mitbegründer von Pixar wurde.

CMYK entwickelte sich zusammen mit der Geschichte der Drucktechnik und stammt aus einem Verfahren namens Vierfarbdruck (Four-Color Process Printing). Da Cyan, Magenta und Gelb allein nur schwer ein tiefes, sattes Schwarz wiedergeben können, wurde eine eigene Schwarzplatte hinzugefügt, um diese druckspezifische Einschränkung zu lösen. CMYK ist bis heute der Standard im Offsetdruck, bei Tintenstrahldruckern und vielen anderen Drucktechnologien.

Alle Wissenstexte ansehen