Repository navigation
[css-color-5] Should color-mix() default to oklab interpolation? #10484
Description
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.
Reacted by Romain Menke, Raura, Pete Nykänen, Pyprohly, Sp1cyP3pp3r, David Aerne and kat
Activity
svgeesus commentedon Jun 22, 2024
I have seen that many times. One talk at CSS Day (on a different subject, but happened to use
color-mix()) hadin srgband afterwards I asked the speaker why. The response was enlightening. Paraphrased, it wasAn 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 commentedon Jun 22, 2024
So, although I originally argued against this, I think that requiring an explicit colorspace is not helping.
romainmenke commentedon Jun 22, 2024
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 commentedon Jun 23, 2024
To quote my comment there:
If anything, this MDN page highlights precisely why we need a default here.
svgeesus commentedon Jun 23, 2024
If only there was a part of the specification that describes the effect of choosing interpolation color space
svgeesus commentedon Jun 23, 2024
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 commentedon Jun 23, 2024
Hm, does that mean we should default to
xyzinstead, sincecolor-mix()is modeled around color mixing?svgeesus commentedon Jun 23, 2024
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 commentedon Jun 24, 2024
What about other interpolations like transitions/animations? Should all of them be consistent?
svgeesus commentedon Jun 24, 2024
If we default to Oklab for
color-mix()we should have the same default for transitions and animations, yes, and for the same reason.5 remaining items
[css-color-5] Make oklab the default interpolation space for color-mix()
svgeesus commentedon Sep 9, 2025
Needs more examples:
[css-color-5] Default to oklab for color-mix(), allow color-interpola…
svgeesus commentedon Mar 23, 2026
I just added the omitted color space example, and the 3 component one was already there.
[css-color-5][editorial] Add example with omitted colorspace, #10484
Update serialization of color-mix()