计算从绿色到红色的颜色值

Question

我想根据给定的数字计算颜色值.

0 -> pure red
100 -> pure green

example: 75 -> color, which is 75% from red to green.

我需要这个到期计数器,它显示适当的颜色,因为天数倒计时.

Answer 1

你确实可以选择@KamilT提供的解决方案.这种方法(imo)的缺点是,与完整的红色和绿色相比,中间(大约50)的颜色会变得褐色并且不是很好.

我认为跟随色谱并经过橙色和黄色,而不是那个丑陋的褐色会更好.

这可以通过使用HSL值而不是RGB值来轻松实现.如果您将基于0到100之间的数字的Hue值设置为0°(红色)和120°(绿色)之间的值,并将饱和度保持在100%并将亮度保持在50%,则应该获得漂亮的亮色.

我在这里找到了一种在rgb和hsl之间进行转换的方法:HSL到RGB颜色转换

我写了一个简单的函数来使用上面答案中的转换函数来计算你的rgb值:

// convert a number to a color using hsl
function numberToColorHsl(i) {
    // as the function expects a value between 0 and 1, and red = 0° and green = 120°
    // we convert the input to the appropriate hue value
    var hue = i * 1.2 / 360;
    // we convert hsl to rgb (saturation 100%, lightness 50%)
    var rgb = hslToRgb(hue, 1, .5);
    // we format to css value and return
    return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'; 
}

我设置了一个小提琴来演示HSL方法和RGB方法之间的差异:http://jsfiddle.net/rE6Rk/1/

更新更通用的版本:

如果您不想使用从红色到绿色的范围,您可以稍微调整上述方法.确定表示中实际颜色的值hsl是hue,因此这是我们需要计算的值.

如果定义色调范围,则通过提供0和1值作为参数,色调值的计算将成为基本数学.看看更新的方法:

function percentageToHsl(percentage, hue0, hue1) {
    var hue = (percentage * (hue1 - hue0)) + hue0;
    return 'hsl(' + hue + ', 100%, 50%)';
}

如您所见,我稍微更改了API.参数如下:

• percentage:介于0和1之间的值
• hue0:当percentage0为0 时,您想要获得的颜色的色调值
• hue1:当percentage1为1 时,您想要获得的颜色的色调值

此外,不再需要计算rgb值,现代浏览器支持hsl值.

所以现在你可以使用如下方法:

// green(120) to red(0)
color = percentageToHsl(perc, 120, 0);

// blue(225) to pink(315)
color = percentageToHsl(perc, 225, 315);

// blue (225) to yellow(45 + 360) 
color = percentageToHsl(perc, 225, 405);

因此,如果你想顺时针方向,你必须使hue0 <hue1.如果你想逆时针方向,你必须使hue0> hue1.由于这些是度,你可以加上或减去360来强制方向.您甚至可以使用此技术多次环绕色调圈.

我创造了一个新的小提琴演示:https://jsfiddle.net/r438s65s/

Answer 2

Pevara的答案很棒.我根据自己的需要改编了他的jsfiddle,也许对其他人也很有用:http://jsfiddle.net/rE6Rk/8/

它允许具有不均匀的颜色分布.在我的情况下,我想要低于0.5(50)的所有东西都是红色的.红色和绿色之间的中间位数为0.75.因此,不是使用硬边界0和1,它们都可以被移位.

更改仅在numberToColorHsl()函数中:*i是浮点0-1而不是int 0-100*附加参数min/max

/**
 * Convert a number to a color using hsl, with range definition.
 * Example: if min/max are 0/1, and i is 0.75, the color is closer to green.
 * Example: if min/max are 0.5/1, and i is 0.75, the color is in the middle between red and green.
 * @param i (floating point, range 0 to 1)
 * param min (floating point, range 0 to 1, all i at and below this is red)
 * param max (floating point, range 0 to 1, all i at and above this is green)
 */
function numberToColorHsl(i, min, max) {
    var ratio = i;
    if (min> 0 || max < 1) {
        if (i < min) {
            ratio = 0;
        } else if (i > max) {
            ratio = 1;
        } else {
            var range = max - min;
            ratio = (i-min) / range;
        }
    }

    // as the function expects a value between 0 and 1, and red = 0° and green = 120°
    // we convert the input to the appropriate hue value
    var hue = ratio * 1.2 / 3.60;
    //if (minMaxFactor!=1) hue /= minMaxFactor;
    //console.log(hue);

    // we convert hsl to rgb (saturation 100%, lightness 50%)
    var rgb = hslToRgb(hue, 1, .5);
    // we format to css value and return
    return 'rgb(' + rgb[0] + ',' + rgb[1] + ',' + rgb[2] + ')'; 
}

视觉效果比文字解释得更好.