使用javascript计算颜色值（r、g、b）

我有

x

数量的包含速度值的数组

这些值以m/s为单位，我不知道有多少个，它们有多大。我需要创建一个函数来决定使用什么颜色

我的想法是找到数组的

max

和

min

值（速度），因为我知道这些值都可以除以0.25，所以我想通过执行

var steps=（max-min）/0.25来计算可能的“步数”

因为我有一个RGB光谱，我想我可以计算出使用什么值，但我就是不知道该怎么做

我希望能够做到的是，低速时红色，中速时绿色，高速时蓝色

例如，我有一个数组：

speeds = [0.5, 0.5, 0.75, 1.25, 0.50, 0.75, 1.00, 4.00, 4.50, 8.00, 7.50, 8.50, 6.50, 6.00, 5.00, 5.25, 4.75, 4.00, 3.25, 2.50, 1.25, 0.00]

现在，对于我得到的每个值，我想计算一种颜色，其中最大值越大（在蓝色光谱中，类似于（0，0，255））越强烈，而较小值越小（在红色光谱中-（255，0，0））越强烈。对于中间值，我认为它们在绿色中更强烈（0, 255, 0），如果它绝对在中间，然后根据它们朝哪个方向增加一点红色或蓝色。

我试图寻找一个插件，可以为我做到这一点，但我找不到这样的插件，我也尝试了谷歌搜索一种方法来做到这一点，但没有任何运气。
如果你不反对使用库，你可以查看D3.js，特别是创建自定义比例的实用程序。这方面的一个例子

示例

您需要将速度数组用作
域
，并将颜色用作输出

范围，来设置色标：

let colors = d3.scale.linear().domain([0, Math.max(...speeds)])
  .interpolate(d3.interpolateHcl)
  .range([d3.rgb('#FF0000'), d3.rgb('#0000FF')]);

colors

现在是一个函数，给定索引作为输入，它将输出颜色。设置完成后，循环通过

速度

数组以获得相应的颜色：

for (let i = 0; i < speeds.length; i++) {
  // colors(i)
}

for（设i=0；i

我会对这个数组进行排序，然后将数组分成3个较小的数组。执行此操作后，应规范化数组。可以使用以下公式将列表中的每个元素相乘：

（xi-min）/（max-min）

您必须规范化新数组，而不是旧数组。对于第一个数组（最小值），可以通过

k=（max xi）*255.0来计算红色密集型。此颜色将为
（k，0，0）
。按公式着色速度最大的数组：
k=xi*255.0
[颜色将为（0,0，k）]。中值公式取决于您的选择。（更高的速度=更多的绿色或更高的速度=更少的速度）

很抱歉，描述太复杂了。祝你好运。
假设
min
是最小速度，
max
是最大速度，那么所有速度都在
min
和
max
之间：

min |---------------------------| max
               speeds

您必须将此间隔划分为两个较小的间隔，如下所示：

 |-------------|--------------|
min           mid            max

您可以指定为“最小满红”、“中满绿”和“最大满蓝”：

 R             G              B
 |-------------|--------------|
min           mid            max

现在，您必须计算每个速度值的颜色。假设
s
是其中一个速度的值：

r = g = b = 0;

if (s <= mid) {
    r = 255 - (s - min) / (mid - min) * 255; // r is 255 when s = min and 0 when s = mid
    g = 255 - (mid - s) / (mid - min) * 255; // g is 255 when s = mid and 0 when s = min

} else {
    b = 255 - (s - mid) / (max - mid) * 255;
    g = 255 - (max - s) / (max - mid) * 255;
}

r=g=b=0；
如果{
var r，g，b；
r=g=b=0；
如果（s另一个选项是简单地计算
hsl
值，因为您已经知道要处理的确切颜色。从hsl转换为rgb应该不难，有很多库可以很好地完成这一工作

这里有一个例子


var速度=[0.5,0.5,0.75,1.25,0.50,0.75,1.00,4.00,4.50,8.00,7.50,8.50,6.50,6.00,5.25,4.75,4.00,3.25,2.50,1.25,0.00]；
var fragment=document.createDocumentFragment（）；
var list=document.querySelector（'ul'）；
var speedsMin=数学最小值（…速度）；
var speedsMax=数学最大值（…速度）；
var-hslMin=0；
var hslMax=240；
var hslValues=速度.map（函数（值）{
返回{
h:Math.ceil（（（value-speedsMin）/（speedsMax-speedsMin））*（hslMax-hslMin）+hslMin），
s:100，
l:50
}
})
hslValues.forEach（函数（值）{
var item=document.createElement（'li'）；
var color='hsl（'+value.h+'、'+value.s+'%、'+value.l+'%）'；
item.style.backgroundColor=颜色；
fragment.appendChild（项目）
})
list.appendChild（片段）
ul{
列表样式类型：无
保证金：0；
填充：0；
}
ulli{
宽度：20px；
高度：20px；
边界半径：10px；
显示：内联块；
利润率：0.4px
}
您可以计算两个区域的颜色，并使用这三种颜色生成渐变


函数getColor（v、最小值、最大值）{
函数getC（f，l，r）{
返回{
r：数学楼层（（1-f）*l.r+f*r.r），
g：数学楼层（（1-f）*l.g+f*r.g），
b：数学楼层（（1-f）*l.b+f*r.b），
};
}
var left={r:255，g:0，b:0}，
中间={r:0，g:255，b:0}，
右={r:0，g:0，b:255}，
mid=（最大-最小）/2；
返回v})；
很抱歉。我无法使用此过程，因为我需要速度的顺序。感谢您的共享。您可以将它们复制到其他数组中并记住它们的索引。但我发现了另一个问题。您应该将255.0更改为128.0，并将128.0添加到公式中（例如：（max xi）*128.0+128.0）因为当数组中的值最小时
 |-------------|--------------|
min           mid            max

 R             G              B
 |-------------|--------------|
min           mid            max

r = g = b = 0;

if (s <= mid) {
    r = 255 - (s - min) / (mid - min) * 255; // r is 255 when s = min and 0 when s = mid
    g = 255 - (mid - s) / (mid - min) * 255; // g is 255 when s = mid and 0 when s = min

} else {
    b = 255 - (s - mid) / (max - mid) * 255;
    g = 255 - (max - s) / (max - mid) * 255;
}

var speeds = [0.5, 0.5, 0.75, 1.25, 0.50, 0.75, 1.00, 4.00, 4.50, 8.00, 7.50, 8.50, 6.50, 6.00, 5.00, 5.25, 4.75, 4.00, 3.25, 2.50, 1.25, 0.00]
var max = Math.max(...speeds);
var min = Math.min(...speeds);
var mid = (max - min) / 2;

var colors = speeds.map((s) => {
    var r, g, b;
    r = g = b = 0;

    if (s <= mid) {
        r = 255 - (s - min) / (mid - min) * 255;
        g = 255 - (mid - s) / (mid - min) * 255;

    } else {
        b = 255 - (s - mid) / (max - mid) * 255;
        g = 255 - (max - s) / (max - mid) * 255;
    }

    return [r, g, b];
});

console.log(colors);