OKLCH in CSS nutzen

Die Syntax

color: oklch(62% 0.19 255);
color: oklch(62% 0.19 255 / 50%); /* with transparency */

• Helligkeit reicht von 0 % (Schwarz) bis 100 % (Weiß).
• Chroma bestimmt, wie kräftig die Farbe ist. 0 ist Grau, und die meisten brauchbaren Farben liegen unter etwa 0,37.
• Farbton ist der Winkel der Farbe auf dem Farbkreis, von 0 bis 360.

Probier es mit dem OKLCH Color Picker aus oder wandle deine Markenfarbe mit dem HEX to OKLCH Converter um.

Eine Reihe von Farbstufen bauen

Behalte Chroma und Farbton bei und ändere nur die Helligkeit:

:root {
  --brand-300: oklch(80% 0.12 255);
  --brand-500: oklch(62% 0.19 255);
  --brand-700: oklch(45% 0.17 255);
}

Hover-Zustände erstellen

Die relative Farbsyntax erlaubt es, eine Farbe aus einer anderen abzuleiten:

.btn { background: var(--brand-500); }
.btn:hover { background: oklch(from var(--brand-500) calc(l - 0.08) c h); }

Relative Farben sind neuer als oklch() selbst, prüfe also die Browser-Unterstützung für deine Zielgruppe.

Farben mischen

Verwende color-mix(), um zwei Farben zu mischen. Das Mischen im OKLCH-Raum ergibt meist sauberere Mittelwerte als sRGB:

background: color-mix(in oklch, var(--brand-500) 70%, white);

Du kannst Mischungen mit dem Color Mixer testen.

Einen Fallback hinzufügen

Moderne Browser unterstützen OKLCH. Für sehr alte Browser setze zuerst einen HEX-Wert. Browser überspringen, was sie nicht lesen können:

color: #2563eb;
color: oklch(54.6% 0.215 262.9);

Der OKLCH to HEX Converter liefert dir diesen Wert.

Kontrast prüfen

Die Helligkeit macht den Kontrast leichter vorhersehbar, garantiert ihn aber nicht. Teste Text- und Hintergrundpaare immer mit dem Contrast Checker.