javascript - 如何计算欧氏距离？ (华硕)

Question

因为我读了一篇文章 HSL color scheme对人眼配色方案非常准确我很确定HSL 比较 是检查两种颜色是否相似的最佳方法。

---

从此开始:

我有两种 HSL 颜色，例如...

• 一种引用颜色:296° 100% 62%(作为[296, 100, 62])

• 另一种颜色:290° 100% 40%(如 [290, 100, 40])

...我想计算一个百分比来表示它们的相似性。

所以这两种颜色([296, 100, 62] 和 [290, 100, 40])看起来非常相似，而 [296, 100 , 62] & [196, 30, 32] 没有。

如何计算欧几里德距离以获得它们的差值？

var color1 = [296, 100, 62]
var hue1 = color1[0],      // hue          (values: 0-360)
    sat1 = color1[1],      // saturation   (values: 0-100)
    lig1 = color1[2]       // light        (values: 0-100)

var color2 = [290, 100, 40]
var hue2 = color2[0],      // hue          (values: 0-360)
    sat2 = color2[1],      // saturation   (values: 0-100)
    lig2 = color2[2]       // light        (values: 0-100)


?? How to calculate there difference?

注意:在这里你可以看看euclidean distance

如有任何帮助，我们将不胜感激!

Answer 1

圆柱体中的欧几里得距离...实际上是不可能的。

你应该看看 https://en.wikipedia.org/wiki/Color_difference在维基百科中。你会看到欧几里德距离可以用 RGB 来完成(三元组的每个值都可以达到无穷大)。但这样的距离并不是那么精确。

在上面的页面中，您会看到在 1994 年和 2000 年 CIE 改进了计算色差的方法，以类似欧几里得的方式，但使用 LCh 颜色模型，与 HSL(色度 vs 饱和度)没有太大区别. 2000 版本有一些修正因素。

在任何情况下，只有当dE 小于6 时，颜色差异才有效。超过此限制，您无法比较dE。因此可以说一种颜色与另一种颜色相似(或不相似)，但如果 dE 很大，则不能比较非常不同的颜色(与引用)。