oklch() / oklab() colors

Baseline 2023 (Chrome 111, Safari 15.4, Firefox 113); widely available.

Chrome 111Edge 111Safari 15.4Firefox 113

Perceptually uniform color spaces: equal steps in lightness look equal, and hue stays constant while you change chroma. Palettes built in oklch are consistent across hues and can reach wide-gamut P3 colors.

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: Provide an sRGB hex before the oklch() declaration for very old browsers; evergreen browsers all support it.

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

Prompt

Define the color system in oklch: `oklch(L C H)` with lightness 0-1, chroma around 0.1-0.2 for UI colors, and one hue per semantic color. Build tonal scales by stepping L only (e.g. .95, .85, .75 ...) while keeping C and H fixed so all steps look evenly spaced. Prefer oklch over hsl for any generated palette.