计算从绿色到红色的颜色值
我想根据给定的数字计算颜色值。
0 -> pure red 100 -> pure green example: 75 -> color, which is 75% from red to green. 我需要这个到期计数器，它显示适当的颜色，因为天数倒计时。
你确实可以选择@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：percentage为0时想要获得的颜色的色调值 -
hue1：percentage为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
我创造了一个新的小提琴演示： https ： //jsfiddle.net/r438s65s/
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] + ')'; }
视觉效果比文字解释得更好。
这只是简单的数学;）
Red = 255 - (255 * (Number / 100)) Green = 255 * (Number / 100) Blue = 0
就这样。