Ob im CSS-Stylesheet, im Grafikprogramm oder in der Druckvorlage – Farben begegnen dir in ganz unterschiedlichen Schreibweisen. Mal ist es ein kryptisches #3B82F6, mal rgb(59, 130, 246), mal eine Angabe in Prozent für die Druckerei. Dahinter stecken verschiedene Farbmodelle, die alle dieselbe Farbe beschreiben können, aber für verschiedene Zwecke gemacht sind. Dieser Artikel erklärt die wichtigsten Modelle und zeigt, wie du sie ineinander umrechnest.
RGB: Die Sprache der Bildschirme
RGB steht für Rot, Grün und Blau – die drei Grundfarben des Lichts. Jeder Bildschirm setzt jede Farbe aus diesen drei Komponenten zusammen, jeweils mit Werten von 0 bis 255. rgb(255, 0, 0) ist reines Rot, rgb(0, 0, 0) ist Schwarz, rgb(255, 255, 255) ist Weiß. Weil hier Lichter addiert werden, spricht man von einem additiven Farbmodell: Je mehr von allem, desto heller.
HEX: RGB in kompakter Schreibweise
Der Hexadezimalcode ist nichts anderes als RGB in einer kürzeren Notation. Statt drei Dezimalzahlen werden die Werte als zweistellige Hex-Zahlen geschrieben und mit einem Doppelkreuz eingeleitet. #FF0000 entspricht exakt rgb(255, 0, 0) – die ersten beiden Stellen stehen für Rot, die mittleren für Grün, die letzten für Blau. HEX ist im Webdesign am gebräuchlichsten, weil es kurz und eindeutig ist.
HSL: Farben, wie Menschen sie denken
HSL steht für Hue (Farbton), Saturation (Sättigung) und Lightness (Helligkeit). Dieses Modell ist besonders praktisch, wenn du Farben gezielt anpassen willst: Der Farbton wird als Winkel auf dem Farbkreis angegeben (0–360°), Sättigung und Helligkeit als Prozentwerte. Willst du eine Farbe nur etwas heller machen, drehst du in HSL einfach an der Lightness, ohne den Farbton zu verlieren. In RGB wäre dieselbe Anpassung deutlich umständlicher.
CMYK: Das Modell für den Druck
CMYK (Cyan, Magenta, Yellow, Key/Schwarz) ist das Gegenstück für den Druck. Hier wird nicht Licht addiert, sondern Farbe auf Papier aufgetragen, die Licht schluckt – ein subtraktives Modell. Deshalb lassen sich nicht alle leuchtenden Bildschirmfarben exakt drucken. Wer eine Datei für die Druckerei vorbereitet, muss seine RGB-Farben in CMYK überführen und mit leichten Abweichungen rechnen.
So rechnest du um
Die Umrechnung von Hand ist fehleranfällig und unnötig. Mit dem Farb-Konverter gibst du eine Farbe in einem beliebigen Format ein und erhältst live die Entsprechung in HEX, RGB, HSL und CMYK – inklusive Farbvorschau und WCAG-Kontrastanzeige. Das spart nicht nur Zeit, sondern verhindert auch Rundungsfehler, die beim manuellen Umrechnen schnell passieren. Praktisch ist außerdem die mitgelieferte 22-Farb-Palette als Ausgangspunkt für eigene Designs.
Wer Farben programmatisch verarbeitet, sollte wissen: HEX und RGB sind verlustfrei ineinander überführbar, HSL ebenfalls. Bei CMYK hingegen gibt es keine eindeutige mathematische Umrechnung, weil das Ergebnis vom Druckprofil abhängt – die gängigen Tools liefern hier eine brauchbare Näherung.
Welches Modell wann?
- HEX: Standard im Webdesign, kurz und in jedem CSS-Editor verstanden.
- RGB: Wenn du mit Transparenz (RGBA) arbeitest oder Farben in Skripten berechnest.
- HSL: Wenn du Farben systematisch variieren willst, etwa für Hover-Effekte oder ganze Farbreihen.
- CMYK: Ausschließlich für den Druck, nie für den Bildschirm.
Verwandte Werkzeuge
Sobald du eine Farbe gewählt hast, lohnt ein Blick auf die Lesbarkeit: Der Farbkontrast Checker sagt dir, ob deine Text- und Hintergrundfarbe die WCAG-Anforderungen erfüllt. Eine ganze abgestimmte Farbreihe erzeugst du mit dem Farbpalette Generator. Alle weiteren Helfer findest du in den kotsch.tech Webtools.
Häufige Fragen
Sind HEX und RGB dieselbe Farbe?
Ja, HEX ist nur eine andere Schreibweise von RGB. #3B82F6 und rgb(59, 130, 246) beschreiben exakt dieselbe Farbe, ohne jeden Unterschied.
Warum sehen meine Farben im Druck anders aus?
Weil Bildschirme additiv (RGB) und Drucker subtraktiv (CMYK) arbeiten. Manche leuchtenden Bildschirmfarben liegen außerhalb des druckbaren Bereichs und werden beim Konvertieren abgedunkelt oder verschoben.
Was bedeutet das vierte Zeichenpaar bei manchen HEX-Codes?
Ein achtstelliger HEX-Code wie #3B82F6CC enthält am Ende den Alpha-Wert, also die Transparenz. Die ersten sechs Stellen sind die Farbe, die letzten beiden die Deckkraft.