Repository navigation
[css-color-5][css-color-4] Unclear how to use progress in interpolation. #14021
Description
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.
Activity
svgeesus commentedon Jun 18, 2026
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 ofncolors, @tabatkins rewrote the mix algorithm and introduced the progress concept to it with that change.If you are interpolating from say,
100% redto100% greenthen at the start, you have100%of red (and your progress is0%) so yes,(1 - p)is correct; and by the end your progress is100%.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 of35%.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.
svgeesus commentedon Aug 30, 2026
@romainmenke Please see new sub-section 13.1. Component-wise Linear Interpolation
romainmenke commentedon Aug 30, 2026
Perfect! Thank you 🙇