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

Calculate color values from green to red

提问by Biker John

I would like to calculate color value according to given number.

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

0 -> pure red
100 -> pure green

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

I need this for expiration counter, which shows appropriate colors as days count down.

我需要这个作为过期计数器，它会在天数倒计时时显示适当的颜色。

回答by Pevara

You could indeed go for the solution provided by @KamilT. Disadvantage of this method (imo) is that the colors in the middle (around 50) will get brownish and not very nice compared to your full red and green.

您确实可以寻求@KamilT 提供的解决方案。这种方法 (imo) 的缺点是中间的颜色（大约 50）会变成褐色，并且与全红色和绿色相比不是很好。

I think it would be much nicer to follow the color spectrum, and passing over orange and yellow, in stead of that ugly brownish.

我认为遵循色谱法并跳过橙色和黄色会更好，而不是那种丑陋的棕色。

This can easily by achieved by working with HSL values rather then RGB values. If you set the Hue value based on your number between 0 and 100 to a value between 0°(red) and 120°(green), and keep your Saturation at 100% and your Lightness at 50%, you should get nice bright colors.

这可以通过使用 HSL 值而不是 RGB 值轻松实现。如果您将基于 0 到 100 之间的数字的色调值设置为 0°（红色）和 120°（绿色）之间的值，并将饱和度保持在 100%，将亮度保持在 50%，您应该会得到漂亮的明亮色彩.

I found a way to convert between rgb and hsl here: HSL to RGB color conversion

我在这里找到了一种在 rgb 和 hsl 之间转换的方法：HSL to RGB color conversion

And I wrote a simple function to calculate your rgb value using the conversion function from the answer above:

我编写了一个简单的函数来使用上面答案中的转换函数来计算您的 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] + ')'; 
}

And I set up a fiddle to demonstrate the diffrences between the HSL method and the RGB method: http://jsfiddle.net/rE6Rk/1/

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

updatea more versatile version:

更新一个更通用的版本：

If you do not want to work with a range from red to green, you can slightly adapt the above method. The value that determines the actual color in a hslrepresentation is the hue, so that's the one we'll need to calculate.

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

If you define the range of your hue, by providing the 0 and 1 value as parameters, the calculation of the hue value becomes basic math. Have a look at the updated method:

如果您定义色调的范围，通过提供 0 和 1 值作为参数，色调值的计算就成为基本的数学运算。看看更新的方法：

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

As you can see I changed the API a bit. The parameters are as follows:

如您所见，我稍微更改了 API。参数如下：

• percentage: a value between 0 and 1
• hue0: the hue value of the color you want to get when the percentageis 0
• hue1: the hue value of the color you want to get when the percentageis 1

• percentage: 0 到 1 之间的值
• hue0:percentage为0时想要得到的颜色的色调值
• hue1:percentage为1时想要得到的颜色的色调值

Also, there is no longer a need to calculate the rgb value, modern browserssupport hsl values as is.

此外，不再需要计算 rgb 值，现代浏览器按原样支持 hsl 值。

So now you can use the method as follows:

所以现在您可以使用该方法如下：

// 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);

So if you want to go clockwise you have to make hue0 < hue1. If you want to go counter clockwise you have to make hue0 > hue1. And since these are degrees, you can just add or subtract 360 to force the direction. You can even use this technique to wrap around the hue circle multiple times.

所以如果你想顺时针走，你必须让hue0 <hue1。如果你想逆时针走，你必须让hue0>hue1。由于这些是度数，您只需添加或减去 360 度即可强制方向。您甚至可以使用此技术多次环绕色相环。

I've created a new fiddle to demonstrate: https://jsfiddle.net/r438s65s/

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

回答by Fabian Kessler

The answer by Pevara is great. I have adapted his jsfiddle to my needs, and maybe it is useful for others too: http://jsfiddle.net/rE6Rk/8/

佩瓦拉的回答很棒。我已经根据我的需要调整了他的 jsfiddle，也许对其他人也有用：http: //jsfiddle.net/rE6Rk/8/

It allows to have an uneven distribution of colors. In my case I wanted everything below 0.5 (50) to be red. And a 0.75 would be in the middle between red and green. So instead of working with hard borders 0 and 1, they can both be shifted.

它允许颜色分布不均匀。就我而言，我希望低于 0.5 (50) 的所有内容都为红色。0.75 将位于红色和绿色之间。因此，与其使用硬边界 0 和 1，它们都可以移动。

The changes are in the numberToColorHsl() function only: * the i is a floating point 0-1 instead of the int 0-100 * additional params min/max

更改仅在 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] + ')'; 
}

The visuals explain it better than words.

视觉效果比文字更能解释它。

回答by Kamil T

This is just simple maths ;)

这只是简单的数学；)

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

That's all.

就这样。