计算从绿色到红色的颜色值 [英] Calculate color values from green to red

问题描述

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

  0  - >纯红色
 100  - >纯绿色
 
例如：75  - >颜色，从红色到绿色为75％。 
  

我需要这个到期时间计数器，当天数倒计时显示适当的颜色。

解决方案

你确实可以选择@KamilT提供的解决方案。这个方法（imo）的缺点是中间的颜色（大约50）会变得褐色，与你的全红色和绿色相比不是很好。

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

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

我在这里找到了一种在rgb和hsl之间进行转换的方法：

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

  function percentageToHsl（percentage，hue0，hue1）{
 var hue =（百分比*（hue1  -  hue0））+ hue0; 
返回'hsl（'+ hue +'，100％，50％）'; 
} 
  

正如您所看到的，我稍微更改了API。参数如下：

• 百分比：介于0和1之间的值


• hue0 ：百分比是0


• hue1 ：百分比时想要获得的颜色的色调值是1

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

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

  //绿色（120）到红色（0）
 color = percentageToHsl（ perc，120,0）; 
 
 //蓝色（225）到粉红色（315）
 color = percentageToHsl（perc，225,315）; 
 
 //蓝色（225）到黄色（45 + 360）
 color = percentageToHsl（perc，225,405）; 
  

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

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

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.

解决方案

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.

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.

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

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

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

update a 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 hsl representation is the hue, so that's the one we'll need to calculate.

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:

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:

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

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

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.

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

这篇关于计算从绿色到红色的颜色值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！