如何在 JavaScript 中生成连续颜色的列表

how to generate a list of successive colors in javascript

本文关键字：连续 颜色 列表 JavaScript      更新时间：2023-09-26

我正在尝试为 d3.js 热图目的生成"连续"颜色列表。因此，我正在寻找一个函数，该函数接受输入起始颜色（例如十六进制中的红色），结束颜色（十六进制中的蓝色）和整数（中间生成的十六进制颜色的数量，作为列表的形式返回。 

build_colors(start_color,end_color,nb_colors) -> list of colors

我不寻找太复杂的东西（比如在黎曼感知空间的两个颜色端点之间的测地线上以恒定速度采样）！

这可能相当容易，但我是javascript/d3的初学者.js基本上是所有Web技术。

D3 有一个内置的颜色插值器，实际上是几个。最接近的可能是f=d3.interpolateHsl(a, b)，其中a和b是两种颜色。它返回一个插值函数f获取 0 到 1 之间的参数并返回从 a 到 b 范围内的相应颜色。

如果你确实需要一个数组而不是一个函数，你可以执行以下操作：

var colors=[];
var nColors=20;
for (var i=0; i<nColors; i++)
  colors.push(f(i/(nColors-1)));

出于计算目的，我认为将颜色表示为从 0 到 255 的三个整数更容易。然后，可以使用格式为"rgb（64， 32， 16）"的值分配CSS颜色属性。

因此，对于您的 build_color（...） 函数，我认为最好的方法是接受并返回颜色作为三个整数的数组。

下面是一个示例：

var build_colors = function(start, end, n) {
    
    //Distance between each color
    var steps = [
      (end[0] - start[0]) / n,  
      (end[1] - start[1]) / n,  
      (end[2] - start[2]) / n  
    ];
    
    //Build array of colors
    var colors = [start];
    for(var ii = 0; ii < n - 1; ++ii) {
      colors.push([
        Math.floor(colors[ii][0] + steps[0]),
        Math.floor(colors[ii][1] + steps[1]),
        Math.floor(colors[ii][2] + steps[2])
      ]);
    }
    colors.push(end); 
   
    return colors;
  };
  
  //Example: ten colors between red and blue
  var colors = build_colors([255, 0, 0], [0, 0, 255], 10);  
  
  //Render
  for(var ii = 0; ii < 10; ++ii) {
    var div = document.createElement("div");
    div.setAttribute("style", "background: rgb(" + colors[ii].join(",") + ")");
    document.body.appendChild(div);    
  }
div {
  width: 100px;
  height: 25px;
}
<body>
</body>

检查这个问题：Javascript 颜色渐变

RainbowVis-JS完全可以满足您的需求：https://github.com/anomal/RainbowVis-JS

相关文章：