如何创建具有一定梯度分布的 HTML 颜色数组？

Posted 2023-02-16

【中文标题】如何创建具有一定梯度分布的 HTML 颜色数组？

【英文标题】：How to create an array of HTML colors with a certain gradient distribution?

【发布时间】：2013-04-25 01:46:09

【问题描述】：

javascript。我有一个数字数组 var values = [1,20,12,6,9];

我需要创建一个相同大小的新数组，这样：

第一个元素对应的最大元素 数组总是"#3E296B" 对应的元素 第一个数组的最小元素总是"#FFFFFF"。 其他元素的渐变颜色应为"#3E296B"，并根据它们的值成比例地转换为"#FFFFFF"

即我的新数组应该大概是这样的：var colors = [white, blue, less_blue, less_less_blue, less_blue]（为了简化，我用文字写了）

【问题讨论】：

@Rick Viscomi 我尝试连接 RGB 值。我被字母卡住了，我的意思是它不是十六进制的，所以我不知道如何指定 A 大于 9 等等......

【参考方案1】：

这是一个解决这个确切问题的库：

https://github.com/anomal/RainbowVis-JS

所以在包含它之后你会做类似的事情：

var rainbow = new Rainbow();
rainbow.setSpectrum('#ffffff', '#3E296B');
rainbow.setNumberRange(1, 20); 
rainbow.colourAt(number); // based on the numbers from your array, this would return the color you want

【讨论】：

六年后，仍然是一个很棒的库