根据值生成彩虹颜色

use*_*823 5 html javascript css colors

我正在尝试根据数值生成彩虹颜色。

var max = 10000;
var min = 0;
var val = 8890;

function getcolor(min,max,val) {
     // return red - black;
 }
Run Code Online (Sandbox Code Playgroud)

颜色 红色 黄色 绿色 蓝色 黑色(值 == 0)

就像 URL 中的那样https://i.stack.imgur.com/MRevs.jpg

根据上面的值如何生成红黑之间的颜色。高值是红色,低值是黑色。

enh*_*lep 6

为了完成这项任务,您只需要做并理解几件事。第一个是认识到 RGB 色彩空间不是您想要完成此任务的色彩空间 - HSV 或 HSL 色彩空间要好得多。由于浏览器很乐意与 HSL 配合使用,因此我们将使用该浏览器。

\n\n

接下来,如果您查看 HSL 色彩空间的 H 通道,您可以看到您想要的确切颜色带就在那里。蓝色的色调约为 240\xc2\xb0,红色的色调为 0\xc2\xad\xc2\xb0 之一。

\n\n

这意味着我们想要将 [min..max] 的范围映射到 [240..0] 的色调(是的,映射是“向后”)\n考虑到这一点,我们可以着手创建一个函数将为我们进行映射并返回有效的颜色字符串。

\n\n
function calcColor(min, max, val)\n{\n    var minHue = 240, maxHue=0;\n    var curPercent = (val - min) / (max-min);\n    var colString = "hsl(" + ((curPercent * (maxHue-minHue) ) + minHue) + ",100%,50%)";\n    return colString;\n}\n
Run Code Online (Sandbox Code Playgroud)\n\n

首先,我们设置我们希望使用的色调的两个端点。\n接下来,我们计算出当前值在当前范围内的大约位置。\n最后,相对而言,我们将自己置于相同的位置,在色调范围而不是用户输入范围中。

\n\n

显示了其使用的一个简单示例。

\n\n
<!DOCTYPE html>\n<html>\n<head>\n<script>\n"use strict";\nfunction newEl(tag){return document.createElement(tag);}\n\nwindow.addEventListener(\'load\', onDocLoaded, false);\n\nfunction onDocLoaded()\n{\n    for (var i=0; i<10; i++)\n    {\n        var elem = newEl(\'div\');\n        elem.style.backgroundColor = calcColor(0, 9, i);\n        elem.className = "rgb";\n        document.body.appendChild(elem);\n    }\n}\n\nfunction calcColor(min, max, val)\n{\n    var minHue = 240, maxHue=0;\n    var curPercent = (val - min) / (max-min);\n    var colString = "hsl(" + ((curPercent * (maxHue-minHue) ) + minHue) + ",100%,50%)";\n    return colString;\n}\n\n</script>\n<style>\n.rgb\n{\n    width: 16px;\n    height: 16px;\n    display: inline-block;\n}\n</style>\n</head>\n<body>\n</body>\n</html>\n
Run Code Online (Sandbox Code Playgroud)\n