-
Notifications
You must be signed in to change notification settings - Fork 636
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-5] Which color do percentages in color-mix() apply to? #5258
Comments
Yes, let's make this change. I think there's overlapping work between this change and the changes @svgeesus indicates in #4711 (comment)? From what I understand, allowing multiple colors and the syntax it's encouraging, accomplishes the same goal as the intent in this proposal; the % lives with the color(s). |
I agree: percentage only, and closest to the color it is a percentage of. The calculations and the diagrams are unaffected. Also @tabatkins suggested putting the colorspace first. |
I 100% agree that percentage should indicate opacity of the second color. /* A. with providing opacity */
color-mix(#f002 #ff08 50%); /* Basically same as mixing #f002 with #ff04 which suggests I can do next */
/* B. without providing opacity */
color-mix(#f002 #ff04); /* which suggests that third argument must have 100% default value */ |
@snigo The percentage has nothing to do with opacity, it's a percentage along the interpolation line. There's no conflict with alpha, alpha is just another channel to be interpolated. |
@LeaVerou Thanks for your reply! Just to confirm, will this result in color-mix(red #ff03 100%); For some reason my brain fights this )) |
Yes, you have a mixture slider that goes from one color to the other, and the 100% says the slider is hard over to the |
Syntax now updated by @LeaVerou so that the percenage immediately follows each color; examples updated just now to follow the new syntax. |
I've just seen this discussion and this PR by @dbaron about an error in the calculations for
color-mix(red, yellow 65%)
and noticed something else: The calculations are done as if this means 65% red and 35% yellow.However, it is not defined anywhere which color the percentage applies to. This is all that I can see mentioned about the
<number-percentage>
:I think it would make much more sense to have it apply to the color it's closer to, i.e. yellow. Not only is this easier to read and more natural, but it also extends nicely to multiple colors, which we're already discussing In fact, we should allow either or both colors to have a percentage (and normalize accordingly if it doesn't add up to 100%). Actually, @una in this thread used such a syntax naturally, which is another indication it would be user friendly.
If co-editors @svgeesus @una @argyleink agree, I could make the change.
PS: While we're at it, do we really need a
<number-percentage>
? All examples I've seen everywhere, including ours use a percentage. It's very confusing to have numbers that mean percentages, but don't have a % sign, and there's no reason to. Am I missing something?The text was updated successfully, but these errors were encountered: