이 색상 변환이 자주 회색으로 매핑되는 이유는 무엇입니까?

Question

RGB 색상을 색인 된 색상으로 변환하고 싶습니다. 여기 내 코드는 작동합니다. 그러나 일부 색상은 파란색 또는 빨간색으로 변환되지만 파란색 또는 빨간색으로 보이는 색상은 회색으로 변환됩니다. 이 문제를 해결하는 방법? 내 스 니펫을 확인하고 큰 테이블에서 색상을 클릭 한 다음 결과를 볼 수 있습니다. 당신이 당신의 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

는 것 같습니다.

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

RGB는() [B, G, R]의 배열을 생성하고 HSP 수학은 반환 된 배열은 [, g는 B R]입니다 가정

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 
} 

이 던질 것 같다 의도 한 밝기 계산을 끕니다.