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

Question

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

Answer 1

你可以使用HSL颜色。第一个参数是色调，第二个是饱和度，第三个是光值。在色轮上，蓝色位于240º，因此可以将H值设置为240。然后可以将饱和度设置为100%，将亮度值设置为基于输入数字的百分比（通过取最大值上的当前数据点）。请参见下面的示例：const data = [];const MAX = 100;const getColor = (n, max, error) => {&nbsp;return `hsl(240, 100%, ${(1-n/max) * 100}%)`}let html = "";for(let i = 0; i < MAX; i++) {&nbsp; html += `<div class='box' style="background-color: ${getColor(i, MAX)}">${i}</div>`}document.body.innerHTML = html;.box {&nbsp; width: 100px;&nbsp; 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) => {&nbsp;const l = 100 - map(min, max, bl, 100-br, n);&nbsp;return `hsl(240, 100%, ${l}%)`}let html = "";for(let i = 0; i < MAX; i++) {&nbsp; html += `<div class='box' style="background-color: ${getColor(i, MIN, MAX, 10, 40)}">${i}</div>`}document.body.innerHTML = html;.box {&nbsp; width: 100px;&nbsp; height: 100px;}