Kurz gesagt: HEX, RGB und HSL beschreiben alle dieselben Farben, nur anders. HEX und RGB sind zwei Notationen derselben Rot-Grün-Blau-Werte; HSL drückt sie als Farbton, Sättigung und Helligkeit aus, viel leichter von Hand anzupassen. Zu wissen, welches Format man greift, spart beim Abgleichen oder Anpassen von Farben viel Raten.

Eine Farbe im Web ist letztlich drei Kanäle — Rot, Grün und Blau — doch wie man diese Kanäle schreibt, ändert, wie leicht sie sich durchdenken lassen.

HEX, RGB und HSL: Farben umrechnen ohne Raten

HEX und RGB: dasselbe, zweimal geschrieben

RGB nennt die drei Kanäle direkt: rgb(37, 99, 235). HEX packt dieselben Werte in eine Hex-Zeichenkette: #2563EB, wobei 25, 63 und EB die Rot-, Grün- und Blau-Bytes sind. Sie sind austauschbar — HEX ist kompakt und in Design-Tools verbreitet, RGB ist im Code bequem, weil man jeden Kanal berechnen kann. Keins ist „genauer“; es sind zwei Schreibweisen einer Farbe.

HSL: das Format zum Feinjustieren

HSL beschreibt eine Farbe als Farbton (Position auf dem Farbkreis, 0–360°), Sättigung (wie kräftig, 0–100 %) und Helligkeit (wie hell, 0–100 %). Das ist das Format, wenn man eine Farbe anpassen statt ersetzen will: Helligkeit für einen Hover-Zustand senken, Sättigung für eine gedämpfte Variante reduzieren oder den Farbton für eine Komplementärfarbe verschieben. Dieselben Änderungen in HEX heißen, Byte-Werte zu raten.

Alpha und 8-stelliges HEX

Transparenz drückt man mit einem Alphakanal aus: rgba() und hsla() fügen einen vierten Wert von 0 (transparent) bis 1 (deckend) hinzu. Modernes CSS unterstützt auch 8-stelliges HEX, wo die letzten zwei Zeichen Alpha kodieren — #2563EB80 ist dasselbe Blau bei etwa 50 % Deckkraft.

CMYK ist eine andere Welt

HEX, RGB und HSL sind alle Bildschirm-Farbmodelle (additives Licht). CMYK ist für den Druck (subtraktive Farbe). Eine Umrechnung dazwischen ist immer näherungsweise, weil beide nicht exakt denselben Farbraum abbilden — behandeln Sie eine Bildschirm-zu-Druck-Umrechnung als Ausgangspunkt zum Prüfen, nicht als exakte Übereinstimmung.

Ein praktischer Ablauf

  1. Fügen Sie die Ausgangsfarbe — in jedem Format — in den Farbkonverter ein, um alle Formate auf einmal zu sehen.
  2. Wechseln Sie zu HSL, um Varianten zu bauen: Helligkeit für Zustände, Sättigung für gedämpfte Töne.
  3. Fügen Sie Alpha mit rgba()/hsla() oder 8-stelligem HEX hinzu, wo Sie Transparenz brauchen.
  4. Nutzen Sie die Verlaufsvorschau, um ein fertiges CSS-Snippet für zwei oder mehr Farben zu erzeugen.

Wenn Sie eine Palette im Stapel bearbeiten, wandeln Sie mehrere Farben auf einmal um (durch Kommas oder Zeilenumbrüche getrennt) und halten Sie die Ergebnisse mit dem Zeichenzähler bei Ihren Notizen.

Häufige Fehler

  • Farben in HEX bearbeiten, wo HSL die Anpassung offensichtlich machte.
  • Von einer CMYK-Umrechnung eine exakte Bildschirmübereinstimmung erwarten.
  • Den Alphakanal vergessen und eine deckende Farbe bekommen, wo Sie Transparenz wollten.
  • Formate uneinheitlich über ein Stylesheet mischen.