Interpolator throwing a NaN/undefined

[marcelpi]

Interpolator throwing a NaN/undefined

[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.