RGB/xy Color Conversion

Philips Hue lights use xy color coordinates to express hue and saturation of their lights. The calculator below transforms xy color values to sRGB (with Gamma correction) and vice versa.

Most consumer monitors (TV screens, computer screens, tablets, mobile phones) use sRGB. Hence, to match the color of the Hue lights, sRGB colors are the most suitable for apps and websites interacting with such lights. The other color spaces are just there for reference.

Hue lights can display colors within Philips Gamut A, B, or C, depending on the product. Colors outside the gamut triangle are approximated. Since the sRGB gamut is different from these, your Hue light can display colors that your screen cannot, and vice versa.

Source code

The above calculator uses ColorSpace.js.

sRGB → xy

The following code converts RGB colors to xy coordinates:

let color = Color.rgb(255, 0, 0);
let xy = ColorSpace.sRGB.xyYFromColor(color);

xy.x and xy.y can be passed to a Hue light.

If desired, the brightness parameter can be calculated as follows:

let maxY = ColorSpace.sRGB.findMaximumY(xy.x, xy.y);
let bri = xy.Y / maxY * 255;

xy → sRGB

The following code converts xy coordinates and brightness (bri) back to RGB:

let maxY = ColorSpace.sRGB.findMaximumY(x, y);
let color = ColorSpace.sRGB.colorFromXYY(x, y, maxY * bri / 255);

color.r, color.g and color.b are the RGB components from 0 to 1. color.toCSS() returns a CSS color string.

If the color is not representable by sRGB (outside of the triangle), one or more components are below 0 or above 1. color.clamped() will return a clamped color with all components between 0 and 1.

Questions, Suggestions and Bug Reports

Please direct questions, suggestions, and bug reports to Thomas Lochmatter.