Modifying Chroma value of colors returns `Color is not defined` console error

Hello,

I started running into an error once I started trying to manipulate the chroma values of an array of colors. Depending on the value I add to each chroma, some or all of the colors break the code and return a Color is not defined error, Color referring to the export from Color.js.

I recorded a short screencast showing the situation: https://cln.sh/IDmWv3 and copied the code into a codepen. You can see the line I wrote a comment on saying if you uncomment that line, by applying a transformation to the chroma values, you can see that some of the colors disappear in the HTML.

I appreciate the help looking into this!

[facelessuser]

@doistephen The issue is related to the gamut mapping. I believe there is something wrong with the js package you are importing. The reason why it breaks when you use chroma of 15 is simply that the package is corrupted in some way and your code exercises that path.

In a color space like Lch, theoretically, you can keep raising the chroma, at some point the values you get are not practical as the human eyes have a limit of colors they can see. The sRGB color space, the color space to which you are printing your hex values, does have a limit though.

At some point, you increased your chroma such that it caused your sRGB color to slip out of gamut. This is the minimum reproducible case:

let c = new Color('srgb', [1.0730488766504873,0.9307621541691187,0.8700802895891485]);
c.toString()

Now, this isn’t a big deal normally as Colorjs.io will gamut map the color back to a suitable color so that it can print the hex values you are requesting.

Normally this works fine, for instance, try entering that code into the Colorjs.io notebook: https://colorjs.io/notebook/. You’ll see it works fine. I tried the latest tip in node, and it works fine:

Welcome to Node.js v17.6.0.
Type ".help" for more information.
> const { default: Color } = require("./dist/color.cjs");
undefined
> let c = new Color('srgb', [1.0730488766504873,0.9307621541691187,0.8700802895891485]);
undefined
> c
Color$1 {
  _spaceId: 'srgb',
  toString: [Function: toString],
  coords: [ 1.0730488766504873, 0.9307621541691187, 0.8700802895891485 ],
  alpha: 1
}
> c.toString()
'rgb(100% 94.65% 91.59%)'

But whatever you are importing via Codepen, that instance seems corrupted because trying to print the out of bound color causes the undefined reference.

So, yes, there appears to be a bug in the package you are pulling in. I’m no JavaScript expert, so I’ll let those who are dig a little deeper.

[facelessuser]

Fix is linked