Manipulating luminance

[eamodio]

I'm sure I'm missing something/not understanding, but I'm trying to understand why I am seeing a big difference when manipulating luminance in color.js vs chroma.js

chroma.js

color = chroma('#0e70c0');
color = color.luminance(0.34)
// color in hex becomes #65a3d7

color.js

let color = new Color("#0e70c0");
color.luminance = 0.34;
color.toString({ format: 'hex' })
// color in hex becomes #00b1ac

Why are these so wildly different colors?

[facelessuser]

It's because luminance doesn't equal what you think it does.

Luminance is the relative luminance and also the Y coordinate in XYZ. That is literally what happens behind the scene: convert to XYZ, return Y. When you set luminance, you set the Y coordinate in XYZ, but XYZ also functions like an RGB color space, where Y controls greens. It's more something scientists noticed that the Y channel also happened to align with luminance.

You are probably making the assumption that adjusting luminance is like adjusting the lightness directly, but it is not.

[eamodio]

Thanks for the info/reply. Does that mean that chroma is "doing it wrong" then?

Do you know how I might achieve the chroma behavior with color.js?

[facelessuser]

Well, other libraries may try to adjust the other channels to give you a similar color while settings luminance to what you set it to. I don't know what they are doing and how accurate it is holding things like hue, but in this case, as long as luminance equals what you set it to, I guess they can both be right.

[facelessuser]

Do you know how I might achieve the chroma behavior with color.js?

In response to this part of your question, normally, what people really want is to adjust lightness but keep hue and chroma relatively the same. I'm not sure if you explicitly need this to align with a particular luminance or not. If all you need to do is adjust lightness, then you'd normally want to use a perceptual color space like Oklab, or something like that.

This takes a red, creates a new version with lightness set to max in the oklab color space, and then just interpolates between to the two colors giving you red with different lightness.

let c1 = new Color('red')
let c2 = c1.to('oklab')
c2.set('l', 1)
c1.range(c2, {space: 'oklab'})

An alternative that may meet your needs is just interpolating a given color between white or black to create tints and shades of a color:

let c1 = new Color('red')
c1.range('white', {space: 'oklab'})
c1.range('black', {space: 'oklab'})

If you absolutely need color to adjust in lightness but have that lightness correspond to a given luminance, most lightness methods are based on luminance, some completely off of luminance, and you could calculate a lightness that meets your luminance requirement, and then set that color to have your calculated lightness.

[eamodio]

Thank you for your help and explanations!