[css-color-5] Which color do percentages in color-mix() apply to?

[LeaVerou]

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>:

When a plain number or percentage is specified (without a color-adjuster), it applies to all color channels in the given colorspace equally.
If the plain number or percentage is omitted, it defaults to 50% (an equal mix of the two colors).

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?

[argyleink]

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

[svgeesus]

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.

[snigo]

I 100% agree that percentage should indicate opacity of the second color.
You also need to keep in mind that I might wanna mix already semi-transparent colors:

/* 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 */

[LeaVerou]

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

[snigo]

@LeaVerou Thanks for your reply! Just to confirm, will this result in #ff03?

color-mix(red #ff03 100%);

For some reason my brain fights this ))

[svgeesus]

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 #ff03 end

[svgeesus]

Syntax now updated by @LeaVerou so that the percenage immediately follows each color; examples updated just now to follow the new syntax.