#526: CSS color-mix function

Visit on Github.

Opened Jun 17, 2020

Saluton TAG!

I'm requesting a TAG review of the CSS color-mix function.

color-mix takes two color specifications and returns the result of mixing them, in a given colorspace, by a specified amount. For example, color-mix(red yellow 40%) produces a mixture of 40% red and 60% yellow.

Further details:

We'd prefer the TAG provide feedback as (please delete all but the desired option):

💬 leave review feedback as a comment in this issue and @-notify @kbabbitt

Discussions

Comment by @svgeesus Jun 20, 2020 (See Github)

Looping in the CSS Color 5 spec editors: @LeaVerou @argyleink @una @svgeesus

Also noting that color-mix() depends on the section Interpolation in the same specification.

Thanks to @kbabbitt for offering to contribute tests. While there are none in WPT, the specification does have a number of examples (with full working and the correct end result) which could swiftly be turned into WPT reftests once there is a fledgling implementation to test against.

Discussed Jun 22, 2020 (See Github)

Rossen: rather straightforward review... i can be on it.

[Rossen, David & Alice

Comment by @atanassov Jun 24, 2020 (See Github)

@kbabbitt to help speed up the review, it would be helpful if you can add an explainer about the feature and some motivational examples.

Comment by @alice Jun 24, 2020 (See Github)

Example showing mixing red and yellow and getting a kind of khaki color

This example seemed a little odd to me. The mixed color is labelled "red-orange", but that's not how I would describe it - it looks more brown or khaki. It's a surprising result for mixing red and orange. Is this a typo somewhere, or is this what I would expect if I called color-mix(red yellow 65%);, using the default color mixing options?

Comment by @atanassov Jun 24, 2020 (See Github)

@alice this is a good feedback to the authors of the spec. @svgeesus - perhaps you folks should try and address this? Happy to open a separate CSSWG issue if it helps.

Comment by @LeaVerou Jun 25, 2020 (See Github)

@alice @atanassov This is certainly an error in the calculations. My result is much closer to actual orange-red:

image

Though keep in mind that gamut mapping is needed to display the color in current sRGB browsers, so the end result depends on the gamut mapping algorithm, but is certainly not the khaki/olive that is currently there.

We will address the issue in the spec promptly. There is already a PR, though we also need to flesh out which color the percentage applies to.

Comment by @svgeesus Jun 25, 2020 (See Github)

I'm thinking to accept the PR from @dbaron because it avoids out of gamut colors and corrects the error in the calculation (which was originally done by hand). Any syntax shuffle is then easy to add on top.

Comment by @svgeesus Jun 26, 2020 (See Github)

Thanks @dbaron for the careful PR and so glad I left that comment of ugly code in the SVG:) Merged

Comment by @kbabbitt Jul 8, 2020 (See Github)

Explainer for this feature is now available at: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSColorMix/explainer.md

I'll edit the original request to include this link as well.

Discussed Jul 13, 2020 (See Github)

[Ran out of time before we got to this.

Comment by @svgeesus Jul 19, 2020 (See Github)

For example, color-mix(red yellow 40%) produces a mixture of 40% red and 60% yellow.

The syntax has now changed as a result of resolving https://github.com/w3c/csswg-drafts/issues/5258 so that example would now be

color-mix(red 40%, yellow) or indeed color-mix(red 40%, yellow 60%) or, in sRGB rather than LCH color-mix(srgb red 40%, yellow)

Comment by @svgeesus Jul 19, 2020 (See Github)

@kbabbitt I sent a PR on your explainer, updating to the latest syntax.

Comment by @kbabbitt Jul 22, 2020 (See Github)

@svgeesus Merged, thanks for the update!

Discussed Aug 3, 2020 (See Github)

Deferred until Alice is available.

Discussed Aug 17, 2020 (See Github)

Rossen: It looks like a number of the issues and new syntax has been addressed.

Alice: Yes, the new syntax is pretty good. The explainer looks good too. ... It would be interested to understand what happens when mixing in LCH as this isn't covered in the explainer but are in the spec. How would that work and what would it mean? Not clear on the utility of that.

Tess: I don't really have good understanding of Color in terms of mixing, i.e. this feature. Ideally the explainer should be good enough for someone like me to understand what's going on, how do I use it and what to expect.

Alice: This part is only in the spec and not very clear there either.

All: Conversation about how we, TAG, should be engaging and providing feedback to design requests that are driven by others than those who wrote the spec.

Alice: The explainer does motivate the feature and is really good. The one detail about the hue interpolation in the spec looses me and it would be great to understand it. Why are there values other than shorter?

Peter: Mostly when you're doing intepolations for transitions or animations. As clolor is a 3D space, the curves you get during interpolation between short and/or long path will give you very different light color values that you want authors to have access to. Maybe there are other cases when you're simply mixing between two things, why would you need anything else other than shorter?...

Alice: That satisfies my curiosity, thank you. Suggest we close as satisfied and open a bug with the spec.

Comment by @alice Aug 17, 2020 (See Github)

The new syntax looks great, and the explainer does a good job of motivating and explaining the feature.

I have some questions about the non-default values for hue-adjuster, but they're really more about curiosity, so I'll file an issue on csswg.

Thank you for bringing this to us!

Comment by @mysteryDate Oct 26, 2022 (See Github)

Shipping this in blink soon:

https://groups.google.com/a/chromium.org/g/blink-dev/c/r0QATT8-kOw

Our implementation matches what is described here. So syntax is slightly different than described in this issue. Color spaces get the "in" keyword and a comma precedes the first color:

color-mix() = color-mix( <color-interpolation-method> , [ <color> && <percentage [0,100]>? ]#{2}) i.e. color-mix(in lch, red 40%, yellow)

This matches what has been implemented in webkit and gecko. We aimed to have these tests in WPT passing: https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-computed-color-mix-function.html https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-invalid-color-mix-function.html https://github.com/web-platform-tests/wpt/blob/master/css/css-color/parsing/color-valid-color-mix-function.html

And to pass all tests on wpt interop: wpt.fyi/results/css/css-color