使用javascript计算与数字对应的颜色

Question

我有一个数字数据，我需要将它绘制成一个网格并根据数字为每个块着色。较大的数字应该有较深的蓝色阴影，较小的数字应该有较浅的蓝色阴影。如何找到对应的颜色？

Answer 1

你可以使用HSL颜色。第一个参数是色调，第二个是饱和度，第三个是光值。在色轮上，蓝色位于240º，因此可以将H值设置为240。然后可以将饱和度设置为100%，将亮度值设置为基于输入数字的百分比（通过取最大值上的当前数据点）。

请参见下面的示例：

const data = [];

const MAX = 100;

const getColor = (n, max, error) => {

 return `hsl(240, 100%, ${(1-n/max) * 100}%)`

}

let html = "";

for(let i = 0; i < MAX; i++) {

  html += `<div class='box' style="background-color: ${getColor(i, MAX)}">${i}</div>`

}

document.body.innerHTML = html;

.box {

  width: 100px;

  height: 100px;

}

编辑

如果要添加边界，则需要将 的输出压缩0-100为 between 0+bl to 100-br。这种类型的映射可以使用这里提出的公式来完成，其中bl是左边的边界（即：最低的蓝色），br是右边的边界（即：最深的蓝色）。

const data = [];

const MIN = 0; // min value in data (Math.min(...data))

const MAX = 100; // max value in data (Math.max(...data))

const map = (is, ie, os, oe, val) => os + ((oe - os) / (ie - is)) * (val - is);

const getColor = (n, min, max, bl=0, br=0) => {

 const l = 100 - map(min, max, bl, 100-br, n);

 return `hsl(240, 100%, ${l}%)`

}

let html = "";

for(let i = 0; i < MAX; i++) {

  html += `<div class='box' style="background-color: ${getColor(i, MIN, MAX, 10, 40)}">${i}</div>`

}

document.body.innerHTML = html;

.box {

  width: 100px;

  height: 100px;

}