OKLCH lightness matches perception better, especially for accessible contrast checks.

OKLCH and color-mix are supported in current Safari, Firefox, Chrome. Provide hex fallback.

OKLCH can express wider gamut colors on P3 screens with fallbacks.

OKLCH & Modern CSS Color

1. OKLCH swatch ramp

Even steps in lightness with shared hue.

Ramp

Five steps same hue, different L.

:root {
  --brand: oklch(0.55 0.2 250);
  --brand-light: oklch(0.75 0.12 250);
}

Smoother than hsl(220 80% 50%) to hsl(280 80% 50%).

Bar

Horizontal blend in oklch space.

.hero {
  background: linear-gradient(90deg in oklch, oklch(0.55 0.2 250), oklch(0.65 0.22 310));
}

Derive hover from base without manual hex.

Button

Hover uses color-mix.

.btn:hover {
  background: color-mix(in oklch, var(--brand) 85%, white);
}

OKLCH vs HSL?: OKLCH lightness matches perception better, especially for accessible contrast checks.
Browser support?: OKLCH and color-mix are supported in current Safari, Firefox, Chrome. Provide hex fallback.
P3 displays?: OKLCH can express wider gamut colors on P3 screens with fallbacks.