Does anyone here understand color spaces?

[Yellow-Subroutine]

Hi,

I have an Ikea light bulb that accepts rgb-values for setting the colour, however the state messages it sends look like this:

``{"brightness":254,"color":{"hue":0,"saturation":100,"x":0.7006,"y":0.2993},"color_mode":"xy"

so it uses (I think) the xyY color-space, however it also reports hue and saturation which as far as i understand it are not independent of x and y.

i would like to translate such a message into an corresponding rgb-value but so far have not figured out how to do this.

Does anybody here understand this?

[sjorge]

It's a bit tricky, lights can be in xy, hue/sat, or color temperature mode. Which ones are supported depend on the hardware. Philips Hue supports all 3 usually. Ikea either xy or color temp depending on the bulbs.

https://github.com/Koenkk/zigbee-herdsman-converters/blob/master/src/lib/color.ts

Has the code that deals with the conversions. We try to use the color mode the device reports as active to parse and map that to the others so the properties in the mqtt payload stay in sync.

Or you can also disable that behavior. (Which i personally do and manually deal with it based on the color_mode property)

[Yellow-Subroutine]

Thanks for the reply, I'll have a look at the code and see if it solves my problem.

But just to understand the issue:

A color temperature determines the color but not all colors have a corresponding temperature - so by using color temperature you only use a subset of all possible colors - is that correct?

And xy alone do not yet specify a color - you need an extra dimension, which I assume here would be given by the brightness.
So brightness, x and y determine the color as would brightness, hue and saturation - do I have the right picture here?

[sjorge]

zigbeealliance.orgChapter 5.2.2.2.1 should cover most of it~ sjorgeOn 5 Apr 2024, at 17:18, Yellow-Subroutine ***@***.***> wrote: Thanks for the reply, I'll have a look at the code and see if it solves my problem. But just to understand the issue: A color temperature determines the color but not all colors have a corresponding temperature - so by using color temperature you only use a subset of all possible colors - is that correct? And xy alone do not yet specify a color - you need an extra dimension, which I assume here would be given by the brightness. So brightness, x and y determine the color as would brightness, hue and saturation - do I have the right picture here? —Reply to this email directly, view it on GitHub, or unsubscribe.You are receiving this because you commented.Message ID: ***@***.***>

[Rablet]

Came across this discussion whilst trying to understand colour spaces.
I'm playing with an IKEA colour bulb and trying to convert the xy colour to RGB.

What I'm trying to do is send in a Hex colour:
{"color": {"hex": "#0f4452"}}
This results in the bulb being set to this colour:
"color": { "x": 0.1639, "y": 0.2801 },

Hex #0f4452 translates to RGB 15,68,82 so in theory I should be able to convert x=0.1639 and y=0.2801 to that RGB, however I can't figure out how to do so.

Using the methods from color.ts to attempt conversion:

const colours_js_1 = require("./colours.js");
const rgbColour = colours_js_1.ColorRGB.fromHex("#0f4452");
const xyColour = rgbColour.toXY();
const rgbColourAgain = xyColour.toRGB();
console.log({ rgbColour, xyColour, rgbColourAgain });

rgbColour is 0.058823529411764705, 0.26666666666666666, 0.3215686274509804 (as expected)
xyColour is x: 0.19491351736034787, y: 0.30969602541061053 (different from what the bulb does)
rgbColourAgain is 0.18292671485845025, 0.8292663595242351, 1 so very different from what it was

I feel like I'm missing something obvious here but I'm not sure what. Any help would be much appreciated.

[sjorge]

Probably ome of two things:

• RGB->XY needs to start of as Wide RGB D65, so you need to correct the HEX value -> RGB for that
• there are a gamma correction needed, most use the C variant IIRC

From memory as I am on my phone, both of those should be in z2m's color library

[Rablet]

New attempts. I skipped the hex -> RGB conversion this time and just started with an RGB value of 0.5,0.5,0.5:

First I tried from RGB to HSV which seems to work:

const rgb = new ColorRGB(0.5, 0.5, 0.5);
const hsvFromRGB = rgb.toHSV();
const rgbFromHSV = hsvFromRGB.toRGB();
console.log({ rgbFromHSV }); // --> Works: { rgbFromHSV: ColorRGB { red: 0.5, green: 0.5, blue: 0.5 } }

Then an attempt of RGB to XY and back without any gamma correction. Wrong result:

const xyFromRGB = rgb.toXY();
const rgbFromXy = xyFromRGB.toRGB();
console.log({ rgbFromXy }); // --> Wrong: { rgbFromXy: ColorRGB { red: 0.99999914354823, green: 0.9999973005867242, blue: 1 } }

Then an attempt of RGB to XY and back with gamma correction (I believe I should correct when going from RGB->XY and uncorrect when going XY->RGB). Still no luck:

const xyFromRGBGammaCorrected = rgb.gammaCorrected().toXY();
const rgbFromXYGammaCorrected = xyFromRGBGammaCorrected
  .toRGB()
  .gammaUncorrected();
console.log({ rgbFromXYGammaCorrected }); // --> Wrong: { rgbFromXYGammaCorrected: ColorRGB { red: 0.9999996235179819, green: 0.9999988133819798, blue: 0.9999999999999999 } }

Any other idea as to what I might be messing up?

[Rablet]

Took another look at this with fresh eyes today and made a little bit of progress. I can now convert from hex to RGB and then to the XY value that I see in Z2M. I have an IKEA bulb and when I send a message with color = #6395ed to the set topic I end up with x = 0.1904 and y = 0.1976 and I can replicate that now (minus rounding, but that shouldn't be too painful):

const color = require('./color'); // Where ./color is https://github.com/Koenkk/zigbee-herdsman-converters/blob/master/src/lib/color.ts

const hex = '#6395ed';
const colorRGB = color.ColorRGB.fromHex(hex);
console.log(colorRGB); // Good! --> ColorRGB { red: 0.38823529411764707, green: 0.5843137254901961, blue: 0.9294117647058824  }
console.log(colorRGB.toHEX()); // Good! --> #6395ed so RGB to hex and back appears to work

const gCorrectedXYRGBToXY = colorRGB.gammaCorrected().toXY();
console.log(gCorrectedXYRGBToXY); // Good! --> ColorXY { x: 0.19036456847928956, y: 0.19764052647865835 }

OK so we're feeling good, now let's try converting back to RGB in a few different ways (because I don't understand gamma correction):

console.log('Convert back:');
// No gamma correction on the way back
console.log(gCorrectedXYRGBToXY.toRGB()); // Bad! --> ColorRGB {red: 0.14733204049731696, green: 0.3548852523368415, blue: 1 }
// Gamma uncorrection on the way back
console.log(gCorrectedXYRGBToXY.toRGB().gammaUncorrected()); // Bad! --> ColorRGB {red: 0.4200175199034834,green: 0.630155433783876,blue: 0.9999999999999999}
// Gamma correct again on the way back (doesn't seem right?)
console.log(gCorrectedXYRGBToXY.toRGB().gammaCorrected()); // Bad! --> ColorRGB {red: 0.018999811144723416,green: 0.10341501501303768,blue: 1}

None of these get me back to the RGB values I started with.

[Rablet]

@sjorge any idea what I might be doing wrong? Sorry for being a pain!

[sjorge]

Not sure, It's been very long since I was in this code. (And I don't use it myself as I either use h/s or xy and don't convert in either direction)

There could also be a bugs in there.