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

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 to RGB color conversion

我写了一个简单的函数来使用上面答案中的转换函数来计算你的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：percentage为0时要获得的颜色的色调值
• hue1：percentage为1时要获得的颜色的色调值

此外，不再需要计算rgb值，modern browsers支持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＆lt; hue1。如果你想逆时针方向，你必须使hue0＆gt; 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 *额外的参数最小/最大

/**
 * 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] + ')'; 
}

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

Answer 3

这只是简单的数学;）

Red = 255 - (255 * (Number / 100))
Green = 255 * (Number / 100)
Blue = 0 

就是这样。