Repository navigation
[css-color-4] rewrite 13. Color interpolation to be more explicit about all the steps and effects #14347
Description
For example:
color-mix(in hsl, hsl(30deg 40% 80% / 25%), hsl(90deg 0 80% / 25%))
color-mix(in hsl, hsl(30deg 40% 80% / 25%), hsl(90deg none 80% / 25%))
In both cases browsers do a linear interpolation between 30deg and 90deg while in my implementation the 90deg is powerless and becomes missing. This missing hue is then filled in with the 30deg from the other color.
I suggest rewriting section 13 to make it clearer what all the steps are.
This step seems redundant as it is already included in https://drafts.csswg.org/css-color-4/#color-conversion
Add a step between what is now 4. and 5. for "the missing component is treated as having the other color’s component value"
or maybe at another position in the sequence?
With those suggestions the spec text would be become:
- checking the two colors for analogous components and analogous sets which will be carried forward
- converting them both to a given color space which will be referred to as the interpolation color space below.
- (if required) re-inserting carried forward values in the converted colors
- fill in missing components with the other color's component values
- (if required) fixing up the hues, depending on the selected <hue-interpolation-method>
- changing the color components to premultiplied form
- linearly interpolating each component of the computed value of the color separately
- undoing premultiplication
If color space conversion (and there for powerless to missing) is actually intended to be a conditional step, then step 2. should explicitly state this.
For example:
- (if required) converting them both to a given color space which will be referred to as the interpolation color space below.
With this last change I think the spec would match browser behavior.
No idea if we actually want to change the spec to match :)
Activity
[-][css-color-4] rewrite 13. color interpolation to be more explicit about all the steps and effects[/-][+][css-color-4] rewrite `13. Color interpolation` to be more explicit about all the steps and effects[/+]svgeesus commentedon Aug 19, 2026
Agreed.
It is redundant, but the "prepare" step is not liked and seems to be going away. So it is better to deal with the redundancy that way, leaving the powerless to missing step here.
Agreed. We already have a similar concept in CSS Color 5 for relative colors, Conversion, if required:
romainmenke commentedon Aug 19, 2026
The contents of the prepare section are fine (imo) but having them as a separate section without explaining why it is a separate section seems less than ideal.
But it is also fine to have the redundancy here :)
Best to then make it clear that this is tied to color conversion:
romainmenke commentedon Aug 19, 2026
Proposed text:
romainmenke commentedon Aug 22, 2026
I've tested this on my end and didn't get any unexpected side effects: https://github.com/csstools/postcss-plugins/pull/1889/changes
svgeesus commentedon Aug 25, 2026
Closed by #14374
romainmenke commentedon Aug 25, 2026
thanks!
yisibl commentedon Aug 28, 2026
@romainmenke Does the WPT need to be revised to reflect the changes made here?
romainmenke commentedon Aug 28, 2026
As this change made the spec match browser implementations, I suspect not.
But I will check anyway :)
WPT is incorrect for many things regarding none/powerless so needs updating anyway.
romainmenke commentedon Aug 28, 2026
@yisibl see: web-platform-tests/wpt#62272
yisibl commentedon Aug 30, 2026
Nice!