RGB reicht nicht: HSL, CMYK und OKLCH – Farbnotationen im Überblick

Im vorherigen Beitrag, Wie Computer Farben erzeugen: RGB, HEX und Binärzahlen erklärt, haben wir gesehen, dass eine Farbe nur drei Zahlen ist — Rot, Grün, Blau, jeweils 0–255. Bildschirme kommen damit bestens zurecht. Doch sobald ein Mensch mit Farbe arbeitet, stößt RGB schnell an seine Grenzen.

RGB ist praktisch, aber nicht intuitiv

„Etwas helleres Rot.” Wie setzt man das in RGB um? Alle drei Kanäle müssen gleichzeitig leicht angehoben werden. „Nur die Sättigung leicht reduzieren” – aus reinen RGB-Werten ist nicht ersichtlich, welcher Kanal geändert werden muss. „Genau diese Farbe auf Papier drucken” – mit RGB ist das schlicht nicht möglich.

Andere Farbnotationen entstanden genau, um diese Probleme zu lösen.

HSL — die Denkweise des Menschen

HSL beschreibt Farben über drei Größen: Farbton · Sättigung · Helligkeit. hsl(14, 100%, 60%) bezeichnet dieselbe Farbe wie #FF5733, macht aber sofort deutlich, was welchen Wert beeinflusst.

Wenn RGB die Sprache des Computers ist, ist HSL die Sprache des Designers. Farben lassen sich gezielt nach dem verändern, was man anpassen möchte.

Hue — der Farbton als 360°-Kreis

Der Farbton dreht sich wie eine Uhr einmal im Kreis – von 0° bis 360°. 0° und 360° bezeichnen dasselbe Rot.

Saturation — die Sättigung bestimmt die Intensität

Wird die Sättigung bei gleichem Farbton reduziert, nähert sich die Farbe schrittweise einem Grau an.

Lightness — Helligkeit von Schwarz bis Weiß

L = 0% ergibt immer Schwarz, L = 100% immer Weiß. 50% entspricht der „natürlichen” Helligkeit der Farbe.

Der eigentliche Nutzen von HSL — Paletten erstellen

Hält man den Farbton (Hue) fest und variiert nur L, entsteht eine harmonisch abgestimmte Farbgruppe. Für dasselbe Ergebnis in RGB müsste man alle 9 Felder manuell berechnen; in HSL genügt es, L schrittweise von 12% auf 92% zu ändern.

Beide Paletten lassen sich jeweils mit einer einzigen Regel definieren.

:root {
  --terra-100: hsl(14 60% 92%);
  --terra-200: hsl(14 60% 82%);
  --terra-300: hsl(14 60% 72%);
  /* ... L um je 10 ändern, fertig */
}

Hier entfaltet HSL seinen größten Nutzen beim Aufbau von Design-Systemen.

CMYK — die Sprache der Tinte

Für Farbe auf Papier statt auf einem Bildschirm ist ein vollständig anderes System nötig. CMYK beschreibt die Anteile der vier Druckfarben in einer Druckerei.

Warum steht Schwarz als „K” und nicht als „B”? B würde mit Blue verwechselt. Das K stammt aus dem Druckfachbegriff „Key plate” – die Grundplatte, an der alle anderen Druckfarben ausgerichtet werden.

Licht wird durch Addition heller, Tinte durch Addition dunkler

Der wichtigste Unterschied zwischen RGB und CMYK liegt in der Mischungsart.

Rote Tinte erscheint rot, weil sie alles andere absorbiert und nur Rot reflektiert. Tinte entzieht dem Licht Farbanteile. Deshalb wird die Mischung mit mehr Tinte immer dunkler. Theoretisch sollte CMY zusammengemischt Schwarz ergeben – in der Praxis entsteht ein trübes Braun. Daher gibt es eigene schwarze Tinte (K).

Wo wird CMYK eingesetzt?

Wer digitale Designs erstellt, kommt kaum je mit CMYK in Berührung. Es erscheint nur beim Drucken auf Papier.

• Beim Einreichen von Druckdaten — Visitenkarten, Poster, Bücher, Verpackungen. Druckereien konvertieren RGB-Dateien in CMYK.
• In Photoshop / Illustrator für Druckprojekte — der Farbmodus wird von Anfang an auf CMYK gesetzt.
• Brand Guidelines — HEX für den Bildschirm und CMYK für den Druck werden gemeinsam dokumentiert, damit die Markenfarbe auf beiden Medien ähnlich wirkt.

Warum Bildschirmfarben und Druckfarben abweichen — Gamut

Der Farbraum des Bildschirms (RGB-Gamut) und der Farbraum der Drucktinte (CMYK-Gamut) stimmen nicht überein. Strahlendes Neonpink auf dem Bildschirm lässt sich nicht in gleicher Intensität drucken – es liegt außerhalb dessen, was Tinte darstellen kann.

Deshalb wählen Druckdesigner nur Farben innerhalb des CMYK-Gamuts. Wer ein RGB-Design unverändert druckt, erlebt häufig, dass die Farben deutlich matter wirken.

So werden CMYK-Werte angegeben

Für jede Tinte wird der Prozentsatz des Auftrags angegeben. 0% bedeutet kein Auftrag, 100% bedeutet volle Deckkraft.

Reines K 100% ergibt ein trübes, graunahes Schwarz. Deshalb mischen Druckereien CMY dazu, um ein tieferes Schwarz zu erzielen.

OKLCH — Koordinaten für Menschen

Dieses Farbmodell hat sich in den 2020er-Jahren etabliert. Das Schlüsselwort ist: „natürlich für das menschliche Auge.”

