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!

[svgeesus]

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

In color.js, when you "manipulate luminance" you are converting the color to XYZ and then changing the luminance (Y) without changing X or Z. That is probably not what you wanted to do (which, I guess, is to get the same color but lighter or darker).

In chroma.js, luminance is the relative brightness, according to the WCAG definition. That means it is only defined for sRGB colors. Color.js calculates it correctly for any colorspace.

In chroma.js, when you modify luminance:

chroma.js also allows you to adjust the luminance of a color. The source color will be interpolated with black or white until the correct luminance is found.

It doesn't say what space is used for the interpolation, but it is mixing with either black or white depending on whether the luminance is darker or lighter.

If that is what you want, you can also mix colors in color.js. Or you could convert the color to Oklch, set the lightness, and then gamut map back to sRGB. This works because in Oklch the lightness, the hue, and the chroma are all independent.