javascript - 从两种颜色之间的 int 间隔 (0,100) 返回十六进制颜色

Question

这个问题已经有答案了:

How to get color value from gradient by percentage with javascript? (9 个回答)

Calculate a colour in a linear gradient (2 个回答)

Javascript color gradient (15 个回答)

已关闭 4 年前。

我正在尝试在我的网页游戏中创建一个动画健康栏，当增加我们的减少时，它应该改变它的颜色。生命条的值可以在 0 到 100 之间。当它达到 0 时，颜色是“#FF0000”，当它满了时，颜色应该是“#00FF00”。我只需要将此 int 数字转换为十六进制字符串的逻辑。

Obs:我使用的是纯 Javascript。我想要不使用任何插件

Answer 1

实现您的想法可能不需要这样的转换，并且使用其他颜色模型的解决方案非常合适:

function fRGB(obj) {
  let nVal = +obj.value;
  obj.style.boxShadow = `inset 0 0 7px 6px rgb(${255 - nVal * 2.55}, ${nVal * 2.55}, 0)`;
}

function fHSL(obj) {
  let nVal = +obj.value;
  obj.style.boxShadow = `inset 0 0 7px 6px hsl(${nVal * 1.2}, 100%, 50%)`;
}

RGB<br><input type="range" min="0" max="100" oninput="fRGB(this)">
<br>
HSL<br><input type="range" min="0" max="100" oninput="fHSL(this)">

请注意，颜色以及 slider 的平均值在不同型号中有所不同。