Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CSS color-mix function #526

Closed
kbabbitt opened this issue Jun 17, 2020 · 13 comments
Closed

CSS color-mix function #526

kbabbitt opened this issue Jun 17, 2020 · 13 comments
Assignees
Labels
Resolution: satisfied The TAG is satisfied with this design

Comments

@kbabbitt
Copy link

kbabbitt commented 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

@svgeesus
Copy link

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
Copy link

@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
Copy link

alice commented Jun 24, 2020

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?

@atanassov
Copy link

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

dbaron added a commit to dbaron/csswg-drafts that referenced this issue Jun 24, 2020
The main bug was reported both in a comment in the spec and in
w3ctag/design-reviews#526 (comment)

This also fixes dropping of a "9" digit in the red's chroma midway
through the calculations.

Note that the correct intermediate is well out of sRGB.  I just chose to
use it anyway and add a note about such cases.
@LeaVerou
Copy link
Member

LeaVerou commented Jun 25, 2020

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

@svgeesus
Copy link

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
Copy link

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

@kbabbitt
Copy link
Author

kbabbitt commented Jul 8, 2020

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
Copy link

svgeesus commented Jul 19, 2020

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
Copy link

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

@kbabbitt
Copy link
Author

@svgeesus Merged, thanks for the update!

@alice
Copy link

alice commented Aug 17, 2020

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!

@alice alice closed this as completed Aug 17, 2020
@alice alice added the Resolution: satisfied The TAG is satisfied with this design label Aug 17, 2020
@mysteryDate
Copy link

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Resolution: satisfied The TAG is satisfied with this design
Projects
None yet
Development

No branches or pull requests

8 participants