OKLCH und moderne CSS-Farben – Warum Ihr Farbschema in manchen Browsern falsch aussieht

Sie wählen einen blauen Farbton für Ihre Haupttaste. Er sieht in Ihrem Browser gut aus. Sie öffnen die Staging-Version auf einem neuen MacBook Pro und es sieht… in Ordnung – nur ein wenig flach. Ihr Designer sendet ein Screenshot von ihrem iPhone und die gleiche Taste sieht deutlich lebendiger aus. Gleiches Hex-Code. Unterschiedliche Anzeige.

Das ist der P3-Abstand. Und es ist tatsächlich die wenigste interessante Sache, warum das CSS-Farbsystem, das Sie bisher verwendet haben, Ihnen nicht mehr gereicht hat. Das größere Problem liegt jedoch in der Mathematik hinter HSL.

Die sRGB-Decke

Jeder Hex-Farbe und rgb() Wert, den Sie jemals geschrieben haben, befindet sich im sRGB-Farbraum – einem Standard, der 1996 für CRT-Displays eingeführt wurde. sRGB umfasst etwa 35% der Farben, die dem menschlichen Auge sichtbar sind. Der P3-Farbraum, der seit 2017 bei jedem iPhone und seit 2016 bei den meisten MacBooks verwendet wird, umfasst etwa 45%.

Wenn Sie schreiben #3b82f6, wird diese Farbe auf sRGB begrenzt. Auf einem P3-Display könnte der Browser theoretisch eine intensivere Blaue darstellen – aber Ihr CSS bittet nicht darum. Sie lassen die Anzeigefähigkeiten standardmäßig ungenutzt bleiben.

Um P3-Farben direkt zu verwenden, würden Sie color(display-p3 0.2 0.4 0.9)verwenden. Das funktioniert. Aber es ist nicht der Grund, warum OKLCH wichtig ist. Das größere Problem liegt in der grundlegenden Annahme von HSL.

HSLs Helligkeit ist eine Lüge

HSL war ein echter Fortschritt gegenüber Hex. Hue, Saturation, Lightness – konzeptionell sinnvoll, bearbeitbar durch Menschen. Das Problem: Das „L“ bedeutet nicht, was Sie denken.

Setzen Sie Gelb bei hsl(60, 100%, 50%) und Blau bei hsl(240, 100%, 50%) seitlich nebeneinander. Beide liegen genau bei 50% Helligkeit.

.yellow { background: hsl(60, 100%, 50%); }
.blue   { background: hsl(240, 100%, 50%); }

Gelb sieht fast weiß aus. Blau sieht mittel dunkel aus. Sie sind nicht einmal annähernd gleich hell. Dies ist die subjektive Nicht-Gleichheit von HSL – die L-Achse entspricht nicht dem, wie das menschliche Auge Helligkeit wahrnimmt.

Dies führt zu einem echten Wartungsproblem beim Erstellen von Farbskalen. Wenn Sie eine 9-Schritt-Skala durch Schrittweise Erhöhung der L-Werte in HSL generieren, sehen Ihre Gelbe und Cyan-Abstufungen übermäßig hell aus, während Ihre Blauen und Lila-Abstufungen verschwommen aussehen. Sie müssen die Werte manuell anpassen, was den gesamten Sinn eines systematischen Ansatzes zerstört.

OKLCH: konzipiert für das menschliche Sehen

OKLCH wurde 2020 von Björn Ottosson entwickelt. Es basiert auf CIELAB (einem subjektiven Farbraum aus den 1970er Jahren), korrigiert jedoch bekannte Hueschiebungen – insbesondere das Problem mit der Farbveränderung, bei dem die Anpassung des Chroma sichtbar die wahrgenommene Farbe verändert.

Die drei Kanäle:

