Chroma

Chroma ist die Farbattribut-Achse, die erfasst, “wie viel Farbe in der Farbe steckt”, unabhängig von der Helligkeit. Ein reines Rot und ein reines Rosa können ähnliche Farbtöne und Helligkeiten haben, aber sehr unterschiedliche Chromas – Rosa ist näher an Grau, Rot ist weiter von Grau entfernt.

Chroma wird manchmal mit Sättigung verwechselt. Die Unterscheidung:

• Chroma ist der absolute Abstand von der achromatischen (grauen) Achse bei einer gegebenen Helligkeit, gemessen im gewählten Farbraum (OKLab, CIELAB usw.).
• Sättigung ist das Verhältnis von Chroma zu Helligkeit – ein relatives Maß.

Das zählt im Design, weil OKLCH (die moderne CSS-Farbfunktion) Chroma verwendet, nicht Sättigung. oklch(0.72 0.18 47) bedeutet Helligkeit 0,72, Chroma 0,18, Farbton 47°. Das alleinige Anpassen des Chroma hält Helligkeit und Farbton stabil; bei der Sättigung ändert das Anpassen eines Werts auch die wahrgenommene Helligkeit.

Das maximal erreichbare Chroma variiert mit Farbton und Helligkeit. In sRGB kann Gelb bei mittlerer Helligkeit mehr Chroma tragen als Blau bei gleicher Helligkeit – Gelb-Primärfarben liegen näher an der sRGB-Gamutgrenze. OKLCH-Werte, die den sRGB-Gamut überschreiten, werden auf die Grenze beschnitten, was die dargestellte Farbe manchmal unerwartet verschiebt. Für wahrnehmungskonsistentes Design über einen breiten Farbtonbereich wählen Sie einen Chroma-Wert (z. B. 0,12-0,15), der bei jedem benötigten Farbton erreichbar ist.

Durchgerechnetes Beispiel

Bauen Sie eine 9-stufige Grau-zu-Rot-Palette. In HSL könnten Sie bei hsl(0 0% 50%) beginnen und bei hsl(0 100% 50%) enden und die Sättigung linear skalieren. Die mittleren Stufen wirken bei Rot in Ordnung, aber derselbe Ansatz für Blau (hsl(240 0% 50%) → hsl(240 100% 50%)) erzeugt einen Mittelpunkt, der merklich dunkler aussieht als der rote Mittelpunkt – die HSL-Helligkeit ist nicht wahrnehmungsgleichförmig. In OKLCH erzeugt das Festhalten der Helligkeit bei 0,65 und das Skalieren des Chroma von 0 auf 0,18 neun Stufen, die in der wahrgenommenen Helligkeit über die Farbtöne hinweg übereinstimmen. Konkret: oklch(0.65 0.00 0), oklch(0.65 0.0225 0), …, oklch(0.65 0.18 0) liegen alle auf derselben wahrgenommenen Helligkeitslinie. Wiederholen Sie dieselbe Chroma-Rampe bei Farbton 240 (Blau) und die resultierende Blau-Skala wird die Rot-Skala Schritt für Schritt visuell parallel führen – mit HSL allein unmöglich zu erreichen.

Numerisch liegen OKLCH-Chroma-Werte für sRGB-Farben innerhalb des Gamuts ungefähr im Bereich 0 bis 0,37. Das Maximum ist farbton- und helligkeitsabhängig: bei L=0,6 hat das gesättigtste in sRGB erreichbare Rot ein Chroma um 0,25; das gesättigtste Gelb um 0,21; das gesättigtste Blau um 0,31. Die Kenntnis dieser Obergrenzen verhindert das Angeben unmöglicher Palettenwerte, die der Browser still beschneidet.

Wann und warum es zählt

Chroma zählt immer dann, wenn Sie Farben brauchen, die über Farbtöne hinweg konsistent aussehen – Designsysteme mit semantischen Farbskalen (red-50 bis red-900, blue-50 bis blue-900 usw.), Datenvisualisierungen mit kategorialen Paletten, die gleich gut lesbar sein müssen, und barrierebewusste UIs, deren Kontrastverhältnisse von der wahrgenommenen (nicht der rohen) Helligkeit abhängen. Die Tailwind-v4-Palette, Radix Colors und das IBM-Carbon-Designsystem veröffentlichen alle aus genau diesem Grund chroma-kontrollierte OKLCH-Rampen. Der zu vermeidende Fehler ist, “Sättigung” als Synonym für “Intensität” zu behandeln: Das Erhöhen der Sättigung in HSL zieht die Helligkeit mit, während das Erhöhen des Chroma in OKLCH das nicht tut. Für Datenvisualisierung lautet die praktische Regel, das maximale Chroma zu wählen, das bei jedem benötigten Farbton erreichbar ist (typischerweise um 0,10-0,13 für sRGB innerhalb des Gamuts über alle Farbtöne), dann das Chroma festzuhalten und für die Skalenschritte die Helligkeit zu variieren. Quelle: W3C CSS Color Module Level 4 — OKLab and OKLCH.

Warum OKLab/OKLCH HSL für ernsthafte Designarbeit ersetzt hat: HSL ist eine einfache algebraische Transformation von RGB – seine “Helligkeits”-Achse ist nicht wahrnehmungsgleichförmig. Zwei HSL-Farben mit identischen Helligkeitswerten können in der tatsächlichen Helligkeit sehr unterschiedlich aussehen; ein Gelb bei HSL-Helligkeit 50 % wirkt viel heller als ein Blau beim selben Wert. OKLab (Björn Ottosson, 2020) wurde gezielt so entworfen, dass die L-Achse der menschlichen Helligkeitswahrnehmung entspricht und die Chroma-Achse der wahrgenommenen Sättigung. Gleiche Schritte in OKLab wirken für das Auge wie gleiche Schritte. CSS Color Module Level 4 fügte aus diesem Grund die Funktionen oklab() und oklch() hinzu, und Designsysteme (Tailwind 4, Radix Colors) veröffentlichen zunehmend in OKLCH erzeugte Palettenskalen für garantierte wahrnehmungsbezogene Konsistenz. Verwandt: Chromatizität, sRGB, Gamut. Quelle: Björn Ottosson — A perceptual colour space for image processing (2020).