Warum gibt es überhaupt drei Notationen für dieselbe Farbe?

Jede Notation ist für einen anderen Zweck optimiert. Hex ist die kompakteste Schreibweise, sechs Zeichen reichen für 16,7 Millionen Farben, ideal für CSS, Design-Tools und Copy-Paste in Tickets. RGB ist die Hardware-Notation, weil Monitore aus roten, grünen und blauen Subpixeln aufgebaut sind und jeder dieser Kanäle direkt von einem 0-bis-255-Wert angesteuert wird. HSL ist die Mensch-Notation, weil sie Farbton, Sättigung und Helligkeit getrennt darstellt und dadurch intuitive Manipulationen erlaubt: Lightness erhöhen für eine hellere Variante, Hue verschieben für eine Komplementärfarbe. Alle drei beschreiben Punkte im sRGB-Farbraum, nur mit unterschiedlichen Achsen.

Was ist der Unterschied zwischen HSL und HSV?

HSL und HSV teilen den Hue (Farbton, 0 bis 360 Grad), unterscheiden sich aber in Sättigung und Helligkeit. Bei HSL ist die Lightness L bei 50 Prozent die reine Farbe; bei 0 Prozent Schwarz und 100 Prozent Weiß. Bei HSV ist der Value V bei 100 Prozent die hellste Variante eines Farbtons (also die reine Farbe), 0 Prozent ist Schwarz. Weiß erreicht man bei HSV nicht über V, sondern indem man die Saturation auf 0 setzt. CSS hat sich für HSL entschieden, weil es symmetrisch um die Lightness 50 organisiert ist und so für Skalen besser passt. HSV findet sich häufiger in Bildbearbeitungs-Tools wie Photoshop oder GIMP.

Was bedeuten die Werte HSL 350 89% 60% konkret?

350 Grad ist der Hue, also die Winkel-Position auf dem Farbkreis. 350 liegt knapp neben Rot bei 0 Grad und entspricht einem warmen Rose-Ton mit leichtem Pink-Stich. 89 Prozent Saturation bedeutet sehr gesättigt, also keine Verblassung Richtung Grau. 60 Prozent Lightness bedeutet mittelhell, leicht über der reinen Farbe bei 50 Prozent. Würde man die Lightness auf 30 setzen, käme ein dunkler Bordeauxton heraus; mit Lightness 90 ein helles Pastell-Rose. Saturation auf 0 ergäbe ein Grau bei der jeweiligen Lightness, unabhängig vom Hue. Diese drei Werte beschreiben unser Beispiel Rose Hex f43f5e.

Warum ist HSL nicht wahrnehmungslinear?

HSL ist ein einfacher mathematischer Umrechnungs-Trick aus den RGB-Werten, kein wahrnehmungsphysiologisches Modell. Konkret: zwei HSL-Farben mit gleicher Lightness werden nicht zwingend als gleich hell empfunden. Gelb bei Hue 60 Lightness 50 wirkt deutlich heller als Blau bei Hue 240 Lightness 50, obwohl der numerische L-Wert identisch ist. Der Grund liegt in der menschlichen Augenphysiologie: die M-Zapfen (Grün) haben die höchste Empfindlichkeit, deshalb wirkt Grün/Gelb heller als Rot oder Blau bei gleichem mathematischen Wert. Wer wahrnehmungsgleiche Skalen braucht, sollte OKLCH oder CIELAB verwenden, beschrieben im Ratgeber zu CIE-Farbräumen.

Welche Notation eignet sich für Print?

Keine der drei ist für Print gemacht. Hex, RGB und HSL beschreiben Farben im additiven sRGB-Farbraum, also für Bildschirme mit Lichtemission. Druck arbeitet subtraktiv mit den vier CMYK-Kanälen Cyan, Magenta, Gelb und Schwarz und einem viel kleineren Gamut. Eine Web-Farbe wie Hex f43f5e (Rose) ist im CMYK-Druck nicht exakt reproduzierbar, weil sie außerhalb des CMYK-Gamuts liegen kann. Für Print-Workflows wird die Farbe deshalb in einen Druck-Farbraum konvertiert, typischerweise per ICC-Profil (etwa FOGRA39 oder FOGRA51 für Coated-Paper). Für reine Bildschirm-Workflows reichen die drei Web-Notationen aber vollständig aus.

Hex, RGB, HSL: Konvertierung und Anwendung in Web und Print

