CSS gradient OKLCH interpolation for smoother blends

CSS gradient OKLCH interpolation means asking the browser to calculate a gradient's in-between colours in the OKLCH colour space rather than in sRGB. You add two words after the direction: linear-gradient(90deg in oklch, #2563eb, #facc15). The result is a blend whose lightness changes evenly and whose middle stays vivid, instead of sagging into the grey, muddy band that plain sRGB blends are known for.

Why sRGB gradients go grey

sRGB was designed to encode screen colours efficiently, not to match how people see. Blending two sRGB colours means averaging their red, green and blue numbers, and halfway between a blue and a yellow is a set of middling numbers that looks grey. Its lightness also changes unevenly, so some blends bulge brighter or darker in the middle. The design side of this problem is in muddy gradients.

Oklab and its cylindrical form, OKLCH, were designed so that equal steps in their numbers look like roughly equal steps to the eye. Blending in them keeps perceived lightness moving steadily, which is why gradients made this way look smoother and brighter at the same endpoints.

The syntax: in oklch and in oklab

The interpolation method goes in the first argument, before or after the direction. It works in linear-gradient(), radial-gradient(), conic-gradient() and their repeating forms, and also in color-mix(). Your colour stops can stay in hex; only the maths changes.

/* direction first or interpolation first: both are valid */
background: linear-gradient(135deg in oklch, #7c3aed, #f97316);
background: linear-gradient(in oklch 135deg, #7c3aed, #f97316);

/* works in the other gradient functions too */
background: radial-gradient(in oklab circle at 30% 30%, #22d3ee, #1e1b4b);
background: conic-gradient(in oklch from 90deg, #ef4444, #3b82f6, #ef4444);

oklab or oklch: which to choose

Both are perceptual; they differ in the path they take. Oklab draws a straight line between the two colours, so the middle can lose some saturation when the ends are far apart on the colour wheel, but it never wanders through a hue you did not ask for. OKLCH keeps chroma, the colour's intensity, and walks around the hue circle, so the middle stays saturated but passes through the hues in between. Blue to yellow in oklch goes through green. Sometimes that is the point; sometimes it is a surprise.

Choosing the hue direction

Between any two hues there are two ways round the colour wheel. By default oklch takes the shorter hue. You can ask for longer hue, or force a direction with increasing hue or decreasing hue. The keyword goes straight after the colour space.

longer hue is the tidiest way to draw a spectrum: two stops instead of seven. It is also how you make a full rainbow gradient whose colours all feel equally bright, which an sRGB rainbow never quite manages.

Writing colours in oklch()

You can also write the stops themselves in OKLCH: oklch(L C H), where L is lightness from 0% to 100%, C is chroma from 0 up to roughly 0.37, and H is the hue angle. Keeping L the same across stops gives a gradient of equal lightness, which is hard to do by eye in hex. oklch.com is a good picker for finding values.

.band {
  /* same lightness and chroma, only the hue changes */
  background: linear-gradient(
    90deg in oklch,
    oklch(68% 0.17 300),
    oklch(68% 0.17 20),
    oklch(68% 0.17 70)
  );
}

Browser support and fallbacks

Interpolation methods and oklch() colours are supported in current Chrome, Edge, Safari and Firefox. Browsers skip any declaration they cannot parse, so the fallback is simply to write the plain version first. Where the enhanced line is ignored, the sRGB gradient stays.

.hero {
  background-color: #7c3aed;
  background-image: linear-gradient(135deg, #7c3aed, #f97316);
  background-image: linear-gradient(135deg in oklch, #7c3aed, #f97316);
}

If you want to go further, perceptual blends pair well with grain to prevent gradient banding, and with the stop and hint techniques in the CSS linear gradient guide.