Re: [csswg-drafts] [css-values-5] Accept more than 2 values in `*-mix(<progress>, ...)` and `progress()` notations (#11530)

> Basically mixing has the opposite behavior of interpolation

I disagree that they are opposites. Whether you call `color-mix(100% color1, color2)` and `color-mix(color1, 100% color2)` mixing or interpolation, it's clear that they are the same kind of thing, just with different weights. And `color-mix(100%, color1, color2)` is equivalent to the latter, not the former.

> While it's unclear what something like `color-mix(color1 50%, color2 30%, color3)`

Well, I think https://drafts.csswg.org/css-color-5/#color-mix-percent-norm could be generalized in a quite natural way:

1. Let `S1` be the sum of the non-omitted percentages: 50% + 30% = 80%
2. Distribute (in equal parts) `100% - S1` among the values that omitted their percentage. In this case there is a single omitted percentage, so the 3rd color takes all of the remaining 100%-80% = 20%
3. Let `S` be the sum of all percentages (note this is `100%` if there was some omitted percentage, otherwise it's `S1`). So 100% in this case.
5. If `S` is 0%, the function is invalid
6. If `S > 100%`, scale all percentages accordingly so that they add up to 100%.
7. If `S < 100%`, save `S` as an alpha multiplier. They scale percentages accordingly so that they add up to 100%.

So in this case it would be `color-mix(color1 50%, color2 30%, color3 20%)`, equivalent to

```
color-mix(
  color1 50%,
  color-mix(color2 60%, color3 40%) 50%
)
```

> something like `color-mix(80%, color1, color2, color3)` can be well defined: color2 is at 50% so 80% represents 30%/50% = 60% from color2 to color3, i.e. `color-mix(60%, color2, color3)`

Yes that can work, though I would maybe call this color picking rather than mixing/interpolating. Because it's placing colors at equidistant positions between 0% and 100%, and then picking the color at the provided percentage, falling back to interpolating the nearest pair of colors if there is no color at that exact position.

However, I think forcing equidistant positions may be a bit inflexible. Just like gradients, I'm pretty sure that authors will ask to be able to assign colors at a custom percentage position, or even a range. But these positions could be confused with mixing weights, so I would prefer a different function name.

-- 
GitHub Notification of comment by Loirooriol
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/11530#issuecomment-2601089643 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 20 January 2025 00:14:44 UTC