Farbkonverter

Wandle Farbwerte zwischen HEX, RGB, HSL und CMYK präzise um.

Ein Webdesigner liefert hsl(174, 62%, 41%), im Stylesheet benötigst du jedoch einen Hex-Code. Die Druckerei wiederum verlangt exakte CMYK-Prozentwerte für ein Firmenlogo, das bisher nur in RGB angelegt war. Alle Notationen beschreiben denselben Farbton in einer anderen Sprache — und die Umrechnung sollte ohne langes Rätselraten gelingen.

Die vier Farbsysteme im Farbkonverter

FormatAufbauTypischer Einsatzbereich
HEX#RRGGBB, Basis 16CSS, HTML, Designprogramme
RGBRot, Grün, Blau, jeweils 0–255Bildschirme, digitale Medien
HSLFarbton, Sättigung, HelligkeitErstellen und Anpassen von Farbpaletten
CMYKCyan, Magenta, Gelb, Schwarzanteil, %Druckvorstufe und Print

Vorteile von HSL bei der Gestaltung

HEX und RGB beschreiben Farbtöne anhand additiver Anteile von rotem, grünem und blauem Licht. Das liefert verlässliche Werte für Monitore, ist beim Entwerfen aber selten intuitiv: Wie #2E86AB verändert werden muss, um denselben Ton etwas heller abzustufen, lässt sich an den Zahlen kaum ablesen. HSL teilt die Farbe in Farbton (Hue), Sättigung (Saturation) und Helligkeit (Lightness) auf drei separate Achsen auf. Um eine hellere Nuance zu erzeugen, genügt es, den Helligkeitswert anzuheben, während Grundfarbe und Farbsättigung unangetastet bleiben.

Aus diesem Grund setzen moderne Palettengeneratoren oft auf HSL. Man wählt den Basiston auf dem Farbkreis und steuert Helligkeit sowie Reinheit gezielt nach. Dieses Prinzip folgt der menschlichen Wahrnehmung wesentlich direkter als die rein technische Bildschirmansteuerung.

Warum Monitorfarben und Druckfarben abweichen

RGB ist ein additives Modell: Als Ausgangspunkt dient Schwarz, dem rotes, grünes und blaues Licht beigemischt wird, bis im Maximum Weiß entsteht. CMYK arbeitet dagegen subtraktiv auf weißem Papier, wobei Druckfarben in Cyan, Magenta, Gelb und Schwarz das reflektierte Licht schichtweise filtern. Da beide Farbräume auf grundlegend verschiedenen physikalischen Prozessen basieren, lässt sich nicht jeder Monitorwert identisch auf Papier übertragen. Sehr leuchtende, stark gesättigte Bildschirmfarben — insbesondere brillante Grün- oder Orangetöne — liegen oft außerhalb des druckbaren Farbraums. Gedruckt wirkt ein Motiv daher mitunter matter als auf einem beleuchteten Bildschirm.

Schritte zur Farbumrechnung im Farbkonverter

  1. Füge deine Ausgangsfarbe als HEX, RGB, HSL oder CMYK in das Eingabefeld ein.
  2. Klicke auf den Konvertieren-Button, um die Berechnung auf dem Server zu starten.
  3. Kopiere den benötigten Zielcode für dein CSS-Stylesheet, Grafikprogramm oder Datenblatt.
  4. Gleiche Werte für den Vierfarbdruck vor Drucklegung mit dem Profil deiner Druckerei ab.

Häufige Fragen zum Farbkonverter

Warum wirkt ein Farbton gedruckt anders als auf dem Monitor?

Monitore erzeugen Farbtöne aktiv durch Lichtmischung (RGB), während Druckfarben (CMYK) Umgebungslicht auf Papier absorbieren. Da der druckbare Farbraum enger ist als das Spektrum moderner Displays, können manche grellen Nuancen im Druck nicht vollständig wiedergegeben werden.

Worin liegt der Unterschied zwischen HSL und HSB beziehungsweise HSV?

Beide Systeme ähneln sich, nutzen jedoch andere Definitionen: HSL setzt auf Helligkeit (Lightness), die von reinem Schwarz über den Grundton bis zu Weiß reicht. HSB und HSV messen die Brillanz (Brightness/Value), die ausschließlich von Schwarz zum reinen Basiston verläuft. Dadurch fallen auch die Sättigungswerte rechnerisch anders aus.

Entspricht ein HEX-Code genau denselben Werten wie RGB?

Ja. Eine Angabe wie #2E86AB enthält exakt die drei RGB-Komponenten 46, 134 und 171. Sie wird lediglich im hexadezimalen Zahlensystem notiert, um kürzer zu sein und sich kompakter in HTML- und CSS-Dateien einbinden zu lassen.

Weshalb weicht ein RGB-Wert nach dem Rückrechnen aus CMYK manchmal ab?

Liegt ein RGB-Wert außerhalb des CMYK-Gamuts, wird er bei der Umwandlung auf den nächstmöglichen druckbaren Farbton verschoben. Wird dieser angepasste CMYK-Wert wieder in RGB konvertiert, erhält man diesen korrigierten Wert und nicht mehr die Ausgangsfarbe.

Welche Farbnotation eignet sich am besten für Web-CSS?

HEX und RGB sind für Webseiten gleichermaßen etabliert. HEX spart Zeichen, während RGB oft für Transparenzen genutzt wird. HSL empfiehlt sich vor allem dann, wenn Farbpaletten und harmonische Nuancen direkt im Code justiert werden sollen.

Cookie
Wir kümmern uns um Ihre Daten und würden gerne Cookies verwenden, um Ihr Erlebnis zu verbessern.