Question

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

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

类似

从上面的值如何生成红色 - 黑色之间的颜色。高值为红色，低值为黑色。

Answer 1

为了完成这项任务，您需要完成并理解一些事情。第一个是意识到RGB颜色空间不是你想要的任务 - HSV或HSL要好得多。由于浏览器很乐意使用HSL，我们将使用它。

接下来，如果您查看HSL色彩空间的H通道，您可以看到所需的确切色带位于那里。蓝色的色调约为240°，红色的色调为0°。

这意味着我们想要将[min..max]的范围映射到[240..0]的Hues（是的，映射是'向后'）考虑到这一点，我们可以设置创建一个函数来为我们做映射并返回一个有效的颜色字符串。

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;
}

首先，我们设置了我们希望使用的Hues的两个端点。接下来，我们计算当前值在当前范围内的约。最后，相对而言，我们将自己置于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>

Answer 2

做一些比例：

如果你有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://jsfiddle.net/4cq8fqjg/10/

Answer 3

试试这个。

使用此库。 https://github.com/bgrins/TinyColor

根据您的最大值计算您的价值百分比。

使用该值运行脚本。

tinycolor("hsv (_CALCULATED PERCENTAGE_ 100% 100%)");

根据值生成彩虹色

3 个答案: