Use Oklab for gradient interpolation

[aaronadamsCA]

Gradient interpolation (and any future color-mix utilities) should be using the Oklab colour space.

https://play.tailwindcss.com/B5DPkOnhjl

You'll generally want the uniform colour space (Oklab) for mixing/interpolating between colours, and the cylindrical colour space (Oklch) for modifying the lightness/chroma/hue of individual colours.

[philipp-spiess]

Hey @aaronadamsCA! Thanks for the report. Agree that this particular example is really unexpected in Chrome. We did some comparison between oklch and oklab in different browsers and still think oklch is what you want in most cases. It's more vivid and less grayish. E.g. look at the subtle difference in this gradient:

(the one underneath is oklab, ignore the label)

What we'll do though is to make it very easy to change the interpolation mode. We'll add modifier support to all gradients so it's very easy to control this because of these inconsistencies.

[aaronadamsCA]

That makes sense!

I still think you'll end up finding in oklab is the right default because it produces the most consistent results, with in oklch and in oklch longer hue offering artistic alternatives.

Put another way, most people probably won't expect to pick two colours and end up with a third:

https://play.tailwindcss.com/ie9lFqoVOq?layout=horizontal

https://play.tailwindcss.com/MN1X0EuhWr?layout=horizontal

https://play.tailwindcss.com/x3ptQxqsew?layout=horizontal

Still, as long as it's easy enough to change, it'll be great to have them all as options!