CSS color-mix function

[kbabbitt]

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.

• Explainer: https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/CSSColorMix/explainer.md
• Specification URL: https://drafts.csswg.org/css-color-5/#color-mix
• Tests: None exist yet; will write them as part of feature development
• Primary contacts (and their relationship to the specification):
  • CSSWG for the specification
  • @kbabbitt for the Chromium implementation
• Organization(s)/project(s) driving the specification: CSSWG
• External status/issue trackers for this specification (publicly visible, e.g. Chrome Status):
  • https://www.chromestatus.com/feature/5659115386830848
  • https://bugs.chromium.org/p/chromium/issues/detail?id=1092638

Further details:

• ✔️ I have reviewed the TAG's API Design Principles
• The group where the work on this specification is currently being done: CSSWG
• Major unresolved issues with or opposition to this specification:
  • This feature is less generally useful without support for Lab/LCH color spaces, which are under discussion in CSS Color: lab(), lch() #488. However, we need color-mix in sRGB space in order to implement the resolution in [css-color-adjust-1] Is forced color computed or used value? w3c/csswg-drafts#4915 regarding background-color in forced colors mode.

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

[svgeesus]

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.

[atanassov]

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

[alice]

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?

[atanassov]

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

[LeaVerou]

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

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.

[svgeesus]

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.

[svgeesus]

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

[kbabbitt]

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.

[svgeesus]

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 w3c/csswg-drafts#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)

[svgeesus]

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

[kbabbitt]

@svgeesus Merged, thanks for the update!

[alice]

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!

[mysteryDate]

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