如何使用HSL到RGB转换功能 [英] How to Use HSL to RGB Conversion Function
问题描述
感觉我在这里缺少一些非常简单的东西,但是我不能得到从 HSL到RGB颜色转换工作。有问题的函数是:
Feel like I'm missing something really simple here, but I can't get the formula posted from an answer from HSL to RGB color conversion to work. The function in question is:
function hslToRgb(h, s, l){
var r, g, b;
if(s == 0){
r = g = b = l; // achromatic
}else{
function hue2rgb(p, q, t){
if(t < 0) t += 1;
if(t > 1) t -= 1;
if(t < 1/6) return p + (q - p) * 6 * t;
if(t < 1/2) return q;
if(t < 2/3) return p + (q - p) * (2/3 - t) * 6;
return p;
}
var q = l < 0.5 ? l * (1 + s) : l + s - l * s;
var p = 2 * l - q;
r = hue2rgb(p, q, h + 1/3);
g = hue2rgb(p, q, h);
b = hue2rgb(p, q, h - 1/3);
}
return [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
}
我想问的是, h'参数。通常,当在CSS或Photoshop中使用HSL时,色调值是介于0和360之间的数字,但此函数要求在0和1之间的值。有人可以向我解释我将如何转换色调值的240到0和1之间的等价值,所以我可以把它插入这个公式?我尝试将240除以360,但这不起作用。
My issue, I believe, is in regard to what to enter as my 'h' parameter. Typically, when using HSL in CSS or Photoshop, the hue value is a number between 0 and 360, but this function calls for a value in between 0 and 1. Can someone explain to me how I would, for example, convert a hue value of 240 to the equivalent value between 0 and 1, so I can plug it into this formula? I tried dividing 240 by 360, but this did not work.
推荐答案
看起来原始算法是错误的。根据维基百科,您可以获得色度&亮度调整独立于色调(因此类似的b值),但任何事情需要更多的数学特定模。它看起来不像那个算法处理那个特定的转换很好,特别是考虑到它期望色调在范围[0,1]。尝试此算法:
Looks like the original algorithm is wrong. According to wikipedia, you can get the chroma & lightness adjustments independent of hue (hence the similar b value), but anything else requires a little more math—specifically modulo. It doesn't look like that algorithm handles that particular conversion well, especially considering it expects hue to be in the range [0, 1]. Try this algorithm instead:
// expected hue range: [0, 360)
// expected saturation range: [0, 1]
// expected lightness range: [0, 1]
var hslToRgb = function(hue, saturation, lightness){
// based on algorithm from http://en.wikipedia.org/wiki/HSL_and_HSV#Converting_to_RGB
if( hue == undefined ){
return [0, 0, 0];
}
var chroma = (1 - Math.abs((2 * lightness) - 1)) * saturation;
var huePrime = hue / 60;
var secondComponent = chroma * (1 - Math.abs((huePrime % 2) - 1));
huePrime = Math.floor(huePrime);
var red;
var green;
var blue;
if( huePrime === 0 ){
red = chroma;
green = secondComponent;
blue = 0;
}else if( huePrime === 1 ){
red = secondComponent;
green = chroma;
blue = 0;
}else if( huePrime === 2 ){
red = 0;
green = chroma;
blue = secondComponent;
}else if( huePrime === 3 ){
red = 0;
green = secondComponent;
blue = chroma;
}else if( huePrime === 4 ){
red = secondComponent;
green = 0;
blue = chroma;
}else if( huePrime === 5 ){
red = chroma;
green = 0;
blue = secondComponent;
}
var lightnessAdjustment = lightness - (chroma / 2);
red += lightnessAdjustment;
green += lightnessAdjustment;
blue += lightnessAdjustment;
return [Math.round(red * 255), Math.round(green * 255), Math.round(blue * 255)];
};
它可能会在几个边缘情况下失败,但这些应该很容易修复
It may fail on a few edge cases, but those should be easy fixes
这篇关于如何使用HSL到RGB转换功能的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!