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

我设置了一个 fiddle 来演示 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。参数如下:

• 百分比:介于 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 < hue1。如果你想逆时针旋转，你必须让 hue0 > hue1。由于这些是度数，您只需加上或减去 360 度即可强制确定方向。您甚至可以使用此技术多次环绕色相圈。

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