[css-images] Don't force non-legacy colors to interpolate in a gamma-encoded space

[LeaVerou]

Surprisingly, Color 4 does not actually have an interpolation section.
Color 5 does, and Color 4 is even referencing Color 5 in a section.
Images 3 on the other hand defines its own interpolation rules, and specifies that gradients interpolated in premultiplied (gamma-corrected) RGBA, which is clearly from back when all we were dealing with were sRGB colors (though interpolating in gamma-corrected space is suboptimal for those too).

Where to define interpolation? Since Color 4 defines the actual color values, Color 4 needs to define how they interpolate. We cannot define values in one level and interpolation in the next level and we can't have level N citing level N+1.

How to interpolate? In previous discussions, the rule we had discussed was that if two colors are in the same color space, they interpolate in that color space, otherwise in Lab. After further thinking, I don't think that's a good idea. It does maintain backwards compat for old sRGB forms, but it forces new RGB forms like color(display-p3) or even color(srgb) (which we resolved in #5825 that is stored separately from legacy sRGB formats) to also interpolate in gamma-corrected space. Instead, I think the rule should be that colors interpolate in Lab (or XYZ), unless both colors being interpolated are legacy sRGB forms (for backwards compat) OR the host syntax defines a different interpolation space (e.g. color-mix()).

[svgeesus]

Not that surprising. CSS Color 4 is about specifying colors. (It's also pretty stable and seeing multiple implementations, so will go to CR soon).

CSS Color 5 is about combining and manipulating color - mixing, contrast calculation, and the like. It is therefore natural that it has a section on Color interpolation, which includes alpha premultiplication, and hue interpolation (that subsection mainly written by @LeaVerou , with corrections by @dbaron).

Color 5 is less mature, though we do have a resolution to publi

So the color interpolation is in the right specification. It is true though that it should probably hace been called something like CSS Color Manipulation 1.

[svgeesus]

By the way, as CSSWG already discussed, how to interpolate colors also depends on why you are interpolating for. As an example, compositing should be done in a linear-light space like CIE Lab.

Edit: I meant to type CIE XYZ there.

So Compositing-1 needs updating there; it currently only allows compositing in gamma-encoded sRGB. Filters-1 likewise needs updating (it currently only allows linear-light sRGB). And the definitions of gradients in CSS Images-4 need updating (again they are restricted to gamma-encoded sRGB, so you can't interpolate sRGB to P3 for example).

I'm not prepared to hold up CSS Color 4 while all those other specs get their wider-than-sRGB upgrades.

[svgeesus]

Instead, I think the rule should be that colors interpolate in Lab (or XYZ), unless both colors being interpolated are legacy sRGB forms (for backwards compat)

That I certainly agree with.

[dbaron]

What are you suggesting for handling of alpha in interpolation?

[svgeesus]

OR the host syntax defines a different interpolation space (e.g. color-mix()).

Color-5 already says that.

Host syntax can override the interpolation color space and specify which color space is used for interpolation. For example, color-mix and color-adjust override the default to LCH.

[svgeesus]

What are you suggesting for handling of alpha in interpolation?

Interpolating with alpha defines this (for all colorspaces, not just for sRGB).

[LeaVerou]

By the way, as CSSWG already discussed, how to interpolate colors also depends on why you are interpolating for. As an example, compositing should be done in a linear-light space like XYZ. So Compositing-1 needs updating there; it currently only allows compositing in gamma-encoded sRGB. Filters-1 likewise needs updating (it currently only allows linear-light sRGB). And the definitions of gradients in CSS Images-4 need updating (again they are restricted to gamma-encoded sRGB, so you can't interpolate sRGB to P3 for example).
I'm not prepared to hold up CSS Color 4 while all those other specs get their wider-than-sRGB upgrades.

We should definitely not hold up Color 4 until other specs update, but that's not what I was proposing. Color 4 needs to have an interpolation section, which defines interpolation for the common case (gradients, transitions etc), and clarifies that other specs may wish to override, leaving it up to them. We typically define how values interpolate in the same spec where the values are defined. Otherwise, if a UA wishes to implement Color 4 but not Color 5, how are they supposed to implement e.g. gradients between Lab colors? Surely they can't (and shouldn't) follow the Images spec and interpolate them in (s)RGBA.

[dbaron]

Interpolating with alpha defines this (for all colorspaces, not just for sRGB).

Sounds good to me (although perhaps some of the text in the examples should also have normative text saying the same thing).

[svgeesus]

although perhaps some of the text in the examples should also have normative text saying the same thing

Oof, yes, will check for anything only said in examples! Although, checking, I don't see anything in the text that is not mentioned normatively - do you have any specific text in mind?

[svgeesus]

After further offline discussion with @fantasai and @LeaVerou I plan to move the entire Color interpolation section from CSS Color 5 to CSS Color 4.

@tabatkins (for Color 4) @una @argyleink (for Color 5) any objections to that?

The color interpolation section was not in the CSS Color 5 First Public Working Draft so there is no patent policy implication. However since Color 4 will be going to CR soon, I want to get it into Color 4 before that, so that we get the patent policy protection on that section as soon as the CR exclusion period ends.

[svgeesus]

After that move, and building on the recent decision about color(srgb ...) being a higher-bit-depth non-legacy opt-in, I can then fix that section so that the legacy colors do the broken thing they already do for Web compat, while the non-legacy colors do the right thing by default and with more flexibility.

[argyleink]

no objections 👍🏻

[svgeesus]

@LeaVerou wrote:

Where to define interpolation? Since Color 4 defines the actual color values, Color 4 needs to define how they interpolate. We cannot define values in one level and interpolation in the next level and we can't have level N citing level N+1.

done

How to interpolate? In previous discussions, the rule we had discussed was that if two colors are in the same color space, they interpolate in that color space, otherwise in Lab. After further thinking, I don't think that's a good idea. It does maintain backwards compat for old sRGB forms, but it forces new RGB forms like color(display-p3) or even color(srgb) (which we resolved in #5825 that is stored separately from legacy sRGB formats) to also interpolate in gamma-corrected space. Instead, I think the rule should be that colors interpolate in Lab (or XYZ), unless both colors being interpolated are legacy sRGB forms (for backwards compat) OR the host syntax defines a different interpolation space (e.g. color-mix()).

also done

Still needs some examples, but please review.

[Myndex]

Hi @svgeesus I moved my reply to the approriate thread:

#6061 (comment)

[svgeesus]

To recap, the color interpolation section has been moved from Color 5 to Color 4 and the requested edits have been made to that section.

The remaining part is

Images 3 on the other hand defines its own interpolation rules, and specifies that gradients interpolated in premultiplied (gamma-corrected) RGBA, which is clearly from back when all we were dealing with were sRGB colors (though interpolating in gamma-corrected space is suboptimal for those too).

Re-tagging therefore to Images 4, which is the current work.

[Smilebags]

I would like to read up on any recent progress on Images 4, in particular whether there is anything regarding the space in which compositing occurs (essentially the equivalent of the new CSS colour interpolation options). I am curious to see the direction in which the web is going in terms of how WCG and/or HDR content will be composited in a webpage. Is there any draft specifications in this area?

[svgeesus]

@Smilebags interpolation for gradients would be defined in images 4 (with perceptually uniform spaced like Lab and CH being the most desirable options), but interpolation for compositing would be defined in CSS Compositing; it currently has a gamma-encoded sRGB default and an update would add CIE XYZ because there needs to be a linear-light option.

[Smilebags]

Thanks for that information @svgeesus.
I have been keeping an eye on OKLab and was excited to see your recent presentation on it. I'm optimistic that it will provide a very nice modern default for gradient and colour scheme generation, in particular in domains such as data visualisation and design systems.
I agree the most problematic part of compositing on the web is the lack of an option for linear-light blending. That seems like it should also simplify (or at least be a part of) the solution to compositing of HDR and WCG content into a webpage.

[svgeesus]

There were some good presentations about HDR and HDR/SDR compositing at the workshop:

HDR: Compositing and tone mapping

[LeaVerou]

To recap, the color interpolation section has been moved from Color 5 to Color 4 and the requested edits have been made to that section.

The remaining part is

Images 3 on the other hand defines its own interpolation rules, and specifies that gradients interpolated in premultiplied (gamma-corrected) RGBA, which is clearly from back when all we were dealing with were sRGB colors (though interpolating in gamma-corrected space is suboptimal for those too).

Re-tagging therefore to Images 4, which is the current work.

Since color interpolation syntax was just added to gradient functions in 1f940c6 , I’m gonna go ahead and close this.