-
Notifications
You must be signed in to change notification settings - Fork 56
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
Comments
Looping in the CSS Color 5 spec editors: @LeaVerou @argyleink @una @svgeesus Also noting that 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. |
@kbabbitt to help speed up the review, it would be helpful if you can add an explainer about the feature and some motivational examples. |
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 |
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.
@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. |
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. |
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. |
The syntax has now changed as a result of resolving w3c/csswg-drafts#5258 so that example would now be
|
@svgeesus Merged, thanks for the update! |
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 Thank you for bringing this to us! |
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:
This matches what has been implemented in webkit and gecko. We aimed to have these tests in WPT passing: And to pass all tests on wpt interop: wpt.fyi/results/css/css-color |
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
The text was updated successfully, but these errors were encountered: