oklch() / oklab() colors

Baseline 2023 (Chrome 111, Safari 15.4, Firefox 113); breit verfügbar.

Chrome 111Edge 111Safari 15.4Firefox 113

Wahrnehmungsgleichmäßige Farbräume: gleiche Schritte in der Helligkeit sehen gleich aus, und der Farbton bleibt konstant, während du die Chroma änderst. In oklch gebaute Paletten sind über Farbtöne hinweg konsistent und erreichen Wide-Gamut-P3-Farben.

CSS

.fx-007 {
  display: flex;
  gap: 6px
}
.fx-007 span {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: oklch(var(--l) .17 250)
}
.fx-007 span:nth-child(1) {
  --l: .95
}
.fx-007 span:nth-child(2) {
  --l: .8
}
.fx-007 span:nth-child(3) {
  --l: .65
}
.fx-007 span:nth-child(4) {
  --l: .5
}
.fx-007 span:nth-child(5) {
  --l: .35
}

HTML

<div class="fx-007"><span></span><span></span><span></span><span></span><span></span></div>

Fallback: Setze für sehr alte Browser ein sRGB-Hex vor die oklch()-Deklaration; alle Evergreen-Browser unterstützen sie.

Quelle: developer.mozilla.org/en-US/docs/Web/CSS/color_value/oklch

Prompt

Definiere das Farbsystem in oklch: `oklch(L C H)` mit Helligkeit 0-1, Chroma etwa 0.1-0.2 für UI-Farben und einem Farbton pro semantischer Farbe. Baue Tonskalen, indem du nur L stufst (z. B. .95, .85, .75 ...) und C und H fixierst, damit alle Stufen gleichmäßig verteilt aussehen. Bevorzuge oklch gegenüber hsl für jede generierte Palette.