• L (Helligkeit) — von 0 bis 1, subjektiv gleichmäßig. L 0.5 in Gelb sieht genauso hell aus wie L 0.5 in Blau. Eigentlich.
• C (Chroma) — beginnt bei 0 (Grau), steigt bis zu etwa 0.3–0.4 für hochsättigte Farben. Keine feste Obergrenze – die Obergrenze variiert je nach Farbe und Zielgamut.
• H (Farbton) — von 0 bis 360 Grad, etwa vergleichbar mit dem HSL-Hue.

Hier ist Tailwind Blue-500 in beiden Systemen:

/* sRGB hex */
background: #3b82f6;

/* OKLCH equivalent — same color, different notation */
background: oklch(0.623 0.214 259.1);

/* Push chroma past sRGB — more vivid blue on P3 displays, clips gracefully on sRGB */
background: oklch(0.623 0.27 259.1);

Dieser letzte Wert fällt außerhalb des sRGB-Gamuts. Browser auf P3-fähigen Anzeigen rendern die lebendigere Version; ältere Browser klappen auf die nächstgelegene sRGB-Äquivalenz. Progressive Erweiterung mit null Aufwand.

color-mix() und warum der Farbraum das Mischen verändert

color-mix() wurde in Chrome 111, Firefox 113 und Safari 16.2 eingeführt. Es mischt zwei Farben in einem Verhältnis – einfach genug. Aber der Farbraum, den Sie angeben, verändert das Ergebnis erheblich.

/* Mixes through sRGB — midpoint is a washed-out brown-grey */
background: color-mix(in srgb, oklch(0.7 0.2 30), oklch(0.7 0.2 270));

/* Mixes through the OKLCH color wheel — midpoint is a vivid purple */
background: color-mix(in oklch, oklch(0.7 0.2 30), oklch(0.7 0.2 270));

Wenn Sie Orang und Blau in sRGB mischen, ergeben Sie den Mittelwert der Rohkanäle. Der Mittelpunkt verläuft durch eine entfärbte braune Farbe. In OKLCH interpolieren Sie entlang der Farbrolle – Sie landen auf einem lebendigen Lila. Welche Variante richtig ist, hängt von der Absicht ab, aber für UI-Übergänge, Gradienten und Hover-Zustände ist die OKLCH-Interpolation fast immer das, was Sie wollen.

Ein praktischer Einsatz: Erzeugung eines deaktivierten Zustands ohne direkte Eingabe eines zweiten Hex-Werts.

.button--disabled {
  background: color-mix(in oklch, var(--color-primary) 40%, white);
  cursor: not-allowed;
}

Relative Farbsyntax

Relative Farbsyntax (Chrome 119+, Firefox 128+, Safari 16.4+) ermöglicht es Ihnen, eine neue Farbe durch Modifikation einzelner Kanäle einer vorhandenen Farbe abzuleiten:

:root {
  --brand: oklch(0.623 0.214 259.1);
}

.button:hover {
  /* Lighten by 8% lightness units */
  background: oklch(from var(--brand) calc(l + 0.08) c h);
}

.button:active {
  /* Darken and reduce chroma slightly */
  background: oklch(from var(--brand) calc(l - 0.08) calc(c - 0.02) h);
}

.button--muted {
  /* Drop chroma to near-zero: perceptual grey at the same lightness */
  background: oklch(from var(--brand) l 0.03 h);
}

Dies ersetzt Sass’s lighten(), darken()und desaturate() durch native CSS – kein Vorverarbeitungs-Tool, kein Build-Schritt, keine parallelen Hex-Werte, die synchronisiert werden müssen. Und da Sie in OKLCH sind, sieht „Helligkeit“ tatsächlich heller aus, unabhängig von der Farbe in Ihrer Palette, nicht nur bei bestimmten Farben.

Eine echte Beschränkung: Komplexe Kanalbeschränkungen (wie Chroma begrenzen, um im Gamut zu bleiben) erfordern umfangreiche calc() Ketten, die schnell kompliziert werden. Für einfache Helligkeits- und Chroma-Änderungen ist die Syntax sauber. Für etwas komplexer ist die Berechnung der Werte beim Build und die Erzeugung von CSS-Standardwerten für eine bessere Wartbarkeit.

