Hex, RGB, HSL und CMYK: Farbcodes richtig erklärt
Vier Schreibweisen für dieselbe Farbe – und die eine, die den Aufbau einer Palette leicht macht. Wie Sie einen Hex-Code mit bloßem Auge lesen, warum CMYK Ihren Bildschirm nicht erreicht und was Kontrast wirklich verlangt.
Aktualisiert am 22. August 20267 Min. Lesezeit
Hex, RGB, HSL und CMYK sind vier Schreibweisen für dieselbe Sache, so wie ein Halb, 0,5 und 50 % drei Schreibweisen einer einzigen Größe sind. Die Umrechnung zwischen den ersten dreien ist exakte Arithmetik, bei der nichts verloren geht. Das Interessante ist nicht die Umrechnung – es ist, dass eines dieser Modelle den Entwurf einer Palette beinahe mechanisch macht, und dass die meisten es nie benutzen, weil Hex-Codes das Erste waren, was man ihnen in die Hand gedrückt hat.
Die vier Schreibweisen
| Schreibweise | Beispiel | Was sie aussagt | Wo Sie ihr begegnen |
|---|---|---|---|
| Hex | #3B82F6 | Rot, Grün und Blau zur Basis 16 | CSS, Designwerkzeuge, Markenrichtlinien |
| RGB | rgb(59, 130, 246) | Dieselben drei Zahlen, 0–255 | CSS, Bildbearbeitung, Code |
| HSL | hsl(217, 91%, 60%) | Farbton, Sättigung, Helligkeit | Palettenentwurf, Theming |
| CMYK | 76, 47, 0, 4 | Farbanteile für vier Druckplatten | Druck, und nur Druck |
Hex und RGB sind dieselbe Information in zwei Schreibweisen. Ein Hex-Code besteht aus sechs Ziffern in drei Paaren – Rot, Grün, Blau –, jedes Paar eine Zahl von 00 bis FF, also 0 bis 255 im gewohnten Zählen. #3B82F6 ist somit Rot 3B (59), Grün 82 (130), Blau F6 (246). Der Hex-zu-RGB-Konverter erledigt das sofort, aber die Struktur zu kennen lohnt sich, weil Sie einen Code damit näherungsweise mit bloßem Auge lesen können.
Dreistellige Hex-Codes sind eine Kurzform, bei der jede Ziffer verdoppelt wird: #F60 bedeutet #FF6600. Ein achtstelliger Code ergänzt ein viertes Paar für die Deckkraft, #3B82F680 ist also dasselbe Blau mit 50 % Deckkraft. Beides kommt in echten Stylesheets vor und verwirrt, wer sechs Ziffern erwartet.
Warum HSL das lernenswerte Modell ist
RGB beschreibt Farbe so, wie ein Bildschirm sie erzeugt – drei Lichter in drei Intensitäten –, also die Hardware und nicht das, was Sie sehen. Für Designentscheidungen ist es nahezu nutzlos. Verlangen Sie eine etwas dunklere Fassung von #3B82F6, und RGB liefert keine naheliegende Antwort. Fragen Sie, welche von zwei Farben gesättigter ist, und Sie müssen rechnen.
HSL beschreibt Farbe so, wie Menschen über sie sprechen. Der Farbton ist die Position auf dem Farbkreis von 0 bis 360 Grad: Rot bei 0, Grün bei 120, Blau bei 240. Die Sättigung reicht von 0 % (Grau) bis 100 % (kräftig). Die Helligkeit reicht von 0 % (Schwarz) über 50 % (die reine Farbe) bis 100 % (Weiß). Jedes ist ein eigener Regler, und jeder Regler tut genau eine Sache.
- Ein dunklerer Ton derselben Farbe. Farbton und Sättigung behalten, Helligkeit senken. Aus
hsl(217, 91%, 60%)wirdhsl(217, 91%, 45%)– ein Hover-Zustand, erledigt. - Eine gedämpfte Variante für Hintergründe. Farbton und Helligkeit behalten, Sättigung auf 15 % senken. Sie wird weiterhin als Teil derselben Familie gelesen.
- Ein komplementärer Akzent. Addieren Sie 180 zum Farbton. Addieren Sie 30 für einen Nachbarn, der harmoniert statt zu kontrastieren.
- Eine ganze Tonwertleiter für ein Designsystem. Ein Farbton, eine Sättigung, Helligkeiten von 95, 90, 80, 65, 50, 40, 30, 20. Das sind acht Stufen aus einer einzigen Entscheidung.
- Eine Palette, die zusammenhält. Wählen Sie drei oder vier gleichmäßig auf dem Farbkreis verteilte Töne und halten Sie Sättigung und Helligkeit konstant. So gewählte Farben passen von selbst zusammen.
Nichts davon steht in Hex oder RGB ohne Umrechnung zur Verfügung, und das ist das praktische Argument, Ihre Markenfarbe einmal durch den RGB-zu-HSL-Konverter zu schicken und in diesem Raum zu denken. Der Palettengenerator wendet dieselbe Logik der Farbtondrehung an — in einem wahrnehmungsgerechten Farbraum, sodass die Helligkeit wirklich gleich bleibt —, wenn Sie lieber vom Ergebnis als von der Rechnung ausgehen.
Hex, RGB, HSL und CMYK in jede Richtung – auf Ihrem Gerät umgerechnet, ohne dass etwas irgendwohin gesendet wird.
Farbcode umrechnenCMYK ist eine andere Art von Umrechnung
Die ersten drei Schreibweisen sind austauschbare Beschreibungen derselben Sache. CMYK nicht – und hier geht Farbe tatsächlich verloren, statt bloß neu notiert zu werden. RGB ist additiv: Ein Bildschirm strahlt rotes, grünes und blaues Licht ab, und alle drei bei voller Stärke ergeben Weiß. CMYK ist subtraktiv: Cyan, Magenta, Gelb und Schwarz schlucken Licht vom weißen Papier, und mehr Farbe heißt dunkler.
Die Folge: Die Menge der Farben, die Druckfarbe erzeugen kann, ist kleiner als die, die ein Bildschirm abstrahlen kann – und die Lücke ist genau dort am größten, wo Gestaltende gern arbeiten. Kräftige Blautöne, elektrisches Grün, glühendes Orange und alles Neonartige existieren am Bildschirm und haben keine Entsprechung in Druckfarbe. Eine Umrechnung muss die nächstliegende druckbare Farbe einsetzen, und auf Papier wirkt das flacher als das, was Sie am Monitor freigegeben haben.
| Farbe | Am Bildschirm | In CMYK gedruckt |
|---|---|---|
Reines Blau #0000FF | Elektrisch, gesättigt | Deutlich stumpfer und violettstichiger |
Leuchtendes Grün #00FF00 | Kräftig | Erheblich dunkler und grauer |
| Neon- und Leuchtfarben | Glühend | Unerreichbar ohne Sonderfarbe |
| Tiefes Schwarz für Text | Satt | In Ordnung – nutzen Sie bei großen Flächen Tiefschwarz |
| Hauttöne, Erdtöne, Pastelltöne | Normal | Geben sehr gut wieder |
Daraus folgen zwei praktische Gewohnheiten. Prüfen Sie Ihre wichtigsten Markenfarben im RGB-zu-CMYK-Konverter, bevor Sie sich für Gedrucktes darauf festlegen – so entdecken Sie ein Farbraumproblem in der Entwurfsphase und nicht beim Andruck. Und verwenden Sie für große schwarze Flächen kein reines Schwarz einer Platte: Ein Tiefschwarz mit etwas Cyan, Magenta und Gelb vermeidet das ausgewaschene Grau, das einfaches Schwarz auf großer Fläche erzeugt.
Farben aus einem Bild holen
Oft existiert die gewünschte Farbe bereits – in einem Foto, in einem Bildschirmfoto der Website eines Mitbewerbers oder in einem Logo, das Ihnen jemand als PNG ohne jede Markenrichtlinie geschickt hat. Der Palettengenerator hat eine Pipette, die den exakten Wert jedes Pixels eines geöffneten Bildes liest; fügen Sie diesen Code in die Farbpipette ein, und Sie erhalten alle vier Schreibweisen auf einmal.
Zwei Vorbehalte beim Aufnehmen aus Fotos. JPEG-Kompression verändert Farbe subtil, besonders an Kanten und in gleichmäßigen Flächen – das aufgenommene Pixel kann also ein Kompressionsartefakt sein statt der wahren Farbe; nehmen Sie aus der Mitte einer großen einheitlichen Fläche auf, nicht nahe einer Grenze. Und ein Foto trägt die Beleuchtung, unter der es entstand: Ein Markenrot, bei warmem Innenlicht fotografiert, wird als Orange aufgenommen. Für ein Logo bitten Sie um die Vektordatei oder den tatsächlichen Hex-Code; die Pipette ist für den Fall, dass es nichts Besseres gibt.
Kontrast und die Zahlen, auf die es ankommt
Welche Schreibweise Sie auch nutzen, Farbentscheidungen sind durch Lesbarkeit begrenzt. Die Barrierefreiheitsrichtlinien drücken das als Kontrastverhältnis zwischen Text und Hintergrund aus: mindestens 4,5:1 für normalen Fließtext und 3:1 für großen Text – etwa 24 px, oder 19 px fett – sowie für die sichtbaren Begrenzungen von Bedienelementen wie Schaltflächen und Formularfeldern.
HSL hilft hier nur als grobe Orientierung, denn die Berechnung beruht auf der relativen Leuchtdichte – wie hell eine Farbe tatsächlich wirkt – und nicht auf der HSL-Helligkeit. Bei gleicher HSL-Helligkeit ist Gelb weit heller als Blau: #FFFF00 auf #0000FF ergibt etwa 8:1. Und zwei voll gesättigte Farben gleicher Helligkeit – ein reines Rot und ein reines Grün bei 50 % – wirken heftig verschieden, erreichen aber nur etwa 2,9:1, was selbst das Minimum von 3:1 verfehlt und für Menschen mit Rot-Grün-Sehschwäche noch schwerer zu lesen ist. Dieser eine Fehler erklärt einen guten Teil unzugänglicher Oberflächen; das tatsächliche Verhältnis zu prüfen, statt sich auf einen Farbtonunterschied zu verlassen, verhindert ihn.
Häufige Fragen
Wie rechne ich einen Hex-Code in RGB um?
Teilen Sie die sechs Ziffern in drei Paare und lesen Sie jedes als Zahl zur Basis 16 von 00 bis FF, also 0 bis 255. `#3B82F6` ist somit Rot 59, Grün 130, Blau 246. Ein dreistelliger Code wie `#F60` ist die Kurzform von `#FF6600`, jede Ziffer verdoppelt, und ein achtstelliger Code ergänzt ein viertes Paar für die Alpha-Transparenz.
Ist HSL besser als RGB?
Um einem Bildschirm eine Farbe zu beschreiben, sind beide gleichwertig – jeder HSL-Wert entspricht genau einem RGB-Wert. Für Designentscheidungen ist HSL weit besser, weil es Farbton, Sättigung und Helligkeit in unabhängige Regler trennt: Dunklere Töne, gedämpfte Varianten und passende Paletten werden damit zur Änderung einer Zahl statt zum Raten an dreien.
Warum sehen meine Farben im Druck anders aus?
Bildschirme strahlen Licht ab, Drucker schlucken es, und Druckfarbe erreicht schlicht einige Farben nicht, die ein Bildschirm erzeugen kann – kräftige Blautöne, leuchtendes Grün und alles Neonartige besonders. Die Umrechnung setzt die nächstliegende druckbare Farbe ein, was stumpfer wirkt. Wichtige Farben vor der Festlegung in CMYK zu prüfen erspart die Überraschung beim Andruck.
Welches Kontrastverhältnis brauche ich für lesbaren Text?
Mindestens 4,5:1 zwischen Text und Hintergrund für gewöhnlichen Fließtext und 3:1 für großen Text von etwa 24 px oder 19 px fett sowie für die Begrenzungen interaktiver Bedienelemente. Getrieben wird diese Zahl von der relativen Leuchtdichte – wie hell jede Farbe tatsächlich wirkt –, zwei Farben mit verschiedenen Farbtönen, aber ähnlicher Helligkeitswirkung fallen also durch, so unterschiedlich sie auch aussehen. Die HSL-Helligkeit ist nur eine grobe Orientierung: Ein reines Rot und ein reines Grün haben beide 50 % Helligkeit und erreichen doch nur etwa 2,9:1.