[css] `color-mix()` doesn't explain what the purpose is of the `color space` argument

[romainmenke]

MDN URL

https://developer.mozilla.org/en-US/docs/Web/CSS/color_value/color-mix

What specific section or headline is this issue about?

color-space

What information was incorrect, unhelpful, or incomplete?

incomplete

The color space argument is a critical part as it defines how the colors are mixed and yet it is not explained in any way.

What did you expect to see?

A short explanation of the different color spaces and how they affect the mixing of two colors. Together with a demo so that authors can explore the multiple options.

For example something like this : https://preset-env.cssdb.org/blog/postcss-color-mix-function/#JTdCJTIyY3MlMjIlM0ElMjJva2xhYiUyMiUyQyUyMmltJTIyJTNBJTIyc2hvcnRlciUyMiUyQyUyMnAlMjIlM0ElMjI1MCUyMiUyQyUyMmElMjIlM0ElMjIlMjMwMGQ1ZmYlMjIlMkMlMjJiJTIyJTNBJTIyJTIzZmZkZDAwJTIyJTdE

Do you have any supporting links, references, or citations?

No response

Do you have anything more you want to share?

No response

[LeaVerou]

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.

[svgeesus]

Do you have any supporting links, references, or citations?

CSS Color 4 describes the effect of choosing interpolation color space

[svgeesus]

The example on the MDN page, mixing blue and white, is a classic case for choosing oklab as the interpolation color space. See this gradient example from CSS Images 4, as an illustration.

[Josh-Cena]

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.

This was added all the way back in https://github.com/mdn/content/pull/3300, and I'm not sure if Rachel didn't understand it.

[romainmenke]

🤔 I don't think that PR resolved this issue. It still doesn't explain why you would use any or a specific interpolation space.

Is there a reason why we can't incorporate the explainer from the spec?

Mixing or otherwise combining colors has different results depending on the interpolation color space used. Thus, different color spaces may be more appropriate for each interpolation use case.

• 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).