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

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 之间的数字将色调值设置为 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 之间的值
• hue0percentage:为 0时想要得到的颜色的色调值
• hue1percentage: 当为 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

佩瓦拉的回答很棒。我已经根据我的需要调整了他的 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] + ')'; 
}

视觉比文字更能说明问题。

Answer 3

这只是简单的数学;)

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

就这样。