Browser-Unterstützung für oklch() im Jahr 2026

oklch() funktioniert in jeder wichtigen Browser-Engine, und das seit 2023: Chrome und Edge haben es in Version 111 ausgeliefert (März 2023), Firefox in 113 (Mai 2023) und Safari sogar noch früher, in 15.4 (März 2022). Für Evergreen-Browser ist die Unterstützung 2026 praktisch universell. Die eigentliche Frage hat sich verschoben — von kann ich es verwenden zu was ist mit dem Long Tail: der schrumpfenden Zahl eingebetteter WebViews und festgepinnter Firmenbrowser, die sich nie aktualisieren.

Das ist die Status-Seite unseres OKLCH-Leitfadens: die Versions-Fakten, wer noch außen vor bleibt, und die Fallback-Strategien, sortiert von der günstigsten aufwärts. Fakten zur Unterstützung veralten naturgemäß — deshalb trägt diese Seite ihr Aktualisierungsdatum als Teil der Antwort.

Welche Browser-Versionen haben oklch() hinzugefügt?

Safari war ein Jahr voraus — WebKit hat die CSS-Color-Level-4-Funktionen früh ausgeliefert — und die Chromium- und Firefox-Releases erschienen im Frühjahr 2023 innerhalb weniger Wochen voneinander, als die Farbfunktionen ein Interop-Schwerpunkt waren. Für die jeweils aktuellen Zahlen verfolgt die Live-Support-Tabelle auf Can I Use Versionen und den globalen Nutzungsanteil; inzwischen liegen mehrere Release-Jahre sich selbst aktualisierender Browser zwischen den heutigen Nutzern und den letzten Engines ohne Unterstützung.

Wer kann oklch() immer noch nicht darstellen?

Nicht Desktop- oder Mobile-Browser, die sich selbst aktualisieren — diese Gruppe ist längst weitergezogen. Die verbleibenden Lücken häufen sich dort, wo eine Engine eingefroren wird:

• Alte eingebettete WebViews — Apps und Geräte, die eine Browser-Engine mitliefern und nicht mehr aktualisieren: alternde Smart-TV-Browser, Kiosk-Systeme, In-App-Browser auf Geräten, die keine OS-Updates mehr erhalten.
• Firmen-Flotten, festgepinnt auf alte Browser — abgeschottete Umgebungen, in denen die IT die Browser-Version vor Jahren eingefroren hat und Upgrades nur langsam freigibt.

Ob das eine Rolle spielt, ist eine Frage der Zielgruppe, keine Frage der Technik. Eine Consumer-Site wird diese Umgebungen als Rundungsfehler wahrnehmen; ein Intranet für eine 2021 eingefrorene Flotte wird sie als die gesamte Zielgruppe sehen. Wenn die Entscheidung auf Daten statt auf Doktrin beruhen soll, klären deine eigenen Analytics sie: der Anteil der Sitzungen auf Engines von vor 2023 ist eine Zahl, die du aus einem Browser-Bericht ablesen kannst, und bei den meisten öffentlichen Sites ist er unter die Rauschgrenze gesunken. Für die meisten Projekte im Jahr 2026 ist der Fallback also eher günstige Versicherung als Pflicht — es lohnt sich, ihn hinzuzufügen, weil er fast nichts kostet, nicht weil das Risiko groß wäre.

Was gewinnst du überhaupt, wenn du oklch() schreibst?

Die Kurzfassung des Arguments: Der Helligkeitswert von OKLCH bildet ab, wie hell eine Farbe tatsächlich wirkt, sodass Paletten generiert werden können — Stufen auf einer Helligkeitskurve wirken gleichmäßig verteilt, und der Kontrast zwischen Rollen wird zu einer Eigenschaft der Skala statt zu einem Test pro Paar. Hex kann diese Ergebnisse ausliefern, aber es kann die Logik dahinter nicht ausdrücken; oklch() hält die Logik im Stylesheet lesbar.

Am deutlichsten wird der Gewinn bei einer generierten Palette: öffne eine nativ in OKLCH gebaute Skala in Scale Composer — Stufen auf einer Helligkeitskurve, jede mit dem oklch()-Wert, den ein moderner Browser direkt liest.

Was ist die beste Fallback-Strategie?

Sortiert von der günstigsten zur strukturellsten Lösung:

1. Geordnete Deklarationen. Die Kaskade erledigt die ganze Arbeit:

.button {
  background: #2563eb;                  /* von jedem Browser gelesen */
  background: oklch(0.546 0.215 262.9); /* gewinnt, wo unterstützt   */
}

Ein Browser, der oklch() nicht kennt, verwirft die zweite Deklaration als ungültig und behält das hex; einer, der es kennt, lässt die spätere Deklaration gewinnen. Kein Tooling, keine Laufzeitkosten, funktioniert pro Eigenschaft. (Die beiden Werte oben sind dasselbe Blau — das hex ist einfach seine sRGB-Schreibweise.)

2. @supports-Blöcke. Wenn ein ganzer Abschnitt des Designs von Wide-Gamut-Farben abhängt — etwa einer P3-Akzentebene — hält eine Feature-Query die Logik an einem Ort, statt jede Deklaration zu paaren:

@supports (color: oklch(0.5 0.1 200)) {
  /* Wide-Gamut-Akzente leben hier */
}

Lohnt sich für größere Abschnitte; Overkill für einzelne Farben.

3. Löse es in der Token-Pipeline. Paare von Hand zu schreiben skaliert nicht über eine Handvoll Farben hinaus. Die strukturelle Antwort ist, beide Schreibweisen aus derselben Paletten-Quelle zu generieren: die Exporte von Scale Composer — DTCG, CSS, Tailwind v4, Figma Variables — führen immer hex neben den OKLCH-Werten mit, sodass ein Legacy-Consumer dieselbe Palette über ihre sRGB-Schreibweise liest, während moderne Engines die Farbe in voller Präzision bekommen.

Wie lieferst du es heute aus?

Behandle OKLCH als Single Source of Truth und lass die Export-Schicht das Sicherheitsnetz erzeugen: moderne Browser lesen oklch(), alles andere liest den hex-Zwilling, und niemand pflegt zwei Paletten. Öffne die hex-Fallback-Ansicht derselben Skala — jede Stufe mit ihrem sRGB-hex gepaart, genau das Paar, das das Muster der geordneten Deklarationen braucht — und der Long Tail ist abgedeckt, bevor er überhaupt danach fragt.