我正在尝试根据数值生成彩虹色。
var max = 10000;
var min = 0;
var val = 8890;
function getcolor(min,max,val) {
// return red - black;
}
颜色 红色的 黄色的 绿色的 蓝色 黑色（值 == 0）
在网址中点赞http://i.stack.imgur.com/MRevs.jpg
从上面的值如何生成红-黑之间的颜色。高值是红色，低值是黑色。
【问题讨论】：
标签： javascript html css colors
为了完成这项任务，您只需要做几件事并了解几件事。首先是意识到 RGB 色彩空间不是您想要完成此任务的色彩空间 - HSV 或 HSL 色彩空间要好得多。由于浏览器很乐意使用 HSL，我们将使用它。
接下来，如果您查看 HSL 色彩空间的 H 通道，您可以看到您想要的确切颜色带出现在那里。蓝色具有大约 240° 的色调，红色具有 0° 之一。
这意味着我们要将 [min..max] 的范围映射到 [240..0] 的色调（是的，映射是“向后”） 考虑到这一点，我们可以着手创建一个函数来为我们进行映射并返回一个有效的颜色字符串。
function calcColor(min, max, val)
{
var minHue = 240, maxHue=0;
var curPercent = (val - min) / (max-min);
var colString = "hsl(" + ((curPercent * (maxHue-minHue) ) + minHue) + ",100%,50%)";
return colString;
}
首先，我们设置了我们希望使用的色调的两个端点。 接下来，我们计算出当前值在当前范围内的位置。 最后，我们把自己放在了相对来说相同的位置，在 Hue 范围而不是用户输入范围内。
显示了一个简单的使用示例。
<!DOCTYPE html>
<html>
<head>
<script>
"use strict";
function newEl(tag){return document.createElement(tag);}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded()
{
for (var i=0; i<10; i++)
{
var elem = newEl('div');
elem.style.backgroundColor = calcColor(0, 9, i);
elem.className = "rgb";
document.body.appendChild(elem);
}
}
function calcColor(min, max, val)
{
var minHue = 240, maxHue=0;
var curPercent = (val - min) / (max-min);
var colString = "hsl(" + ((curPercent * (maxHue-minHue) ) + minHue) + ",100%,50%)";
return colString;
}
</script>
<style>
.rgb
{
width: 16px;
height: 16px;
display: inline-block;
}
</style>
</head>
<body>
</body>
</html>
【讨论】：
做一些比例：
如果您有max - min 范围，并且您想按照您的描述将颜色从黑色变为红色，只需将您的范围分为 6 个阶段：
前 1/4：R G B 值是 (0, 0, 0) 在较低的值和 (0, 0, 255) 在较高的值，所以你会有从黑色到蓝色的毕业..
秒 1/4：从 (0, 0, 255) 到 (0, 255, 0)，这样你就可以从蓝色毕业到绿色了
第三个 1/4：从 (0, 255, 0) 到 (255, 255, 0)，这是黄色
最后 1/4：从 (255, 255, 0) 到 (255, 0, 0)，这里是红色的。
使用比例来确定中间值。
享受吧:)，这里有一点代码方面的解释...
【讨论】：
试试这个。
使用这个库。 https://github.com/bgrins/TinyColor
根据你的最大值计算你的价值百分比。
使用该值运行脚本。
tinycolor("hsv (_CALCULATED PERCENTAGE_ 100% 100%)");
【讨论】：