[css-color] interpolating between color spaces

[grorg]

How should a transition between "blue" and "color(display-p3 1 0 0)" work?

My current thought is to work out which of the endpoints is in the biggest color space, convert the endpoint in the smaller space to the bigger space (which won't always be 100% accurate), then apply the interpolation.

However:

• how to decide which is the bigger space?
• how to convert from one space to another?

... both in a way that is interoperable between all browsers.

[svgeesus]

You are right that the endpoints need to be converted. However, the concept of "biggest" is poorly defined (for example the P3 and AdobeRGB gamuts are roughly the same size, and neither fully encloses the other). Instead, the Working Colorspace is what they are converted to. The defaut value of that space is sRGB, obviously, but other options will include P3, Rec2020, and Lab/LCH.

[grorg]

Note that this affects gradients as well, not just transitions.

[css-meeting-bot]

The CSS Working Group just discussed Interpolation between different color spaces, and agreed to the following resolutions:

• RESOLVED: Use the working color space for now.

The full IRC log of that discussion

<dino> Topic: Interpolation between different color spaces
<dino> Github Topic: https://github.com/w3c/csswg-drafts/issues/883
<flackr> dino: following on from issue 300, if experimentation pans out than I agree with ChrisL_, do interpolation in document color space which means you may get discontinuities at the ends
<flackr> ChrisL_: you said earlier you wouldn't get discontinuities at the end
<flackr> dino: I said if experimentation works out, then hopefully the working color space does something that does not result in discontinuities
<flackr> Rossen: we can independently resolve on interpolating
<dino> linear-gradient(rgb(255, 0, 0), color(display-p3 1))
<flackr> dino: this will get a solid color, not a gradient in the working color space SRGB
<flackr> leaverou: if the working space is SRGB, then the display color is clipped?
<flackr> dino: it's clipped within a gradient, but not in the background color
<flackr> dino: I'm trying to come up with a color space that's the same as what people are used to but allows interpolation outside of it
<flackr> ChrisL_: explains something
<leaverou> leaverou: We can't we interpolate in the union of the two working spaces or lab? The author intent is clear: I want to interpolate between sRGB red and P3 red. Those are not the same colours.
<leaverou> s/We can't we/Why can't we/
<ChrisL_> chrisl: this is why the working colorspace exists. its npt possible to pick the 'larger' because they can intersect. for example p3 and adobergb
<ChrisL_> this is why we have working colorspace which can be set to Rec2020, or XYZ, or Lab
<ChrisL_> and will never clip
<ChrisL_> This is why I want to have lab as an option because apart from not clipping it also gives better results
<leaverou> http://dabblet.com/gist/1b1344c158bf599bfc1ad47cc1265e7a
<flackr> dino: I don't know how expensive it is to use Lab
<flackr> ChrisL_: when you have two things with different color profiles they'll get converted to XYZ or Lab
<ChrisL_> because those are the two profile connection spaces for ICC profiles
<flackr> dino: I will provide feedback based on our implementation. We can always use Lab and this issue will go away - get no banding
<flackr> dino: at which point you asked why do we need a working color space for the document?
<flackr> leaverou: we still need to define what colors in the document resolve to
<flackr> dbaron: when you're combining different stylesheets from multiple sources you don't want one stylesheet to change the meaning of things in another stylesheet
<flackr> ??: variables?
<flackr> dbaron: you know you're doing it
<flackr> TabAtkins: we previously had issues where we didn't want to let other unrelated stylesheets mess with your colors
<leaverou> s/we still need to define what colors in the document resolve to/we still need to define what the rgb(), hsl() etc colors in the document resolve to/
<flackr> dino: if an imported stylesheet sets the document working color space we should come up with some rules for how its processed
<flackr> TabAtkins: let's give colors all defined meanings
<flackr> ChrisL_: let's continue to, they've always had defined meanings but the fidelity has ramped up
<flackr> leaverou: if all colors have defined meanings, why do we need a working color space?
<ChrisL_> continue to, as has been fdefined since css1
<flackr> dino: we only need a working color space for interpolation
<flackr> dbaron: even if color A is defined and color B is defined, it depends on the color space what is half-way between them
<flackr> leaverou: convert to Lab
<flackr> TabAtkins: converting to Lab is *an* answer, not necessarily the answer
<flackr> ChrisL_: that's an option, it's not compatible with what we have at the moment
<flackr> leaverou: to be better
<flackr> dbaron: but it would be a change
<dbaron> s/depends on the color space/depends on the working color space/
<flackr> Rossen: do we have a counter proposal? if not let's go with dino's proposal
<flackr> Rossen: you'd interpolate between colors in the document working space
<flackr> RESOLVED: Use the working color space for now.
<TabAtkins> ScribeNick: TabAtkins
<ChrisL_> s/Use the/Interpolate bweteen colors by converting them to the/

[svgeesus]

How should a transition between "blue" and "color(display-p3 1 0 0)" work?

Like this

live example

The "biggest space" is lab, and all colors can be converted to and from that exactly.

[svgeesus]

Now documented in the CSS Color 5 section on interpolating colors