Browserunterstützung im Jahr 2026

Globale Unterstützung für oklch() ist ab Mitte 2026 über 90%. Die Ausnahmen sind ältere Chromium-basierte Enterprise-Browser und alles, was noch Firefox unter 113 läuft. Wenn diese in Ihrem Benutzerkreis sind, brauchen Sie nur zwei Zeilen als Rückfall:

.button {
  background: #3b82f6; /* sRGB fallback */
}

@supports (background: oklch(0 0 0)) {
  .button {
    background: oklch(0.623 0.214 259.1);
  }
}

In der Praxis: Wenn Ihre Analysen bestätigen, dass Chrome 111+, Firefox 113+ und Safari 15.4+ vorhanden sind, können Sie den Rückfall komplett überspringen. Der @supports Wrapper dient der Ruhe im Fall von internen Werkzeugen, bei denen Sie Browserversionen nicht kontrollieren können.

Die Umstellung Ihres bestehenden Farbsystems

Der Hürdenpunkt bei der Akzeptanz von OKLCH liegt darin, von Ihren aktuellen Hex-Werten zu OKLCH-Koordinaten zu gelangen und zu verstehen, was die Kanäle für jede Farbe bedeuten. Der Einheitliche Farb-Raum-Umrechner erledigt die Umrechnung in beide Richtungen – geben Sie einen Hex- oder HSL-Wert ein, erhalten Sie OKLCH-Ausgabe und beginnen Sie dann die Anpassung von L und C an einem echten Referenzpunkt. Es unterstützt HSL, RGB, Lab, LCH, HSV und OKLCH an einem Ort, was nützlich ist, wenn Sie aus einer Figma-Datei mit Hex-Werten ausgehen und auf OKLCH-Werte landen, die Sie verstehen können.

Wie man tatsächlich migriert

Sie müssen nicht alles auf einmal neu schreiben. Eine praktische Reihenfolge:

1. Beginnen Sie mit interaktiven Farben — Ihre Haupt-, Sekundär- und zerstörerischen Tokens. Diese sind diejenigen, für die Sie bereits Hover-, Aktiv- und deaktivierte Varianten generieren. OKLCH und relative Farbsyntax ersetzen diese Logik sofort durch native CSS.
2. Lassen Sie statische Farben in Hex für jetzt — Text, Hintergründe, Ränder. Sie werden nicht programmatisch manipuliert, daher gibt es noch keinen Vorteil durch die Umrechnung.
3. Bauen Sie das nächste neue System von Grund auf in OKLCH auf — dort gewinnen die subjektiven Gleichheiten strukturell. Ihr neutrale Skalenschritt 500 wird tatsächlich im visuellen Mittelpunkt liegen, und Ihre hochsättigten Abstufungen sind konsistent über alle Huen, ohne manuelle Anpassung.

Das Ziel ist nicht OKLCH für seinen eigenen Wert. Es ist ein Farbsystem, bei dem die Mathematik dem, was Ihre Augen sehen, entspricht – damit Sie nicht jedes Mal, wenn Sie eine leicht heller blaue Farbe benötigen, manuell kompensieren müssen.

Das könnte Ihnen auch gefallen

Neu

Cursor-basiert gegen Offset-Verzeichnis – Warum wird bei page=2 automatisch Datensätze gelöscht

Mehr lesen "

Aktualisiert am 15. Juni 2026

Neu

Docker-Multi-Stage-Builds: Verkleinern Sie Ihr Image ohne die Bereitstellung zu stören

Mehr lesen "

Aktualisiert am 14. Juni 2026

Neu

OAuth 2.0-Flows: Authorization Code, PKCE, and Client Credentials

Mehr lesen "

Aktualisiert am 13. Juni 2026

Neu

HTTP/2 vs HTTP/3: Was tatsächlich geändert wurde (und ob Ihre API es beachtet)

Mehr lesen "

Aktualisiert am 12. Juni 2026