当前位置: 代码迷 >> JavaScript >> 将RGB颜色转换为XY
  详细解决方案

将RGB颜色转换为XY

热度:116   发布时间:2023-06-12 13:59:09.0

我使用 RUCKUS API 来改变灯的颜色,我需要将颜色从 RGB 转换为 XY 以调用 API。

我试过这个代码:

1) 从颜色对象中获取 RGB 值并将它们转换为 0 和 1 之间

 function rgb_to_cie(red, green, blue)
    {
        //Apply a gamma correction to the RGB values, which makes the color more vivid and more the like the color displayed on the screen of your device
        var red     = (red > 0.04045) ? Math.pow((red + 0.055) / (1.0 + 0.055), 2.4) : (red / 12.92);
        var green   = (green > 0.04045) ? Math.pow((green + 0.055) / (1.0 + 0.055), 2.4) : (green / 12.92);
        var blue    = (blue > 0.04045) ? Math.pow((blue + 0.055) / (1.0 + 0.055), 2.4) : (blue / 12.92); 

        //RGB values to XYZ using the Wide RGB D65 conversion formula
        var X       = red * 0.664511 + green * 0.154324 + blue * 0.162028;
        var Y       = red * 0.283881 + green * 0.668433 + blue * 0.047685;
        var Z       = red * 0.000088 + green * 0.072310 + blue * 0.986039;

        //Calculate the xy values from the XYZ values
        var x       = (X / (X + Y + Z)).toFixed(4);
        var y       = (Y / (X + Y + Z)).toFixed(4);

        if (isNaN(x))
            x = 0;
        if (isNaN(y))
            y = 0;   
        return [x, y];
    }

但它没有提供适当的解决方案。

因此,如果我通过r:182 g: 255 B: 65作为这个,那么我得到x 为 22932y 为 35249 (根据 API DOC。)

我怎样才能做到这一点?

有几个错误:

第一:您使用的是正常转换公式,其中红色、绿色和蓝色应在 0.0 到 1.0 的范围内。 因此,您可能需要将这些值除以 255。

第二:您正在应用伽马。 要转换为 X、Y、Z,您需要线性值。 通常我们有伽马校正的RGB(例如像素值)。 所以你矫枉过正了。 相反,您应该应用 gamma 的倒数,以便您将获得线性 R、G、B,以便您可以应用线性变换来获得 X、Y、Z。

第三:您将返回 x,y 而不是 X,Y 作为您的问题(和评论)。 另一方面,您确定需要 X,Y 吗? 通常 x,y 用于“颜色”。 我希望 ax,y + Y (或一些亮度参数)。

可能您应该缩减这些值。 如您所见,范围通常是 0 到 1,或 0 到 100(过去),或 0 到 255、0 到 65535。没有标准:这些只是没有单位的数字。 [与电脑屏幕相反,Phillips Hue 应该知道它的最大亮度是多少,但..这是一个例外]。

我得到了解决方案,如果你正在寻找,我在这里附上了答案,

let red = 100
let green = 100
let blue = 100

let redC =  (red / 255)
let greenC = (green / 255)
let blueC = (blue / 255)
console.log(redC, greenC , blueC)


let redN = (redC > 0.04045) ? Math.pow((redC + 0.055) / (1.0 + 0.055), 2.4): (redC / 12.92)
let greenN = (greenC > 0.04045) ? Math.pow((greenC + 0.055) / (1.0 + 0.055), 2.4) : (greenC / 12.92)
let blueN = (blueC > 0.04045) ? Math.pow((blueC + 0.055) / (1.0 + 0.055), 2.4) : (blueC / 12.92)
console.log(redN, greenN, blueN)

let X = redN * 0.664511 + greenN * 0.154324 + blueN * 0.162028;

let Y = redN * 0.283881 + greenN * 0.668433 + blueN * 0.047685;

let Z = redN * 0.000088 + greenN * 0.072310 + blueN * 0.986039;
console.log(X, Y, Z)

let x = X / (X + Y + Z);

let y = Y / (X + Y + Z);

X = x * 65536 
Y = y * 65536
  相关解决方案