javascript - 为什么这种颜色转换如此频繁地映射为灰色？

Question

我想将 RGB 颜色转换为索引颜色，这是我的代码，它可以工作。但是，虽然有些颜色被转换为蓝色或红色，但其他看起来像蓝色或红色的颜色却被转换为灰色。如何解决这个问题？您可以检查我的代码片段，单击大表中的颜色并查看下面的结果。

var palette = [0, 0xff0000, 0xff00, 0xffff00, 0xff, 0xff00ff, 0xffff, 0x808080]

function rgb(c) {
    return [c & 0xff, (c >> 8) & 0xff, (c >> 16) & 0xff]
  }
  // http://alienryderflex.com/hsp.html

function rgb2lum(r, g, b) {
  return Math.sqrt(Pr * r * r + Pg * g * g + Pb * b * b)
}
var Pr = .2126,
  Pg = .7152,
  Pb = .0722;
var rd = 255,
  gd = 255,
  bd = 255,
  maxDist = Math.sqrt(Pr * rd * rd + Pg * gd * gd + Pb * bd * bd);

function colorDist(a, b) {
  a = rgb(a), b = rgb(b)
  var rd = b[0] - a[0],
    gd = b[1] - a[1],
    bd = b[2] - a[2]
  return Math.sqrt(Pr * rd * rd + Pg * gd * gd + Pb * bd * bd) / maxDist
}

function randomColor() {
  var r = Math.floor(Math.random() * 256)
  var g = Math.floor(Math.random() * 256)
  var b = Math.floor(Math.random() * 256)
  var c = (r + (g << 8) + (b << 16))
  return c
}

function hex(c) {
  c = c.toString(16)
  while (c.length < 6) c = '0' + c
  return '#' + c
}

function f(a) {
  var id = -1,
    val = 2
  for (var i = 0; i < palette.length; i++) {
    var c = palette[i],
      d = colorDist(a, c)
    if (d < val) id = i, val = d
  }
  out.innerHTML += ('<span style="border:1px solid black"><span style=background:' + hex(a) + '>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span><span style=background:' + hex(palette[id]) + '>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp</span></span>, ')
}
var W = 60,
  H = 10
var s = '<table border=0 cellspacing=0 style=cursor:pointer>'
for (var y = 0; y < H; y++) {
  s += '<tr>'
  for (var x = 0; x < W; x++) {
    var c = randomColor()
    s += '<td style="background:' + hex(c) + '" onclick=f(' + c + ')>&nbsp;&nbsp;</td>'
  }
  s += '</tr>'
}
s += '</table>'
s += 'palette:<table border=1><tr>'
for (var x = 0; x < palette.length; x++) {
  s += '<td style="background:' + hex(palette[x]) + '" onclick=f(' + palette[x] + ')>&nbsp;&nbsp;</td>'
}
s += '</tr></table>'
out.innerHTML = s

<span id=out></span>

Answer 1

看起来您的 RGB 数组颠倒了。

function rgb(c) {
    return [c & 0xff, (c >> 8) & 0xff, (c >> 16) & 0xff]
}

rgb() 生成 [b,g,r] 数组，并且您的 HSP 数学假设返回的数组为 [r,g,b]:

function colorDist(a, b) {
  a = rgb(a), b = rgb(b) // <--- produces [b,g,r] arrays
  var rd = b[0] - a[0], // <--- red is index 0
    gd = b[1] - a[1],
    bd = b[2] - a[2]
  return Math.sqrt(Pr * rd * rd + Pg * gd * gd + Pb * bd * bd) / maxDist
}

这似乎会偏离预期的亮度计算。