RGB 转飞利浦色调 (HSB)
Posted
技术标签:
【中文标题】RGB 转飞利浦色调 (HSB)【英文标题】：RGB to Philips Hue (HSB) 【发布时间】：2014-04-29 03:22:42 【问题描述】：我正在 Processing 中为学校的作业制作音乐播放器。飞利浦 Hue 灯会做出一些相应的视觉效果。 我想让每首歌的视觉效果都独一无二。 因此，我获取了播放曲目的封面（使用 LastFM API）以获得最常见的颜色，并将其用作创建其他颜色的基础。 飞利浦 Hue 有一种不同的颜色显示方式，即 (HSB)。所以我通过
转换它Color.RGBtoHSB();
例如。它给了我 R= 127, G=190, B=208 的值 H= 0.5370371, S=0.38942307, B=0.8156863。现在我猜它们是基于 1 计算的，所以我将亮度和饱和度乘以 255。色相乘以 65535。 （见http://developers.meethue.com/1_lightsapi.html）
在 Philips Hue 中设置这些计算值时，无论播放什么歌曲，颜色总是偏红或偏白。
RGB 到 HSB 的转换有问题吗？
应大众要求，我的代码：
作为测试：
Color c = Colorconverter.getMostCommonColour("urltoimage");
float[] f = Colorconverter.getRGBtoHSB(c);
ArrayList<Lamp> myLamps = PhilipsHue.getInstance().getMyLamps();
State state = new State();
state.setBri((int) Math.ceil(f[2]*255));
state.setSat((int) Math.ceil(f[1]*255));
state.setHue((int) Math.ceil(f[0]*65535));
state.setOn(true);
PhilipsHue.setState(myLamps.get(1), state);
如上所示的功能
public static Color getMostCommonColour(String coverArtURL)
Color coulourHex = null;
try
BufferedImage image = ImageIO.read(new URL(coverArtURL));
int height = image.getHeight();
int width = image.getWidth();
Map m = new HashMap();
for (int i = 0; i < width; i++)
for (int j = 0; j < height; j++)
int rgb = image.getRGB(i, j);
int[] rgbArr = getRGBArr(rgb);
// No grays ...
if (!isGray(rgbArr))
Integer counter = (Integer) m.get(rgb);
if (counter == null)
counter = 0;
counter++;
m.put(rgb, counter);
coulourHex = getMostCommonColour(m);
System.out.println(coulourHex);
catch (IOException e)
e.printStackTrace();
return coulourHex;
private static Color getMostCommonColour(Map map)
List list = new LinkedList(map.entrySet());
Collections.sort(list, new Comparator()
public int compare(Object o1, Object o2)
return ((Comparable) ((Map.Entry) (o1)).getValue())
.compareTo(((Map.Entry) (o2)).getValue());
);
Map.Entry me = (Map.Entry) list.get(list.size() - 1);
int[] rgb = getRGBArr((Integer) me.getKey());
String r = Integer.toHexString(rgb[0]);
String g = Integer.toHexString(rgb[1]);
String b = Integer.toHexString(rgb[2]);
Color c = new Color(rgb[0], rgb[1], rgb[2]);
return c;
private static int[] getRGBArr(int pixel)
int alpha = (pixel >> 24) & 0xff;
int red = (pixel >> 16) & 0xff;
int green = (pixel >> 8) & 0xff;
int blue = (pixel) & 0xff;
return new int[] red, green, blue ;
private static boolean isGray(int[] rgbArr)
int rgDiff = rgbArr[0] - rgbArr[1];
int rbDiff = rgbArr[0] - rgbArr[2];
// Filter out black, white and grays...... (tolerance within 10 pixels)
int tolerance = 10;
if (rgDiff > tolerance || rgDiff < -tolerance)
if (rbDiff > tolerance || rbDiff < -tolerance)
return false;
return true;
public static float[] getRGBtoHSB(Color c)
float[] hsv = new float[3];
return Color.RGBtoHSB(c.getRed(), c.getGreen(), c.getBlue(), hsv);
设置状态只是对飞利浦灯泡进行简单的放置。当我检查受影响灯泡上的 JSON 时
"state":
"on": true,
"bri": 81,
"hue": 34277,
"sat": 18,
"xy": [
0.298,
0.2471
],
"ct": 153,
"alert": "none",
"effect": "none",
"colormode": "hs",
"reachable": true
,
"type": "Extended color light",
"name": "Hue Spot 1",
"modelid": "LCT003",
"swversion": "66010732",
"pointsymbol":
"1": "none",
"2": "none",
"3": "none",
"4": "none",
"5": "none",
"6": "none",
"7": "none",
"8": "none"
【问题讨论】：
HSB 值看起来正确。我去了 colorpicker.com。它接受的 H、S、B 值的最大值为 360、100、100（如 Gary 所说），因此您的值转换为 H=193、S=39、B=82，在 RGB 中显示为蓝色非常接近您的原始值。我会仔细检查硬件文档以准确了解它所期望的值（最重要的是，值的范围）。 @GaryKlasen 不，Philips Hue API 使用 0–255 的亮度和饱和度值，以及 0–65535 的色调角度值。 不要使用从 RGB 计算的值来测试灯光，而是尝试对已知颜色的 HSB 值进行硬编码，并确保灯光表现正常。换句话说，通过确定您的转换是否错误，或者与光的通信是否中断来隔离问题。 我并不是在暗示灯泡坏了，而是在质疑这个错误是在转换中还是在一些后来的代码中。划分搜索空间的简单测试是基本的调试策略。发布SSCCE，因为您的代码描述与其结果不匹配。 真的跑题了，但忍不住：编写一个灯泡需要多少程序员？ :P 【参考方案1】：特别感谢 *** 用户 Gee858eeG 注意到我的错字并感谢 Erickson 提供的精彩提示和链接。
这是一个将任何 RGB 颜色转换为 Philips Hue XY 值的工作函数。返回的列表只包含两个元素 0 是 X，1 是 Y。 代码基于这个精彩的注释：https://github.com/PhilipsHue/PhilipsHueSDK-ios-OSX/commit/f41091cf671e13fe8c32fcced12604cd31cceaf3
虽然这不会返回 HSB 值，但 XY 值可以用作更改 Hue 上的颜色的替代品。希望它对其他人有所帮助，因为飞利浦的 API 没有提及任何公式。
public static List<Double> getRGBtoXY(Color c)
// For the hue bulb the corners of the triangle are:
// -Red: 0.675, 0.322
// -Green: 0.4091, 0.518
// -Blue: 0.167, 0.04
double[] normalizedToOne = new double[3];
float cred, cgreen, cblue;
cred = c.getRed();
cgreen = c.getGreen();
cblue = c.getBlue();
normalizedToOne[0] = (cred / 255);
normalizedToOne[1] = (cgreen / 255);
normalizedToOne[2] = (cblue / 255);
float red, green, blue;
// Make red more vivid
if (normalizedToOne[0] > 0.04045)
red = (float) Math.pow(
(normalizedToOne[0] + 0.055) / (1.0 + 0.055), 2.4);
else
red = (float) (normalizedToOne[0] / 12.92);
// Make green more vivid
if (normalizedToOne[1] > 0.04045)
green = (float) Math.pow((normalizedToOne[1] + 0.055)
/ (1.0 + 0.055), 2.4);
else
green = (float) (normalizedToOne[1] / 12.92);
// Make blue more vivid
if (normalizedToOne[2] > 0.04045)
blue = (float) Math.pow((normalizedToOne[2] + 0.055)
/ (1.0 + 0.055), 2.4);
else
blue = (float) (normalizedToOne[2] / 12.92);
float X = (float) (red * 0.649926 + green * 0.103455 + blue * 0.197109);
float Y = (float) (red * 0.234327 + green * 0.743075 + blue * 0.022598);
float Z = (float) (red * 0.0000000 + green * 0.053077 + blue * 1.035763);
float x = X / (X + Y + Z);
float y = Y / (X + Y + Z);
double[] xy = new double[2];
xy[0] = x;
xy[1] = y;
List<Double> xyAsList = Doubles.asList(xy);
return xyAsList;
【讨论】：
太棒了。感谢您发布此信息！ 我将它转换为 python 用于一个项目。 gist.github.com/error454/6b94c46d1f7512ffe5ee List我认为这里的问题是 Hue has a pretty limited color gamut. 它对红色和紫色很重，但不能在蓝绿色区域产生尽可能多的饱和度..
我建议将饱和度设置为最大值 255，并且只改变色调。
根据文档中给出的表格，Hue 的“hue”属性不直接映射到 HSV 的色调。近似值可能足够接近，但如果不是，则值得尝试conversion to CIE 1931 color space,，然后设置“xy”属性而不是色调。
【讨论】：
谢谢。我试试看！ 我尝试将 RGB 值转换为 XY，但似乎无法正确处理。阅读我的full explanation【参考方案3】：您的 RGB 作为 HSB 应分别为 193 度、39% 和 82%。所以至少 S 和 B 看起来是正确的。查看 Philips hue API 文档，您将这些数字乘以 255 是正确的。
要获得以度数为单位的 H 值，请将计算出的 H 值乘以 360。这就是在您的情况下得到 193 的方式。获得度数后，乘以 182 得到应该发送到飞利浦 hue API 的值（来自 Hack the Hue）：
hue
The parameters 'hue' and 'sat' are used to set the colour
The 'hue' parameter has the range 0-65535 so represents approximately
182*degrees (technically 182.04 but the difference is imperceptible)
这应该会为您提供与使用 * 65535 方法获得的不同的 H 值。
【讨论】：
不同，但仅取决于您引入的舍入误差。 RGB 到 HSB 转换返回的色调值是从 0 到 1 的浮点数。 0.5370371 * 65535 = 35195，接近于通过四舍五入色相角 (193.33) 和转换因子 (182.04) 得到的 35126 值。 谢谢！但是飞利浦灯泡仍然显示白色，而不是 colorpicker.com 上看到的蓝色。飞利浦 API 说色调值是 0 到 65535 之间的环绕值。0 和 65535 都是红色，25500 是绿色，46920 是蓝色。我的值应该更接近46920。如果我做你的计算。 0.5370371 * 360° = 193.333356 乘以 182 = 35186.67079【参考方案4】：对于那些在这个问题上苦苦挣扎并在 javascript 中寻找解决方案的人，我将最佳答案的回复与@error454 的 python 适配相结合，并确认它适用于 HUE 灯泡和 API：D
function EnhanceColor(normalized)
if (normalized > 0.04045)
return Math.pow( (normalized + 0.055) / (1.0 + 0.055), 2.4);
else return normalized / 12.92;
function RGBtoXY(r, g, b)
let rNorm = r / 255.0;
let gNorm = g / 255.0;
let bNorm = b / 255.0;
let rFinal = EnhanceColor(rNorm);
let gFinal = EnhanceColor(gNorm);
let bFinal = EnhanceColor(bNorm);
let X = rFinal * 0.649926 + gFinal * 0.103455 + bFinal * 0.197109;
let Y = rFinal * 0.234327 + gFinal * 0.743075 + bFinal * 0.022598;
let Z = rFinal * 0.000000 + gFinal * 0.053077 + bFinal * 1.035763;
if ( X + Y + Z === 0)
return [0,0];
else
let xFinal = X / (X + Y + Z);
let yFinal = Y / (X + Y + Z);
return [xFinal, yFinal];
;
https://gist.github.com/NinjaBunny9000/fa81c231a9c205b5193bb76c95aeb75f
【讨论】：
以上是关于RGB 转飞利浦色调 (HSB)的主要内容，如果未能解决你的问题，请参考以下文章