Wer im Webdesign oder Code mit Farben arbeitet, begegnet drei Notationen ständig. Hex steht im Tailwind-Tooltip, RGB liegt in den Photoshop-Properties, HSL nutzt die hsl()-CSS-Funktion. Alle drei beschreiben dieselben Farben, nur mit unterschiedlichen Achsen. Wer die Umrechnungen versteht, kann zwischen den Notationen wechseln, ohne in Tools nachzuschauen, und versteht zugleich, was Algorithmen wie K-Means oder Hue-Rotation eigentlich am Farbraum tun.

Was die drei Notationen darstellen

Hex ist eine reine Schreibkonvention. Sechs hexadezimale Ziffern (0 bis 9 und A bis F) codieren drei Bytes: Byte 1 ist Rot, Byte 2 Grün, Byte 3 Blau. Jeder Byte-Wert geht von 00 bis FF, was dezimal 0 bis 255 entspricht. Aus #f43f5e ergibt sich Rot 244, Grün 63, Blau 94. Hex ist also nur eine kompakte RGB-Schreibweise, kein eigener Farbraum.

RGB ist die Hardware-Notation. Monitore haben rote, grüne und blaue Subpixel pro Bildpunkt. Eine RGB-Angabe wie rgb(244, 63, 94) steuert direkt diese drei Lichtquellen mit Intensität zwischen 0 (aus) und 255 (voll). Die Norm dahinter ist sRGB nach IEC 61966-2-1 aus dem Jahr 1996, definiert für Standardmonitore mit D65-Weißpunkt und Gamma 2.2.

HSL steht für Hue, Saturation, Lightness und ist eine Umrechnung aus den RGB-Werten in ein zylindrisches Koordinatensystem, das näher am menschlichen Farbverständnis ist. Hue ist der Farbton in Grad (0 bis 360), Saturation die Sättigung in Prozent (0 ist Grau, 100 ist reine Farbe), Lightness die Helligkeit in Prozent (0 ist Schwarz, 100 ist Weiß, 50 ist die reine Farbe).

Hex zu RGB: Lookup-Tabelle pro Byte

Die Konvertierung von Hex zu RGB ist trivial. Jedes Byte besteht aus zwei Hex-Ziffern. Die erste Ziffer ist der 16er-Multiplikator, die zweite der 1er-Wert. Beispiel f4: f hat dezimal den Wert 15, 4 hat den Wert 4. Ergebnis: 15 mal 16 plus 4 = 244.

Komplette Umrechnung für #f43f5e:

Hex-Byte	Hex-Ziffern	Berechnung	Dezimal
f4	f=15, 4=4	15·16 + 4	244
3f	3=3, f=15	3·16 + 15	63
5e	5=5, e=14	5·16 + 14	94

Resultat: rgb(244, 63, 94).

Rückrichtung: jeden Dezimalwert ganzzahlig durch 16 teilen ergibt die erste Ziffer, der Rest ergibt die zweite Ziffer. 244 dividiert durch 16 ist 15 Rest 4, also f4.

RGB zu HSL: Max/Min-Methode

Die RGB-zu-HSL-Umrechnung folgt einer festen Formel nach W3C CSS Color 4. Zuerst werden R, G, B durch 255 geteilt, sodass sie im Bereich 0 bis 1 liegen. Dann werden Max und Min der drei Werte bestimmt und ihre Differenz Delta berechnet.

R' = R / 255 = 244 / 255 = 0.957
G' = G / 255 =  63 / 255 = 0.247
B' = B / 255 =  94 / 255 = 0.369

