问具有平滑过渡的16位灰度值的颜色映射

EN

我不清楚为什么要以(255，0，0)跟随(254,255，0)的方式计算RGB值。似乎应该以以下几个变体进行：

(0, 0, 0) -> (254, 0, 0) -> (254, 1, 0) -> (254, 254, 0) -> (254, 254, 1) -> (254, 254, 254)。

这将代表从黑色到白色，从红色，橙色和黄色过渡，没有任何突然的变化。由于我们的眼睛的非线性工作方式，它可能不会被认为是完全平滑的，但你应该能够做到这一点，没有显着的条带。例如：

​

let canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');

let rgb = [0, 0, 0]
// fill channels fromgre
for (let j = 0; j < 3; j++){
  for (let i = 0; i < 254; i++) {
    rgb[j]++
    ctx.fillStyle = `rgba(${rgb.join(",")}, 1)`
    ctx.fillRect(i +254*j, 0, 1, 50);
  }
}

<canvas id="canvas" width="765"></canvas>

​

或从另一端开始穿过蓝色：

​

let canvas = document.getElementById('canvas')
var ctx = canvas.getContext('2d');

let rgb = [0, 0, 0]
// fill channels fromgre
for (let j = 0; j < 3; j++){
  for (let i = 0; i < 254; i++) {
    rgb[2-j]++
    ctx.fillStyle = `rgba(${rgb.join(",")}, 1)`
    ctx.fillRect(i +254*j, 0, 1, 50);
  }
}

<canvas id="canvas" width="765"></canvas>

​

这是不可能做到的，如果你想保持一个属性:相似的数字应该有相似的颜色，或者更好的相反:非常不同的数字不应该给出相似的颜色。

但是如果你写了关于分带的文章，数据似乎是渐变的，所以如果两个不同的“数字区域”有相似的颜色，由于附近颜色的背景，我的眼睛能更好地原谅我。

我不会去完整的16位(这将是太多，我们不能清楚地看到所有的RGB颜色，很少人有真正好的显示器)。可能您可以构建一个界面，它可以放大，并在受限范围内添加更多的对比度。

对于较少的位，您可以从蓝绿色(0，x，x)开始，从0上升到255，然后移动到绿色( 0,255，x)从255到0，然后移动到黑色(0，x,0)，从255到0，再从255到0，再到黄色(x，x，0)，然后到红色(255,0,0)，然后黑到紫色( x，0，x)，然后变成蓝色，然后黑色，最后变成白色(x，x，x)。

所以10个尺度，这给了我们更多的额外信息。

我可能永远不会去黑色(正如你看到的，它是重复的)，但只是x直到5或10，这将减少位数。但是我认为你仍然有11位信息，用人眼来区分比例。

在本例中，我使用了6种primaries+secondary颜色(+灰度)，因此它们很容易区分。从理论上说，我们可以使用更多的中间颜色，但我认为这会使我们的眼睛更加混乱。

我会提供一个额外的输入来上下移动原始的数据号码，这样用户就可以检查更多的细节(并获得更多的比特)一些区域。但如果附近的数字之间没有太多的极端变化，