[css-color-5] : mix blue and white

[romainmenke]

I somehow assumed that this was already covered and fixed but it wasn't :)

Implementations do very weird things when mixing white and other colors in polar color spaces.

I've also made a couple of codepens which make it easier to see how each implementation does its own thing today.

OKLCH :

https://codepen.io/romainmenke/pen/NWEaKpL

Webkit:

Blink:

Gecko (doesn't support gradients yet):

---

And the same for LCH :

https://codepen.io/romainmenke/pen/qBvLQJV

Here Gecko produces almost pure red, which is odd :

[svgeesus]

Thanks for these. The cause is a failure to correctly implement CSS Color 4 Interpolating with Missing Components.

This can be seen by changing

#a {
  background: color-mix(in oklch, blue, transparent);
  height: 50px;
}

to

#a {
  background: color-mix(in oklch, blue, oklch(0 0 none / 0);
  height: 50px;
}

or

#b {
  background: linear-gradient(to right in oklch, transparent, blue);
  height: 50px;
}

to

#b {
  background: linear-gradient(to right in oklch, oklch(0 0 none / 0), blue);
  height: 50px;
}

which makes no visual difference. So the conversion of transparent to transparent black to the oklch color (with missing hue) is being done correctly, but this part is not being done:

If a color with a carried forward missing component is interpolated with another color which is not missing that component, the missing component is treated as having the other color’s component value.

Instead a hue angle of 0 is being created to interpolate from, giving the magenta-ish reds.