Startseite >CSS >CSS-Referenz – Eigenschaften, Selektoren, Funktionen >oklch()

oklch()

oklch(<Helligkeit> <Buntheit> <Farbton> [/ <Alpha>])

Eine Farbe im Farbraum OKLCH, der der menschlichen Wahrnehmung entspricht: Gleiche Helligkeit bedeutet bei allen Farbtönen gleiche wahrgenommene Helligkeit. Er eignet sich für Paletten und Farbvarianten und kann sattere Farben ausdrücken als rgb().

Werte

  • Helligkeit (L) – 0 bis 1 oder 0% bis 100%: von Schwarz bis Weiß.
  • Buntheit (C) – die Sättigung ab 0 (Grau); gewöhnliche Farben erreichen höchstens etwa 0.3. In Prozent gilt 100% = 0.4.
  • Farbton (H) – ein Winkel: etwa 30 Rot, 140 Grün, 265 Blau.
  • Alpha – nach einem Schrägstrich: oklch(0.6 0.15 250 / 50%).

Beispiele

Fünf Farbtöne mit gleicher Helligkeit und Buntheit – schwarzer Text ist auf allen gleich gut lesbar:

<span class="h1">30</span><span class="h2">90</span><span class="h3">145</span><span class="h4">250</span><span class="h5">320</span>

span {
  display: inline-block;
  width: 44px;
  padding: 12px 0;
  margin-right: 4px;
  color: #000;
  text-align: center;
}
.h1 { background: oklch(0.75 0.12 30); }
.h2 { background: oklch(0.75 0.12 90); }
.h3 { background: oklch(0.75 0.12 145); }
.h4 { background: oklch(0.75 0.12 250); }
.h5 { background: oklch(0.75 0.12 320); }
Ergebnis
3090145250320

Ein Button mit hexadezimaler Farbe für ältere Browser und einer helleren Hover-Variante, abgeleitet aus einer benutzerdefinierten Eigenschaft:

<button class="button">Senden</button>

:root { --base: oklch(0.55 0.15 245); }
.button {
  padding: 8px 16px;
  border: 0;
  color: #fff;
  background: #0077c0;
  background: var(--base);
}
.button:hover {
  background: oklch(from var(--base) calc(l + 0.1) c h);
}
Ergebnis
Ergebnis – beim Überfahren mit der Maus

Worauf Sie achten sollten

  • Ältere Browser (Chrome bis Version 110, Firefox bis 112, Safari bis 15.3) kennen oklch() nicht und verwerfen die Deklaration. Schreiben Sie dieselbe Eigenschaft davor mit einer hexadezimalen Farbe – neuere Browser verwenden die zweite.
  • Nicht jede Kombination lässt sich darstellen: Eine zu hohe Buntheit liegt außerhalb des Bildschirmbereichs, und der Browser bildet die Farbe auf die nächste darstellbare ab. Auf Displays mit großem Farbraum (Display P3) ist oft eine sattere Farbe zu sehen als auf gewöhnlichen.
  • Bei einer Buntheit von 0 hat der Farbton keine Wirkung – das Ergebnis ist ein Grau.
  • Die relative Syntax (oklch(from …)) wird ab Chrome 122, Firefox 128 und Safari 18 korrekt berechnet.

Browserunterstützung

Baseline – weithin verfügbar: in allen gängigen Browsern seit Mai 2023, gilt als weithin verfügbar seit November 2025. Ab Version: Chrome 111, Firefox 113, Safari 15.4. Stand: Oktober 2026 (MDN browser-compat-data).

Siehe auch:
rgb()
hsl()
color-mix()
light-dark()
color