Die drei Koordinaten klingen ähnlich wie bei HSL:

• L — Lightness (Helligkeit, 0–1)
• C — Chroma (Sättigung, 0–ca. 0,4)
• H — Hue (Farbton, 0–360°)

HSL hat jedoch ein verstecktes Problem: Bei gleichem L = 50% empfindet das menschliche Auge die Helligkeit der Farben völlig unterschiedlich. Ein direkter Vergleich macht das deutlich.

Kurz zusammengefasst: RGB und HSL sind Koordinaten der Maschine. OKLCH sind Koordinaten des Menschen.

Die Rolle von L, C und H

Hier wird gezeigt, was passiert, wenn bei derselben Farbe nur eine Koordinate verändert wird.

Einsatzbereiche

• Gleichmäßige Helligkeitspalette — wenn 8 Kategorie-Farben dieselbe wahrgenommene Helligkeit haben sollen
• Automatische Dark/Light-Mode-Umwandlung — L-Wert einfach invertieren, und ein natürliches dunkles Theme entsteht
• Barrierefreiheit — der Helligkeitsunterschied zwischen Text und Hintergrund lässt sich präzise vorhersagen
• Verläufe — natürlicher Übergang ohne grauen Streifen in der Mitte

Seit CSS Color Level 4 offiziell angenommen und in modernen Browsern direkt nutzbar.

.btn { background: oklch(67% 0.18 30); }       /* Orange */
.btn:hover { background: oklch(60% 0.18 30); } /* L um 7 senken → exakt so viel dunkler */

Was wann verwenden

Für die meisten digitalen Projekte reicht RGB/HEX. HSL lohnt sich beim Erstellen von Paletten, und OKLCH ist eine große Hilfe beim Design für Dark/Light-Mode.

Farben mit fns verwalten

Wer weiß, dass Farbe eine Zahl ist, will häufig verwendete Farben jederzeit griffbereit haben. fns bündelt das Aufnehmen, Speichern und Abrufen von Farben hinter einer einzigen Taste.

Eyedropper: Farben von überall auf dem Bildschirm — ⌘+Shift+K

Der Eyedropper erfasst die exakte Farbe jedes beliebigen Pixels auf dem Bildschirm – wie ein systemweiter Farbwähler, der nicht auf Figma oder Photoshop beschränkt ist.

Mit ⌘+Shift+K öffnet sich der fns-Eyedropper von überall aus. Ein Pixel im Design-Entwurf, ein Bereich in einem Foto, die Hintergrundfarbe einer anderen App – beim Klicken wird die Farbe dieser Stelle exakt erfasst.

• Jeder Klick speichert die Farbe automatisch in die Zwischenablage. Ein separater Kopiervorgang ist nicht nötig.
• Im Eyedropper-Widget lässt sich wählen, in welchem Format (RGB / HEX / HSL / CMYK / OKLCH) die Farbe in die Zwischenablage gelangt.
• Eine visuelle Vorschau der aufgenommenen Farbe und die nächste Systemfarbe werden ebenfalls angezeigt.

Eyedropper → automatisch in Zwischenablage → aus dem Zwischenablagen-Picker abrufen – der Arbeitsfluss bleibt unterbrechungsfrei. Kein separates Öffnen wie beim Mac Digital Color Meter, kein manuelles Kopieren bei jedem Klick.

Die Zwischenablage erkennt Farben automatisch

Der Zwischenablageverlauf von fns erkennt automatisch, ob ein kopierter Text ein Farbcode ist – unabhängig vom Format.

Beim Abrufen einer gespeicherten Farbe aus dem Verlauf ist es schwer, allein anhand des Textes zu erinnern, welche Farbe es war. fns zeigt neben jedem Eintrag einen kleinen Farbchip, sodass die Farbe sofort erkennbar ist.

Nur Farben anzeigen

Mit einer Taste lassen sich im Zwischenablageverlauf ausschließlich Farbcodes filtern. Wer während der Designarbeit nur die zuletzt verwendeten Farben sehen möchte, muss nicht mehr zwischen Texten, URLs und Code suchen.

• Im selben Picker Filterbegriff wie color: eingeben → nur Farbeinträge werden angezeigt
• Suche nach Farbnamen — „blue”, „red” filtert nur Farben dieser Kategorie heraus
• Ähnliche Farben werden visuell gruppiert sortiert

Eine Farbe in ein anderes Format umwandeln

Dieselbe Farbe lässt sich in einer anderen Notation abrufen. Wer in Figma #FF5733 kopiert und es als rgb(...) in CSS einfügen möchte, wählt den Eintrag im fns-Zwischenablagen-Picker und drückt einmal eine Taste – die Umwandlung erfolgt automatisch.

Beim Wechsel zwischen Figma (HSB) und CSS (HSL/HEX/OKLCH) muss kein Konverter mehr geöffnet werden.

Texterweiterung und Bündeln

Häufig verwendete Markenfarben werden als Textkürzel gespeichert.

Das Kürzel funktioniert überall gleich – im CSS-Eingabefeld, in Figma, in Slack-Nachrichten, im Code-Editor. Die Zeit für das Nachschlagen und Kopieren aus dem Brand Guide entfällt.

Probieren Sie fns aus und reduzieren Sie die Zeit, die Sie bisher mit dem Öffnen von Konvertern und dem Umformatieren von Farbcodes verbracht haben.

Wer wissen möchte, woher diese Zahlen überhaupt stammen — die Grundlagen der drei RGB-Kanäle, Binärzahlen und HEX-Notation — findet den Einstieg in Wie Computer Farben erzeugen: RGB, HEX und Binärzahlen erklärt.