[css-color-4] Allow any color space as part of the interpolation method?

[mirisuzanne]

Currently, the color-interpolation-method syntax production accepts a limited list of color spaces for interpolation:

<rectangular-color-space> = srgb | srgb-linear | lab | oklab | xyz | xyz-d50 | xyz-d65
<polar-color-space> = hsl | hwb | lch | oklch

That leaves out several of the predefined rgb spaces like display-p3, rec2020, and so on. I imagine that's because all rgb spaces would give a similar (the same?) result to either srgb or srgb-linear - so there's no particular use-case? But I think this makes it harder to teach. If srgb and display-p3 interpolation would have the same result, why not allow authors to use either one? Both are well defined and meaningful, they just happen to be an alias for the same thing. But why should we need to memorize which is the right rgb interpolation space?

[svgeesus]

I imagine that's because all rgb spaces would give a similar (the same?) result to either srgb or srgb-linear

All the RGB spaces are defined over the extended range, so all of them with the same or similar gamma will give identical or near-identical results. In particular, display-p3 and srgb have identical transfer functions and will behave identically.

Extended-range srgb-linear (or any other D-65 linear RGB space) will give the identical results to xyz-d65.

But I think this makes it harder to teach. If srgb and display-p3 interpolation would have the same result, why not allow authors to use either one? Both are well defined and meaningful, they just happen to be an alias for the same thing.

This is a fair point.

[brianosman]

I actually came here this morning to ask the inverse question: Why do we offer srgb-linear, xyz-d50 and xyz-d65? I claim that any linear RGB space (regardless of white point) will produce the same answer. Having three options that all resolve to the same behavior is a confusing trap for people that don't understand the color science.

[brianosman]

Ah, just noticed one other thing that you mentioned... srgb and display-p3 would NOT behave identically. Any non-linear color space will give different results, because the gamut transform doesn't commute with the transfer function. It's really just linear RGB spaces that are all equivalent, as far as interpolation is concerned.

[svgeesus]

Any non-linear color space will give different results, because the gamut transform doesn't commute with the transfer function.

You are right. I wasn't thinking clearly.

[svgeesus]

So we basically have two options here:

1. Reduce the current set down to those that give different results
2. Expand the current set up to include all defined color spaces

The current set was intended to cover these cases:

a) you want physical linear-light mixing. xyz-d65 is the ideal choice here. srgb-linear will give the same result, as it is defined over the extended range.
b) you want perceptual uniformity. Oklab is the best choice here, with CIE Lab provided as a less good but more familiar option
c) you want perceptual uniformity and care more about avoiding chroma loss than you do about colors swinging out of gamut: so Oklch, or (much worse) CIE LCH
d) you want backwards compatibility more than you want good results, so gamma-encoded sRGB

[mirisuzanne]

To me it seems better if authors can use any color space that has the behavior they want - instead of forcing them to memorize which is the 'correct' space for a specific behavior. I don't see what about that would be a 'confusing trap' - or how it would trip people up.

[svgeesus]

The confusing trap is the following line of reasoning:

I'm specifying colors in the shiny display-p3 color space so they look great on modern screens
What color space should I use for color-mix() | gradient interpolation | animation | etc?
Probably should be display-p3 too, right?

[mirisuzanne]

I suppose I'm not entirely convinced that limiting the available interpolation spaces actually helps authors know what they're doing and avoid that. You'd still get that line of reasoning with all the allowed spaces - and confusion when a space is not allowed. There's no clear logic to teach for which spaces are allowed, and which are not allowed - or why one space was selected as a representative of a particular interpolation outcome. I don't know how I would teach this besides: yeah, sorry, you'll just have to memorize it, or look it up every time.

[svgeesus]

I don't know how I would teach this besides: yeah, sorry, you'll just have to memorize it, or look it up every time.

This is a fair point. Adding more spaces just makes the teaching burden harder though.

"Why is this space there"
"Well this other space was there, for historical reasons. So we added a bunch of spaces you should never use, to replicate that mistake"

Also, the spec gives specific guidance:

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

[mirisuzanne]

Huh, if the argument is that we should only provide 'good' options (those listed in the spec), and a 'legacy' option - then I'm curious why hsl/hwb/srgb are all included. They give different results, but none of them are mentioned as 'best' options, and only one is required for 'legacy' reasons.

I'm still a bit torn on that as an approach here - but if we want to go the way of limiting to a recommended set, it seems like we should go all-in on that, and limit the list as much as possible, so there are only a few 'best' options to choose from?

[svgeesus]

if we want to go the way of limiting to a recommended set, it seems like we should go all-in on that, and limit the list as much as possible

I think that makes the most sense.

hsl has one advantage over oklch or lch: the result is never out of gamut for sRGB. And many disadvantages, like lightness being meaningless if the hue is different, and hue being very unevenly spaced, and not supporting colors outside of sRGB. I didn't feel entirely comfortable omitting it, but also not very happy to see it there.

[nex3]

Maybe this is a naive question, but why does it matter if the result of interpolation is in-gamut for sRGB if browsers will gamut-map it anyway? I understand that gamut-mapping may not always provide ideal results, but neither will sRGB-only (or HSL-only) interpolation.

If you do go the route of limiting the interpolation options to only a certain set of desirable behaviors, maybe it would help clarify to users which interpolation method is for which use-case if you named them after the use-case rather than after one example color space that satisfies that use-case? So linear-light, perceptually-uniform, etc.

[LeaVerou]

I'm fine adding all color spaces to make this easier to learn.