Max = 0.957 (R')
Min = 0.247 (G')
Delta = Max - Min = 0.710

Lightness: L = (Max + Min) / 2 = (0.957 + 0.247) / 2 = 0.602 = 60 Prozent.

Saturation: hängt von L ab. Wenn L kleiner gleich 0.5: S = Delta / (Max + Min). Wenn L größer als 0.5: S = Delta / (2 - Max - Min). In unserem Fall L = 0.602 > 0.5, also:

S = 0.710 / (2 - 0.957 - 0.247) = 0.710 / 0.796 = 0.892 = 89 Prozent

Hue: berechnet sich je nachdem, welcher Kanal das Maximum stellt:

Max ist R: H = 60 · ((G’ - B’) / Delta) modulo 360
Max ist G: H = 60 · ((B’ - R’) / Delta) + 120
Max ist B: H = 60 · ((R’ - G’) / Delta) + 240

In unserem Beispiel ist Max = R, also:

H = 60 · ((0.247 - 0.369) / 0.710) modulo 360
  = 60 · (-0.122 / 0.710) modulo 360
  = 60 · (-0.172) modulo 360
  = -10.3 modulo 360
  = 349.7, gerundet 350 Grad

Resultat: hsl(350, 89%, 60%). Das ist die exakte Übersetzung von #f43f5e.

HSL zu RGB: Chroma und Modulo-12

Die Rückrichtung ist etwas aufwändiger. Modernes CSS Color 4 definiert sie über die Hilfsfunktion mit Modulo 12 und der maximalen Sättigung Chroma. Vereinfacht:

Chroma C = (1 - |2L - 1|) · S
X = C · (1 - |((H/60) modulo 2) - 1|)
m = L - C/2
Je nach Hue-Sextant (0 bis 60, 60 bis 120, etc.) werden R’, G’, B’ aus C, X und 0 zusammengestellt
R = (R’ + m) · 255, analog für G und B

Für die meisten Web-Entwickler reicht es, sich die Formel anzuschauen und auf die hsl()-CSS-Funktion zu vertrauen, die das automatisch im Browser tut.

Warum HSL nicht wahrnehmungslinear ist

HSL ist nur ein mathematischer Umrechnungs-Trick aus RGB, kein Wahrnehmungsmodell. Konkret: HSL Hue 60 (Gelb) bei Lightness 50 wirkt für das menschliche Auge deutlich heller als HSL Hue 240 (Blau) bei Lightness 50, obwohl die numerische Lightness gleich ist. Das liegt an der Photopisch-Empfindlichkeit des Auges, die im Grün-Gelb-Bereich (etwa 555 nm) ihr Maximum hat.

Beispiel: ein Text mit Hex #ffff00 (Gelb pur) auf weißem Hintergrund hat ein Kontrast-Verhältnis von etwa 1.07 zu 1 und ist kaum lesbar, während Blau #0000ff auf Weiß bei rund 8.6 zu 1 problemlos lesbar ist. Beide haben HSL Lightness 50, aber die wahrgenommene Helligkeit divergiert massiv.

Für wahrnehmungslineare Operationen (gleichmäßige Lightness-Skalen, Akzessibilitäts-Tests, Design-Tokens) hat sich OKLCH durchgesetzt, das von Björn Ottosson 2020 entwickelt und in CSS Color 4 standardisiert wurde. Tailwind v4 nutzt OKLCH seit 2024 als Default für alle Farbskalen.

Hex als 6-Zeichen-Schreibweise, RGB als drei Hardware-Kanäle und HSL als zylindrische Wahrnehmungs-Achsen für die gleiche Rose-Farbe.

Wann welche Notation gewinnt

Die drei Notationen haben jeweils klare Einsatzfelder:

Notation	Stärke	Typische Anwendung
Hex	Kompakt, kopier- und teilbar	CSS, Design-Files, Tickets, Docs
RGB	Direkt Hardware-nah, einfach für Code	Canvas-API, Image-Processing, Math
HSL	Algorithmus-freundlich, intuitive Korrekturen	Farbschema-Generierung, CSS-Variablen

Im praktischen Workflow nutzt man oft alle drei: Designer geben Hex an, der Generator wandelt zu HSL, um Schema-Sprünge zu berechnen, das Ergebnis kommt als Hex zurück in den Design-Token. Im Browser werden HSL-Werte über color-mix(), hsl() und CSS-Variablen direkt verwendet, ohne manuelle Umrechnung.

sRGB als gemeinsamer Boden

Alle drei Notationen beschreiben Punkte im sRGB-Farbraum nach IEC 61966-2-1. Das bedeutet, der maximale darstellbare Farbumfang ist auf den sRGB-Gamut beschränkt, etwa 35 Prozent des sichtbaren CIE 1931 xy-Spektrums. Wer breitere Gamuts braucht (Display-P3 für moderne iPhones, Rec.2020 für HDR-TVs), muss in den neuen CSS-Color-4-Funktionen color(display-p3 1 0 0) oder oklch() arbeiten, die nicht mehr in 0 bis 255 oder 0 bis 100 Prozent normiert sind, sondern in 0 bis 1 mit Out-of-Gamut-Toleranz.

Print versus Web

Hex, RGB und HSL sind reine Bildschirm-Notationen. Print arbeitet im subtraktiven CMYK-Modell mit Cyan, Magenta, Gelb und Schwarz, die sich auf Papier mischen und einen kleineren Farbumfang erlauben als sRGB. Eine helle Rose wie #f43f5e kann im Druck dumpfer wirken, weil sie an die Grenzen des CMYK-Gamuts stößt. Druckereien arbeiten dafür mit ICC-Profilen wie FOGRA39 oder FOGRA51, die das jeweilige Papier-Tinten-Setup farbgenau beschreiben. Eine Konvertierung Hex zu CMYK ohne ICC-Profil ist unzuverlässig, weil sie die Papierwirkung nicht berücksichtigt.

Drei-Ziffer-Hex und Alpha-Kanal

CSS akzeptiert nicht nur 6-stellige Hex-Codes, sondern auch 3-stellige als Kurzform. #f5e ist die Abkürzung für #ff55ee, weil jede Ziffer verdoppelt wird. Das funktioniert nur, wenn alle drei Bytes aus zwei identischen Ziffern bestehen. Die 3-Ziffer-Form ist platzsparend, aber stark begrenzt: es lassen sich nur 4096 Farben (16 hoch 3) statt der vollen 16,7 Millionen darstellen. Für Brand-Farben mit präzisen Werten ist die Kurzform meist nicht verwendbar.

Zusätzlich hat CSS seit dem Color Module Level 4 die 8-stellige Hex-Variante mit Alpha-Kanal eingeführt. #f43f5e80 codiert die Rose-Farbe mit 50 Prozent Transparenz, weil das siebte und achte Zeichen den Alpha-Wert von 00 (komplett transparent) bis FF (komplett opak) repräsentieren. Diese Notation ersetzt vielfach das frühere rgba()-Format. Im Browser-Support sind 8-stellige Hex-Codes seit Chrome 62 (2017), Firefox 49 (2016) und Safari 9.1 (2016) etabliert, praktisch also überall einsetzbar.

Gamma-Korrektur und lineares Licht

Eine technische Feinheit, die oft übersehen wird: die Werte 0 bis 255 in RGB sind nicht physikalisch linear, sondern gamma-codiert. Der Wert 128 ist nicht halb so hell wie 255, sondern wirkt für das Auge etwa halb so hell, was bedeutet, dass die physikalische Lichtintensität bei 128 nur etwa 22 Prozent von der bei 255 beträgt. Diese Gamma-Codierung folgt der sRGB-Spezifikation IEC 61966-2-1 und ist eine Anpassung an die menschliche Wahrnehmungsphysiologie: das Auge sieht im dunklen Bereich feinere Helligkeitsunterschiede als im hellen.

Für korrektes Mischen von Farben (etwa beim Gradient-Rendering oder beim Anti-Aliasing) müssen die sRGB-Werte deshalb zuerst linearisiert werden, dann gemischt, dann zurück in sRGB transformiert. Viele Browser machten das bis etwa 2020 nicht und produzierten dadurch dunkle, ungleichmäßige Gradienten zwischen komplementären Farben. CSS Color 4 führt mit den Interpolation-Hints (in oklch, in srgb-linear) explizite Kontrolle ein. Wer einen Gradient von Gelb zu Blau baut, sollte heute linear-gradient(to right in oklch, yellow, blue) schreiben, um den klassischen Schmutziggrau-Mittenfehler zu vermeiden.

Praktischer Workflow zwischen Tools

In der Praxis durchläuft eine Farbe mehrere Werkzeuge: Designer wählt sie in Figma als Hex, Entwickler kopiert sie als Hex in eine Tailwind-Config oder eine CSS-Variable, der Browser rendert sie nach sRGB. Wenn das Design-System auf OKLCH umgestellt wird, läuft die Konvertierung einmalig durch ein Skript: Hex einlesen, in lineares sRGB transformieren, dann nach OKLab über die Ottosson-Matrix, dann nach OKLCH per Polarkoordinaten. Das Ergebnis wird als CSS-Variable abgelegt, sodass das Theming-System mit OKLCH-Werten arbeiten kann. Ähnlich beim Tausch zwischen Bildbearbeitung und Code: Photoshop arbeitet intern oft in Adobe RGB oder ProPhoto RGB, exportiert aber als sRGB-JPG. Dieser Export ist eine Konvertierung mit Gamut-Mapping, die bei sehr satten Farben sichtbare Differenzen erzeugen kann. Wer farbgenau arbeitet, prüft Original und Export im selben Farbprofil. Für klassische Web-Workflows ist das selten ein Problem, im Print-Workflow umso mehr.

Welche Notation wann gewinnt

Hex zum Bezeichnen, RGB zum Rechnen, HSL zum Manipulieren. Wer Algorithmen wie Komplementärfarbe oder Lightness-Variation umsetzt, denkt in HSL. Wer Pixel aus einem Canvas liest, bekommt RGB. Wer eine Farbe per Slack teilt, schickt Hex. Der Farbpaletten-Generator auf farbpalette-generieren.de zeigt alle drei parallel an, damit du in jedem Tool weiterarbeiten kannst, ohne neu zu konvertieren. Und wenn du wahrnehmungslineare Operationen brauchst, ist OKLCH der nächste logische Schritt.

Wenn dir ein Fehler auffällt oder eine Quelle veraltet ist, schreib an info@akara-solutions.de, bestätigte Korrekturen dokumentieren wir auf /korrekturen/.