Interpolator throwing a NaN/undefined

[marcelpi]

Hey there,

First off, thank you for a wonderful library.
I encountered a bug when trying to interpolate two colors in Lch and okLch space. Everything works fine, except when an interpolated color is black or white and there are more than two colors to interpolate over.

In the example below, I've got 3 colors in the initial color array and something breaks. However, if I delete one of them and start just with two everything works fine.

If I inspect one of the missing colors I notice the CSS property: background: lch(73.90988017397126 107.41130153548478 NaN)
The NaN is probably generating the problem.

Code here: https://codesandbox.io/s/lch-interpolator-wt5yk5?file=/App.svelte

Also, if I put just black and white as starting colors I get background: lch(100.00000139649632 0 undefined) for white and lch(0 0 undefined) for black.

Does this happen because black and white being achromatic colors are missing the h attribute?

[danburzo]

Hi @marcelpi, thanks for logging the issue.

You are right that achromatic colors in lch() and oklch() will not have an h component (as technically it can be any value), so when serializing to CSS you need to account for that, or alternatively use culori.formatCss(lchColor).

A separate issue is that interpolatorSplineMonotone doesn't seem to notice that the hue is undefined for some of the colors and uses it in computations, resulting in NaN. This is worth investigating.

[marcelpi]

Thanks for your answer, @danburzo.
I think that the h component can be interpolated as any other without omitting it, or just default it to 0.
Other spaces consider hsl(12 0% 0%) and hsl(323 0% 0%) as black even though there is a hue.

But I also understand your perspective, my guess is this would also solve the interpolatorSplineMonotone issue.

[danburzo]

In Culori, an undefined value for a component denotes a missing component, which in CSS can be specified by the author with the none keyword. For example, { mode: 'lch', l: 50, c: 50 } is represented in CSS as lch(50% 50 none).

Interpolating a color with lch(50% 50 none) is different from interpolating it with lch(50% 50 0).

Here's Chrome rendering linear-gradient(to right, blue, lch(50% 50 none)). Note that the missing hue picks its value from the blue color.

Here is the same gradient, but with hue = 0: linear-gradient(to right, blue, lch(50% 50 0)).

Interpolation with missing components is described here.

I will need to investigate which conversions make the wrong assumptions and produce NaN.

[marcelpi]

Alright, makes sense. Thanks for clearing that out.