Die CSS-oklch()-Syntax erklärt

Die CSS-Funktion oklch() beschreibt eine Farbe über drei durch Leerzeichen getrennte Werte — Helligkeit, Chroma, Farbton — mit einem optionalen Alpha nach einem Schrägstrich: oklch(0.55 0.15 260) oder oklch(0.55 0.15 260 / 40%). Sie ist seit 2023 nativer Bestandteil von CSS und funktioniert in allen großen Browsern ohne Build-Schritt. Dies ist eine praktische Referenz für die Syntax; was die Werte perzeptiv bedeuten, behandeln wir in unserem OKLCH-Leitfaden.

Was sind die drei Werte und ihre Wertebereiche?

color: oklch(L C H);
color: oklch(L C H / alpha);

• L — Helligkeit. Ein Prozentwert (0%–100%) oder eine Zahl (0–1); 62% und 0.62 sind dieselbe Helligkeit. 0 ist Schwarz, 1 ist Weiß.
• C — Chroma. Eine nicht-negative Zahl. Im Prinzip unbegrenzt, in der Praxis begrenzt durch das, was Bildschirme darstellen können: sRGB-Farben enden bei etwa 0.37, und alltägliche UI-Farben liegen meist zwischen 0 (Grau) und 0.25. Ein sinnvolles „100 % Chroma” gibt es nicht — das Maximum hängt von Helligkeit und Farbton ab.
• H — Farbton. Ein Winkel in Grad (0–360, Einheit optional): grob 30 ist Rotorange, 145 Grün, 260 Blau. Grau hat keinen sinnvollen Farbton — schreib eine beliebige Zahl oder none.
• alpha. Nach einem /: ein Prozentwert oder eine Zahl von 0–1, genau wie sonst in CSS.

Die formale Grammatik findest du in der MDN-Referenz zu oklch(); die Zusammenfassung oben deckt ab, was du im täglichen Styling brauchst.

Wie sieht eine echte Komponente in oklch() aus?

Ein Button, vollständig in der Syntax geschrieben:

.button {
  background: oklch(0.55 0.15 260);          /* Blau mittlerer Helligkeit */
  color: oklch(0.98 0.01 260);               /* fast weiß, Hauch Farbton  */
  border: 1px solid oklch(0.55 0.15 260 / 40%);  /* dasselbe Blau bei 40 % Alpha */
}

Zwei Details leisten hier stille Arbeit. Die Textfarbe trägt 0.01 Chroma im eigenen Farbton des Buttons — ein fast reines Weiß, das zum Blau gehört, statt eines sterilen #fff. Und der Rahmen verwendet die Hintergrundfarbe mit Alpha wieder, statt eines separat gewählten helleren Blaus, sodass er im Gleichschritt bleibt, wenn sich der Hintergrund ändert.

Wie leitest du eine Farbe aus einer anderen ab?

Die relative Farbschreibweise zerlegt eine vorhandene Farbe in die Kanäle l, c, h, die du verändern kannst:

:root {
  --brand: oklch(0.55 0.15 260);
}
.button:hover {
  background: oklch(from var(--brand) calc(l - 0.07) c h);  /* dunkler     */
}
.badge {
  background: oklch(from var(--brand) 0.95 calc(c / 3) h);  /* blasser Ton */
}

Hier zahlt sich ein perzeptives Modell in reinem CSS aus: „Hover ist 0,07 dunkler” verhält sich gleich, egal ob die Markenfarbe blau, grün oder orange ist, weil gleiche L-Schritte gleich aussehen. Dasselbe Rezept in hex verlangt einen von Hand gewählten Wert pro Farbton.

Wie sehen generierte OKLCH-Werte auf einer echten Farbrampe aus?

Rohe Werte neben echten Farben zu lesen baut die Intuition am schnellsten auf. Öffne eine Farbrampe mit sichtbaren L/C/H-Werten pro Schritt in Scale Composer — die Helligkeit fällt Schritt für Schritt entlang einer Kurve, das Chroma schwillt durch die Mitteltöne an und ebbt an den Enden ab, der Farbton bleibt stehen. Drei Spalten mit Zahlen, drei unabhängige Aufgaben.

Was ist mit Browsern, die oklch() nicht unterstützen?

Die Unterstützung ist in den großen Browsern seit 2023 flächendeckend, Fallbacks sind also eher eine Frage von Alt-Traffic als eine Standardanforderung. Wenn du einen brauchst, erledigt die CSS-Kaskade die Arbeit — deklariere den Fallback zuerst:

.button {
  background: #4263c7;                /* dort genutzt, wo oklch() unbekannt ist */
  background: oklch(0.55 0.15 260);   /* gewinnt überall sonst          */
}

Oder gib größere Blöcke über @supports (color: oklch(0 0 0)) frei. Token-Pipelines umgehen die Frage häufig, indem sie hex zusammen mit OKLCH exportieren, sodass alte CSS-Konsumenten weiterhin aus derselben Palette arbeiten.

Wo geht die Syntax über hex hinaus?

Hex endet bei sRGB; das OKLCH-Modell nicht. Schalte dieselbe Farbrampe in den Display-P3-Modus und die Schritte tragen color(display-p3 …)-Strings neben ihrem auf sRGB begrenzten hex — die Mitteltöne gewinnen Chroma, das die hex-Spalte buchstäblich nicht ausdrücken kann. Kopiere ein Wertepaar für denselben Schritt und vergleiche sie in deinem eigenen Stylesheet: Diese Lücke zwischen den beiden Strings ist der Teil des Farbraums (Gamut) deines Bildschirms, den CSS aus der hex-Ära nie erreicht hat.