[css-color-5][css-color-4] Unclear how to use `progress` in interpolation.

[romainmenke]

See:
https://drafts.csswg.org/css-color-5/#color-mix-result

Interpolate a and b’s colors as described in CSS Color 4 §  13. Color Interpolation, with a progress percentage equal to (b’s percentage) / combined percentage), if combined percentage is greater than 0, and 0.5 otherwise. If the specified color space is a cylindrical polar color space, then the <hue-interpolation-method> controls the interpolation of hue, as described in CSS Color 4 § 13.4 Hue Interpolation. If no <hue-interpolation-method> is specified, assume shorter.

When following the link to css-color-4:
https://drafts.csswg.org/css-color-4/#interpolation

However there is no mention of progress in the context of interpolation in the css-color-4 spec.
When updating to the latest spec I got unexpected results and found that my implementation had this interpolation function:

// p is progress
function interpolate(start: number, end: number, p: number): number {
	return (start * p) + end * (1 - p);
}

While I think that the current spec requires this:

// p is progress
function interpolate(start: number, end: number, p: number): number {
	return (start * (1 - p)) + end * p;
}

I vaguely recall that there used to be a link to the images spec with more details on interpolation there?

@svgeesus Might be good to have an explicit definition of the interpolation function and how progress interacts with it.

[svgeesus]

The color-mix() in CSS Color 5 and the color interpolation definitions in CSS Color 4 on which it depends predate the more general progress-based mixing from Weighted Average Notations: the *-mix() family in CSS Values 5. So they don't talk in terms of progress, just in terms of the result.

When we changed color-mix() from a mix of two colors to a mix of n colors, @tabatkins rewrote the mix algorithm and introduced the progress concept to it with that change.

If you are interpolating from say, 100% red to 100% green then at the start, you have 100% of red (and your progress is 0%) so yes, (1 - p) is correct; and by the end your progress is 100%.

Conceptually, the progress based ones go in the opposite direction ("how much progress") while the amount-based color mixing ones go from "how much of the first color" (when there are two colors). Which (again with two colors) means the "progress" is the amount of the second color.

To take a concrete example, color-mix(in oklab, teal 65%, olive 35%) has two amounts, which are directly used to form a weighted sum for each color component. In terms of the weighted average notation, the result is a mix of 100% teal with 100% olive and a progress of 35%.

I agree that the mathematics need to be explicitly described in CSS Color 4; the existing section is all about what color space to use, how percentages are normalized, etc and the calculation was seen as so obvious that it is just given by way of examples.