JavaScript获取数组中最近颜色时出现异常结果求助

你的脚本使用RGB空间的欧几里得距离判断颜色相似度，但该距离与人眼视觉感知不匹配。人眼对RGB三通道的敏感度差异极大（绿色最敏感，蓝色最弱），直接计算RGB距离会导致视觉上不相似的颜色被判定为更近。

以你的测试案例为例：

• 目标色 #854B97 → RGB：(133, 75, 151)
• 灰色 #777779 → RGB：(119, 119, 121)
• 紫色 #5D0C8B → RGB：(93, 12, 139)

直接计算RGB欧几里得距离：

• 目标色到灰色：≈55.06
• 目标色到紫色：≈75.58

因此脚本判定灰色更近，但人眼视觉上紫色系与目标色更相似，核心问题是RGB空间的距离未考虑人眼感知权重。

使用感知均匀的颜色空间（如CIELAB）计算距离，或对RGB通道进行加权，让计算结果匹配人眼视觉。

方案1：CIELAB空间计算（最准确） #

CIELAB是专为视觉感知设计的均匀颜色空间，计算的距离完全符合人眼判断。修改代码如下：

const colors = ["#FFFFFF", "#520975", "#5D0C8B", "#777779"];

// 十六进制转sRGB（0-1范围）
const hexToRgb = hex => {
  const hexStr = hex.slice(1).replace(/^(.)(.)(.)$/gi, "$1$1$2$2$3$3");
  return hexStr.match(/.{2}/g).map(c => parseInt(c, 16) / 255);
};

// sRGB转线性RGB（解码伽马校正）
const srgbToLinear = c => c <= 0.04045 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);

// 线性RGB转CIELAB空间
const rgbToLab = ([r, g, b]) => {
  const lr = srgbToLinear(r);
  const lg = srgbToLinear(g);
  const lb = srgbToLinear(b);

  // 转换到XYZ空间（D65白点）
  const x = lr * 0.4124 + lg * 0.3576 + lb * 0.1805;
  const y = lr * 0.2126 + lg * 0.7152 + lb * 0.0722;
  const z = lr * 0.0193 + lg * 0.1192 + lb * 0.9505;

  // XYZ转CIELAB
  const f = val => val > 0.008856 ? Math.pow(val, 1/3) : (7.787 * val) + 16/116;
  return [116 * f(y) - 16, 500 * (f(x) - f(y)), 200 * (f(y) - f(z))];
};

// CIELAB空间欧几里得距离
const distance = (labA, labB) => {
  const [dl, da, db] = labA.map((val, idx) => val - labB[idx]);
  return Math.sqrt(dl*dl + da*da + db*db);
};

const nearestColor = colorHex => {
  const targetLab = rgbToLab(hexToRgb(colorHex));
  return colors.reduce((closest, curr) => {
    const currDist = distance(targetLab, rgbToLab(hexToRgb(curr)));
    return currDist < closest.dist ? { dist: currDist, color: curr } : closest;
  }, { dist: Infinity, color: colors[0] }).color;
};

// 测试结果：返回#5D0C8B
console.log(nearestColor("#854B97"));

方案2：加权RGB距离（轻量版） #

若不需要极致准确，可使用基于ITU-R BT.709标准的加权RGB距离，给三通道赋予匹配人眼敏感度的权重：

const colors = ["#FFFFFF", "#520975", "#5D0C8B", "#777779"];

const hexToRgb = hex => hex.slice(1).replace(/^(.)(.)(.)$/gi, "$1$1$2$2$3$3").match(/.{2}/g).map(c => parseInt(c, 16));

// 加权RGB距离（BT.709权重）
const distance = (a, b) => {
  const dr = a[0] - b[0];
  const dg = a[1] - b[1];
  const db = a[2] - b[2];
  return Math.sqrt(0.2126 * dr**2 + 0.7152 * dg**2 + 0.0722 * db**2);
};

const nearestColor = colorHex => colors.reduce((a,v) => {
  const currDist = distance(hexToRgb(colorHex), hexToRgb(v));
  return currDist < a[0] ? [currDist, v] : a;
}, [Infinity, colors[0]])[1];

// 测试结果：返回#5D0C8B
console.log(nearestColor("#854B97"));

内容的提问来源于stack exchange，提问作者Adrian