Color mixer

Take blue #0000ff and yellow #ffff00. Average them channel by channel and you get #808080, a mid grey. That is arithmetically correct and perceptually absurd: nobody would say grey sits between blue and yellow.

It happens because the red and green channels rise from 0 to 255 while blue falls from 255 to 0. Halfway along, all three are at 128, and equal channels mean a neutral. The blend passed through the grey axis of the colour space.

OKLab does not have this problem because it does not store colour as three light levels. It stores lightness on one axis and two opponent axes for colour. Moving between two colourful points does not route through the neutral centre unless the colours really are opposites.

Use OKLab when a person is going to look at the result: gradients, colour ramps for a design system, hover and pressed states, chart scales, anything where the intermediate values matter.

Use sRGB when you need to match something that already interpolates in sRGB, such as a CSS gradient without an in keyword, a canvas composite, or an existing design token set someone else generated.

Neither is more correct in the abstract. sRGB interpolation is what browsers have always done, so it is what most existing work looks like. OKLab is what you would choose if starting today.

CSS can do this natively now. color-mix() blends two colours in a space you name, and gradients accept the same in keyword:

color-mix(in oklab, #0000ff 50%, #ffff00)
linear-gradient(in oklab, #0000ff, #ffff00)

Both are supported across current browsers. If you need to support older ones, generate the intermediate stops here and write them out explicitly. An explicit multi-stop gradient in sRGB reproduces an OKLab gradient closely enough that nobody will spot the difference.

For building a full ramp around a single colour rather than between two, the colour picker generates tints and shades, and the palette generator covers harmonies.