[css-color-5] Should `color-mix()` default to oklab interpolation?

[LeaVerou]

In #7948 we resolved that gradients should interpolate in oklab by default. This introduces an inconsistency between gradients and color-mix(), since the latter requires an interpolation space. At the time we did not want to introduce a default, but I think we’re now confident enough that OkLab would be a good default. Not only does having to type an interpolation method every time make color-mix() tedious to use (tediosity that is multiplied when it’s nested), but also most authors don’t really understand color spaces, and tend to use in srgb as that’s familiar, which produces the worst interpolation they could possibly get.

[svgeesus]

most authors don’t really understand color spaces, and tend to use in srgb as that’s familiar, which produces the worst interpolation they could possibly get.

I have seen that many times. One talk at CSS Day (on a different subject, but happened to use color-mix()) had in srgb and afterwards I asked the speaker why. The response was enlightening. Paraphrased, it was

"well the colors I am mixing are srgb, right, so I thought they would need to mix in srgb"

An explicit choice to make authors think about which space to use, is no help if they can't choose or are working from incorrect assumptions.

[svgeesus]

So, although I originally argued against this, I think that requiring an explicit colorspace is not helping.

[romainmenke]

It also doesn't help that it isn't documented for authors...
https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix

This doesn't explain what the purpose is of having a color space argument.

---

Edit : filed an issue mdn/content#34351

[LeaVerou]

Edit : filed an issue mdn/content#34351

To quote my comment there:

It’s even more concerning that the very first example uses in srgb, indicating that the documentation author also didn’t understand the purpose of that argument, which may explain the lack of explanation about it. in srgb should almost never be used, except for very specific niche cases. Basically, unless you have a reason to interpolate in sRGB, don’t interpolate in sRGB.

There is another example showing what the different hue interpolation keywords do, but no mention of why you might want to use each of them. They’re basically just enumerated.

If anything, this MDN page highlights precisely why we need a default here.

[svgeesus]

If only there was a part of the specification that describes the effect of choosing interpolation color space

[svgeesus]

• In some cases, the result of physically mixing two colored lights is desired. In that case, the CIE XYZ or srgb-linear color space is appropriate, because they are linear in light intensity.

• If colors need to be evenly spaced perceptually (such as in a gradient), the Oklab color space (and the older Lab), are designed to be perceptually uniform.

• If avoiding graying out in color mixing is desired, i.e. maximizing chroma throughout the transition, Oklch (and the older LCH) work well for that.

• Lastly, compatibility with legacy Web content may be the most important consideration. The sRGB color space, which is neither linear-light nor perceptually uniform, is the choice here, even though it produces poorer results (overly dark or greyish mixes).

[LeaVerou]

• In some cases, the result of physically mixing two colored lights is desired. In that case, the CIE XYZ or srgb-linear color space is appropriate, because they are linear in light intensity.
• If colors need to be evenly spaced perceptually (such as in a gradient), the Oklab color space (and the older Lab), are designed to be perceptually uniform.

Hm, does that mean we should default to xyz instead, since color-mix() is modeled around color mixing?

[svgeesus]

Hm, does that mean we should default to xyz instead, since color-mix() is modeled around color mixing?

No, we should (continue to) default to the most useful and desired option, which is perceptually uniform mixing. In other words a 50-50 mix of two colors gives the color that looks half way between them.

Linear in light intensity is not often needed (compositing is one case where it would be useful, because there the color from one is indeed shining through another, partially transparent, color).

[Loirooriol]

What about other interpolations like transitions/animations? Should all of them be consistent?

[svgeesus]

What about other interpolations like transitions/animations? Should all of them be consistent?

If we default to Oklab for color-mix() we should have the same default for transitions and animations, yes, and for the same reason.