判断两种颜色是否相似

原理

在 RGB 颜色模型中, R、G、B三个分量相当于三位空间的x轴、y轴、z轴, 这样一来, 判断两像素的相似度即计算两个像素在 RGB 空间的距离(色差)

代码

function getRGB(color) {
  color = parseInt(color.substring(1), 16)
  r = color >> 16
  g = (color - (r << 16)) >> 8
  b = color - (r << 16) - (g << 8)
  return [r, g, b]
}

/*
 * @params threshold 阈值, 小于阈值就可认定像素a和像素b相似
 */
function isSimilar([r1, g1, b1], [r2, g2, b2], threshold = 50) {
  return Math.abs(r1 - r2) + Math.abs(g1 - g2) + Math.abs(b1 - b2) < threshold
}

console.log(isSimilar(getRGB('#fff'), getRGB('#000'))) // false

console.log(isSimilar(getRGB('#f10103'), getRGB('#fa1012'))) //true