[csswg-drafts] [css-color-5] [css-values-4] Interpolation and mixing of colors (#5392)

kbabbitt has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-color-5] [css-values-4] Interpolation and mixing of colors ==
TL;DR: Colors are specified to interpolate using premultiplied alpha. The color-mix() spec doesn't mention premultiplying, which I took to mean "straight" alpha. I think they should be consistent, but I'm not sure what to align them to.

----

https://github.com/w3c/csswg-drafts/issues/3847 resolved to make system color keywords compute to themselves. This creates complications for animations and transitions, which operate on computed values. Presently an author can specify a transition from, say, MenuText to CanvasText and the RGB values will be interpolated. Absent other changes, retaining these keywords at computed-value time would yield a "discrete" animation.

In that discussion, @upsuper wrote:
> It sounds this would make color animation more complicated. You may need to be able to express a computed color like `10% currentcolor + 20% Canvas + 30% Text + ... + 5% red`, which... doesn't sound fun.

We now have a (proposed) tool to do that: the color-mix() function. I was going to suggest the following: Just like we use calc() to interpolate between length and percentage values, we use color-mix() to interpolate between colors which can be resolved to channel values at computed-value time and colors which cannot.

Then, I read https://www.w3.org/TR/css-values-4/#combine-colors, which states:
> Interpolation of <color> is defined as the independent interpolation of each component (red, green, blue, alpha) as a <number>. Interpolation is done between premultiplied colors (that is, colors for which the red, green, and blue components specified have been multiplied by the alpha).

Right now the draft for color-mix() doesn't say anything about premultiplying alpha. Without that, I would naively expect mixing to be "straight" channel-by-channel. But that would mean we couldn't use color-mix() to interpolate without potentially breaking existing content.

Intuitively, I would expect "interpolate" and "mix" to be consistent with each other. I'm leaning towards having color-mix() use premultiplied values, but there might be consequences to that I haven't thought of.

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5392 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Tuesday, 4 August 2020 17:47:44 UTC