为什么这个Javascript RGB到HSL代码不起作用?
问题描述:
我在http://www.mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript处发现了此RGB到HSL脚本。我找不到任何其他体面的小人物。问题是这个代码甚至没有真正的工作。有人会知道为什么吗? (我不知道一点颜色的数学,但也许它的返回互补?)为什么这个Javascript RGB到HSL代码不起作用?
function rgbToHsl(r, g, b){
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min)/2;
if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d/(2 - max - min) : d/(max + min);
switch(max){
case r: h = (g - b)/d + (g < b ? 6 : 0); break;
case g: h = (b - r)/d + 2; break;
case b: h = (r - g)/d + 4; break;
}
h /= 6;
}
return [h, s, l];
}
编辑:当我运行rgbToHsl(126,210,22)
它给我[0.24,0.81,0.45],这是HSL为橙色。
答
生成的HSV阵列必须被解释为三个部分。对于某些程序,如果要将HSV表示为整数,则将“H”值乘以360,将“S”和“V”值乘以100.将您引用的绿色阴影RGB的HSV值[126,210, 22]是HSV [87,81,45]整数。你可以改变的功能,如果你想回到这样的整数:
function rgbToHsl(r, g, b){
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min)/2;
if(max == min){
h = s = 0; // achromatic
}else{
var d = max - min;
s = l > 0.5 ? d/(2 - max - min) : d/(max + min);
switch(max){
case r: h = (g - b)/d + (g < b ? 6 : 0); break;
case g: h = (b - r)/d + 2; break;
case b: h = (r - g)/d + 4; break;
}
h /= 6;
}
return [Math.floor(h * 360), Math.floor(s * 100), Math.floor(l * 100)];
}
[编辑]中说,它仍然给我用这大大太暗亮度(“L”或“V”)的东西; Gimp说HSV值应该是[90,80,82],或者是分数形式[.20,.80,.82]。
[另一编辑]一个问题可能是HSL和HSV是不同的方案...仍然环顾四周。
的情况下,任何人都OK想RGB到HSV(像你在GIMP例如看)这里有一个版本是:
function rgbToHsv(r, g, b) {
var
min = Math.min(r, g, b),
max = Math.max(r, g, b),
delta = max - min,
h, s, v = max;
v = Math.floor(max/255 * 100);
if (max != 0)
s = Math.floor(delta/max * 100);
else {
// black
return [0, 0, 0];
}
if(r == max)
h = (g - b)/delta; // between yellow & magenta
else if(g == max)
h = 2 + (b - r)/delta; // between cyan & yellow
else
h = 4 + (r - g)/delta; // between magenta & cyan
h = Math.floor(h * 60); // degrees
if(h < 0) h += 360;
return [h, s, v];
}
答
以下功能RGB
颜色转换成色相饱和度颜色,如Photoshop拾色器,结果是在所述范围:
- 色相0-360(度)
- 饱和度:0-100(%)
- 亮度:0-100( %)
我还是不明白为什么人们用它代替HSB
(色调,饱和度亮度术语HSV
(色调,饱和度值)),反正这是FO术语的问题,其结果都是一样的
//Converts to color HSB object (code from here http://www.csgnetwork.com/csgcolorsel4.html with some improvements)
function rgb2hsb(r, g, b)
{
r /= 255; g /= 255; b /= 255; // Scale to unity.
var minVal = Math.min(r, g, b),
maxVal = Math.max(r, g, b),
delta = maxVal - minVal,
HSB = {hue:0, sat:0, bri:maxVal},
del_R, del_G, del_B;
if(delta !== 0)
{
HSB.sat = delta/maxVal;
del_R = (((maxVal - r)/6) + (delta/2))/delta;
del_G = (((maxVal - g)/6) + (delta/2))/delta;
del_B = (((maxVal - b)/6) + (delta/2))/delta;
if (r === maxVal) {HSB.hue = del_B - del_G;}
else if (g === maxVal) {HSB.hue = (1/3) + del_R - del_B;}
else if (b === maxVal) {HSB.hue = (2/3) + del_G - del_R;}
if (HSB.hue < 0) {HSB.hue += 1;}
if (HSB.hue > 1) {HSB.hue -= 1;}
}
HSB.hue *= 360;
HSB.sat *= 100;
HSB.bri *= 100;
return HSB;
}
用例:
var hsb = rgb2hsb(126,210,22);
alert("hue = " + hsb.hue + "saturation = " + hsb.sat + "brightness = " + hsb.bri);
问题标题和函数的名称不匹配,正是你寻找的RGB到HSL或HSL为rgb?还请显示您使用该功能的代码。 – Sarfraz 2010-02-27 19:19:52
什么问题,什么样的价值观是错误的? – 2010-02-27 19:20:08
它看起来对我很有用,当我尝试它时,肯定会返回一个很好的HSL数组。这是什么让你觉得它不起作用?如果不清楚,您必须用0到255之间的十进制整数表示的RGB值调用它。 – Pointy 2010-02-27 19:20:54