OKLCH Gradient

Quick implementation

.oklch-gradient-demo-box {
  /* Standard sRGB interpolation */
  background: linear-gradient(to right, oklch(0.62 0.23 25), oklch(0.45 0.20 260));
}

.oklch-gradient-demo-box--oklch {
  /* Interpolate in perceptual oklch space */
  background: linear-gradient(in oklch to right, oklch(0.62 0.23 25), oklch(0.45 0.20 260));
}

Prompt this to your LLM

Includes role, constraints, two framework variants, and edge cases to handle.

You are a CSS expert. Create a gradient using oklch color space.

Requirements:
1. Use the <code>linear-gradient(in oklch, ...)</code> syntax.
2. Define colors using oklch() values to ensure vibrancy.
3. Provide two examples: one standard sRGB and one oklch for comparison.
4. Ensure the code is responsive and accessible.

Example structure:
<div class="gradient-box"></div>

CSS:
.gradient-box {
  background: linear-gradient(in oklch, to right, oklch(60% 0.2 20), oklch(60% 0.2 260));
}

Why this matters in 2026

Standard sRGB interpolation often creates muddy grey midpoints when transitioning between vibrant hues. Using the in oklch keyword forces the browser to calculate color stops in perceptual space instead. This results in smoother, more vibrant transitions that maintain saturation throughout the gradient.

The logic

The linear-gradient() function accepts an optional in oklch syntax modifier before the color stops. This tells the rendering engine to convert colors to the OKLCH color space for interpolation calculations. It prevents the desaturation artifact common in legacy RGB space blending.

Accessibility & performance

This technique relies on modern browser support for color spaces but has zero runtime performance cost. It improves visual accessibility by ensuring color contrast remains consistent across the gradient spectrum. No JavaScript is required, making it a pure CSS enhancement.