# Gradient interpolation: sRGB, OKLab and why it matters

[Canonical HTML page](https://gradiently.design/guide/gradient-interpolation)

Pick blue and yellow, blend them, and the middle turns grey. That is not your colours failing. It is the maths of the colour space doing the blending, and since CSS Color 4 you can change it.

## The short version

- Gradient interpolation is the method used to calculate every colour between two stops, and the colour space it happens in changes the result.
- Blending in sRGB moves in a straight line through red, green and blue values, so opposite colours such as blue and yellow pass through grey.
- OKLab is designed so equal steps look like equal changes to the eye, which gives smoother, more even lightness across a gradient.
- OKLCH blends lightness, chroma and hue separately, so colours stay saturated and travel around the colour wheel instead of through its grey centre.
- In CSS you choose the space inside the gradient, for example `linear-gradient(in oklch, #2563eb, #f97316)`.

**Gradient interpolation** is how the colours between your stops are calculated. You choose blue at one end and yellow at the other; the software has to invent every colour in between, and it does that by drawing a line between the two colours in some colour space. Which space it uses changes what you see. Blend in sRGB and blue to yellow passes through flat grey. Blend in OKLCH and it passes through a bright teal. Same stops, very different gradient.

## What gradient interpolation means

Every colour can be described as a point in a space. In sRGB the three axes are red, green and blue. In OKLab they are lightness and two opponent axes, green to red and blue to yellow. In OKLCH they are lightness, chroma (how colourful) and hue (the angle round the wheel). Interpolating means walking from one point to the other. A straight walk through one space can be a curve, or a detour through grey, in another.

- Start: blue: #0000ff
- Midpoint in sRGB: #808080
- Midpoint, linear sRGB: #bcbcbc
- Midpoint in OKLab: #6cabc7
- Midpoint in OKLCH: #00cfbd
- End: yellow: #ffff00

The halfway colour between pure blue and pure yellow in four spaces. sRGB lands on dead grey; OKLCH lands on a vivid teal.

## sRGB, OKLab and OKLCH side by side

- Blue to orange, sRGB: `linear-gradient(90deg in srgb, #2563eb, #f97316)`
- Blue to orange, OKLab: `linear-gradient(90deg in oklab, #2563eb, #f97316)`
- Blue to orange, OKLCH: `linear-gradient(90deg in oklch, #2563eb, #f97316)`
- Red to blue, sRGB: `linear-gradient(90deg in srgb, #ff0000, #0000ff)`
- Red to blue, OKLab: `linear-gradient(90deg in oklab, #ff0000, #0000ff)`
- Red to blue, OKLCH: `linear-gradient(90deg in oklch, #ff0000, #0000ff)`

Two colour pairs, three spaces each. The sRGB rows dip dull and dark in the middle; OKLab evens the lightness; OKLCH keeps the colour.

| Space | How it blends | Best for | Watch out for |
| --- | --- | --- | --- |
| sRGB | Straight line through red, green, blue values | Matching old designs exactly | Grey, dark middles between distant hues |
| Linear sRGB | Same, without gamma encoding | Light mixing, glows | Midpoints look too bright |
| OKLab | Perceptually even lightness and colour | Smooth, natural blends; the default for modern CSS colours | Opposites still lose some colour |
| OKLCH | Lightness, chroma and hue separately | Vivid blends, rainbows, brand colours far apart | Can pass through unexpected hues |

The four spaces you are most likely to meet. CSS also offers others, such as `lab`, `lch`, `hsl` and `display-p3`.

## Why sRGB gradients turn grey or muddy

sRGB was designed for screens, not for the eye. Its numbers are gamma encoded, and its axes don't line up with how we see hue or lightness. When two colours sit on opposite sides of the wheel, the straight line between them crosses near the neutral centre, so the middle loses its colour. Blue and yellow average to `#808080`. This is the main cause of [muddy gradients](https://gradiently.design/guide/muddy-gradients), and it is why a designer's instinct to add a bridging colour works: the extra stop bends the path around the grey.

## OKLab: even steps for the eye

OKLab, published by Björn Ottosson in 2020, was built so that equal distances look like equal differences. The practical result is a gradient whose lightness changes evenly from end to end, with no dark dip or bright bulge in the middle. It still takes a straight path, so two true opposites lose some colour at the centre, but far less than in sRGB. Modern CSS uses OKLab by default whenever any colour in a gradient is written in a newer syntax such as `oklch()`.

## OKLCH: keeping colour alive

OKLCH is the same space as OKLab, described in polar form: lightness, chroma and a hue angle. Interpolating in it walks around the wheel, so the in between colours keep their saturation. That is ideal for vivid, brand forward gradients and [rainbow gradients](https://gradiently.design/guide/rainbow-gradient). You can also choose which way round the wheel to go with `shorter hue` (the default), `longer hue`, `increasing hue` or `decreasing hue`. The [OKLCH guide](https://gradiently.design/guide/oklch-explained) explains the space in more depth.

- Red to blue, shorter hue: `linear-gradient(90deg in oklch shorter hue, #ef4444, #3b82f6)`
- Red to blue, longer hue: `linear-gradient(90deg in oklch longer hue, #ef4444, #3b82f6)`

The same two colours. The shorter path goes through magenta; the longer path travels through orange, yellow and green.

## How to set gradient interpolation in CSS

Add `in <space>` before the stops, after any angle or shape. Browsers that don't understand it ignore the whole declaration, so write an sRGB version first as a fallback. Every space and hue keyword is listed in [MDN's color interpolation reference](https://developer.mozilla.org/en-US/docs/Web/CSS/color-interpolation-method), and [CSS gradients in OKLCH](https://gradiently.design/guide/css-gradient-oklch) has more recipes.

```css
.hero {
  /* Fallback for older browsers: a bridge stop avoids the grey middle */
  background: linear-gradient(135deg, #2563eb, #c026d3, #f97316);
  /* Modern browsers: let OKLCH keep the colour */
  background: linear-gradient(135deg in oklch, #2563eb, #f97316);
}

.radial {
  background: radial-gradient(circle at 30% 30% in oklab, #fde68a, #0f766e);
}

.conic-rainbow {
  background: conic-gradient(in oklch longer hue, #ef4444, #ef4444);
}
```

The interpolation keyword works in linear, radial and conic gradients. A conic gradient from red back to red with `longer hue` draws a full, even rainbow.

## Which colour space to choose

1. **Default to OKLab** For most two or three colour blends it gives the smoothest result with no surprises.
2. **Use OKLCH for distant or vivid colours** When the colours sit far apart on the wheel and you want the middle to stay bright.
3. **Keep sRGB to match old work** If a gradient must look identical to an existing asset or image, blend in the same space it was made in.
4. **Check the midpoint** Whatever the space, look at the halfway colour. If it is grey or a hue you didn't expect, change the space or add a stop.

### Old habit

- Blend in sRGB and add stops to hide grey
- Accept a dark dip in the middle
- Pick colours that are close together to stay safe

### Better

- Blend in OKLab or OKLCH and keep fewer stops
- Even lightness from end to end
- Use bolder pairs and let the space keep them clean

Interpolation is only one part of a good blend; where the stops sit matters just as much, covered in [gradient colour stops](https://gradiently.design/guide/gradient-stops). If you would rather skip the maths, Gradiently's Marks are finished gradient backgrounds that render at every size you design in, and the [developer docs](https://gradiently.design/developers) show how ChatGPT or Claude can search Marks and create designs that open in the Studio.

## FAQ

### What is gradient interpolation?

The calculation of every colour between two gradient stops. The colour space it happens in, such as sRGB or OKLab, changes which colours appear in the middle.

### Why do my gradients look grey in the middle?

They are blending in sRGB between colours on opposite sides of the wheel, so the path crosses near grey. Blend in OKLCH or add a bridging colour.

### Is OKLab or OKLCH better for gradients?

OKLab gives the most even, natural blends. OKLCH keeps colours more saturated and is better for vivid pairs and rainbows.

### How do I use OKLCH in a CSS gradient?

Add `in oklch` before the colours, for example `linear-gradient(90deg in oklch, #2563eb, #f97316)`. Write an sRGB version first as a fallback.

### What colour space do CSS gradients use by default?

sRGB when every colour uses older syntax such as hex or `rgb()`, and OKLab when any colour uses a newer syntax such as `oklch()`.