使用JS在两个值之间的色差/相似度%

Question

我需要计算两个十六进制颜色值之间的差异,因此输出是一个百分比值.我放弃的第一件事是将十六进制值转换为十进制,因为第一个将比最后一个具有更高的权重.

第二个选项是计算每个RGB值之间的差异,然后将它们全部添加.然而,之间的差别0, 0, 0和30, 30, 30比之间的一个低得多0, 0, 0和90, 0, 0.

这个问题建议使用YUV,但我无法弄清楚如何使用它来建立差异.

另外,这个问题有一个很好的公式来计算差异并输出RGB值,但它并不完全存在.

Answer 1

对于那些只是想快速复制/粘贴的人，这里是antimatter15来自这个 repo的代码（为了便于使用做了一些调整）：

function deltaE(rgbA, rgbB) {
  let labA = rgb2lab(rgbA);
  let labB = rgb2lab(rgbB);
  let deltaL = labA[0] - labB[0];
  let deltaA = labA[1] - labB[1];
  let deltaB = labA[2] - labB[2];
  let c1 = Math.sqrt(labA[1] * labA[1] + labA[2] * labA[2]);
  let c2 = Math.sqrt(labB[1] * labB[1] + labB[2] * labB[2]);
  let deltaC = c1 - c2;
  let deltaH = deltaA * deltaA + deltaB * deltaB - deltaC * deltaC;
  deltaH = deltaH < 0 ? 0 : Math.sqrt(deltaH);
  let sc = 1.0 + 0.045 * c1;
  let sh = 1.0 + 0.015 * c1;
  let deltaLKlsl = deltaL / (1.0);
  let deltaCkcsc = deltaC / (sc);
  let deltaHkhsh = deltaH / (sh);
  let i = deltaLKlsl * deltaLKlsl + deltaCkcsc * deltaCkcsc + deltaHkhsh * deltaHkhsh;
  return i < 0 ? 0 : Math.sqrt(i);
}

function rgb2lab(rgb){
  let r = rgb[0] / 255, g = rgb[1] / 255, b = rgb[2] / 255, x, y, z;
  r = (r > 0.04045) ? Math.pow((r + 0.055) / 1.055, 2.4) : r / 12.92;
  g = (g > 0.04045) ? Math.pow((g + 0.055) / 1.055, 2.4) : g / 12.92;
  b = (b > 0.04045) ? Math.pow((b + 0.055) / 1.055, 2.4) : b / 12.92;
  x = (r * 0.4124 + g * 0.3576 + b * 0.1805) / 0.95047;
  y = (r * 0.2126 + g * 0.7152 + b * 0.0722) / 1.00000;
  z = (r * 0.0193 + g * 0.1192 + b * 0.9505) / 1.08883;
  x = (x > 0.008856) ? Math.pow(x, 1/3) : (7.787 * x) + 16/116;
  y = (y > 0.008856) ? Math.pow(y, 1/3) : (7.787 * y) + 16/116;
  z = (z > 0.008856) ? Math.pow(z, 1/3) : (7.787 * z) + 16/116;
  return [(116 * y) - 16, 500 * (x - y), 200 * (y - z)]
}

要使用它，只需传入两个 rgb 数组：

deltaE([128, 0, 255], [128, 0, 255]); // 0
deltaE([128, 0, 255], [128, 0, 230]); // 3.175
deltaE([128, 0, 255], [128, 0, 230]); // 21.434
deltaE([0, 0, 255], [255, 0, 0]); // 61.24

上表来自这里。以上代码基于 DeltaE 1994 版本。

Answer 2

问题是你想要一个像3维世界的距离,但rgb表示根本不直观:'near'颜色可能与'far'颜色有很大不同.

比如两个灰色的c1:(120,120,120)和c2:(150,150,150),现在拿c3:(160,140,​​140)它比c1更接近c2,但它是紫色的,而对于眼睛来说,深灰色更接近灰色比紫色.

我建议你使用hsv:颜色由'基色'(色调),饱和度和强度定义.具有紧密色调的颜色确实非常接近.具有非常不同色调的颜色彼此不相关(探索:黄色和绿色),但可能看起来更接近(非常)低饱和度和(非常)低强度.
(晚上所有颜色都一样.)

由于色调被分为6个块,因此cyl = Math.floor(色调/ 6)为您提供相似度评估的第一步:如果圆柱的相同部分 - >非常接近.如果它们不属于同一个柱面,如果(h2-h1)很小,它们可能仍然(非常)接近,将它与(1/6)进行比较.如果(h2-h1)> 1/6,这可能只是颜色太差了.

然后你可以更精确地使用(s,v).如果低/非常低饱和度和/或低强度,它们更接近颜色.

玩一个支持rgb和hsv的颜色选择器,直到你知道你想要什么作为差值.但请注意,您不能拥有"真正的"相似性度量.

你有一个rgb - > hsv javascript转换器:http://axonflux.com/handy-rgb-to-hsl-and-rgb-to-hsv-color-model-c

Answer 3

我发布了一个用于计算三种CIE算法的npm/Bower软件包:de76,de94和de00.

它是公共领域和Github:

http://zschuessler.github.io/DeltaE/

这是一个快速入门指南:

通过npm安装

npm install delta-e

用法

// Include library
var DeltaE = require('delta-e');

// Create two test LAB color objects to compare!
var color1 = {L: 36, A: 60, B: 41};
var color2 = {L: 100, A: 40, B: 90};

// 1976 formula
console.log(DeltaE.getDeltaE76(color1, color2));

// 1994 formula
console.log(DeltaE.getDeltaE94(color1, color2));

// 2000 formula
console.log(DeltaE.getDeltaE00(color1, color2));

您需要转换为LAB颜色才能使用此库.d3.js有一个很好的API来做到这一点 - 我相信你也可以找到一些特别的东西.

Answer 4

只需计算欧氏距离:

var c1 = [0, 0, 0],
    c2 = [30, 30, 30],
    c3 = [90, 0, 0],
    distance = function(v1, v2){
        var i,
            d = 0;

        for (i = 0; i < v1.length; i++) {
            d += (v1[i] - v2[i])*(v1[i] - v2[i]);
        }
        return Math.sqrt(d);
    };

console.log( distance(c1, c2), distance(c1, c3), distance(c2, c3) );
//will give you 51.96152422706632 90 73.48469228349535