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] color-mix() percentage normalization doesn't match animations. #7324

Open
emilio opened this issue May 27, 2022 · 4 comments
Open
Labels
css-animations-1 Current Work css-color-5 Color modification

Comments

@emilio
Copy link
Collaborator

emilio commented May 27, 2022

One nice thing of color-mix is that you can represent the interpolated values between currentColor and other colors in e.g. the computed style.

However, there's no way to represent the interpolated result of a fill animation because of the percentage normalization in https://drafts.csswg.org/css-color-5/#color-mix-percent-norm, which means that color-mix(currentColor 100%, red 100%) ends up with a different alpha rather than with a saturated color.

It'd be good to be able to represent animated colors using color-mix (in the "a bit less bit of magic" sense).

cc @weinig, @svgeesus, @birtles, @BorisChiou

@emilio emilio added css-color-4 Current Work css-color-5 Color modification labels May 27, 2022
@svgeesus
Copy link
Contributor

which means that color-mix(currentColor 100%, red 100%) ends up with a different alpha rather than with a saturated color

For values that sum to greater than 100% the alpha is not affected. You get the same as color-mix(currentColor 50%, red 50%)

@svgeesus
Copy link
Contributor

@emilio Did this answer your question?

@emilio
Copy link
Collaborator Author

emilio commented Jun 19, 2023

@svgeesus: not quite. My point is that animations don't match the color-mix behavior. And probably they should?

@svgeesus
Copy link
Contributor

Looking back over this, it isn't clear to me what change you want in animations. Could you give an apparently-identical color-mix() and animation which seem like they should give the same result but don't?

Or am I misunderstanding the problem entirely.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
css-animations-1 Current Work css-color-5 Color modification
Projects
None yet
Development

No branches or pull requests

2 participants