两个值与JS之间的色差/相似度％

我需要计算两个十六进制颜色值之间的差值，因此输出为百分比值。我放弃的第一件事是将十六进制值转换为十进制数，因为第一个数值的权重比上一个要高得多。两个值与JS之间的色差/相似度％

第二种选择是计算每个RGB值之间的差异，然后将它们全部相加。然而，0, 0, 0和30, 30, 30之间的差异远低于0, 0, 0和90, 0, 0之间的差异。

This question建议使用YUV，但我无法弄清楚如何使用它来建立区别。

此外，this other question有一个很好的公式来计算差异和输出一个RGB值，但它不是那里。

2012-11-27 metrobalderas

我发现了一篇关于匹配颜色的好文章http://html5hub.com/exploring-color-matching-in-javascript/ – maersu

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

来源

2012-11-27 15:05:16 bjornd

你看了游戏炼金术士的评论吗？我想他指出你的答案不是很好的一些原因。基本上分开并不意味着人眼更清晰。 – xaxxon

欧几里德距离在RGB色彩空间中不起作用，但对LAB色彩空间起作用。然而，虽然实验室空间是为了感知颜色的感知均匀性，但它不足！所以dE76（字面上的欧几里德距离）不是很准确，特别是饱和度。 de94和de00的准确性更好。更多信息：http://zschuessler.github.io/DeltaE/learn/ –

的问题是，你想要的东西就像一个距离上一个3 dimensionnal世界，但RGB表示不直观可言：“近”的颜色可以是与“远”颜色大不相同。举例来说，两个灰色c1：（120,120,120）和c2：（150,150,150）和a现在取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

来源

2012-11-27 15:35:23 GameAlchemist

对ColorWiki颜色比较第三规则是“不要试图用不同的方程，通过使用平均的因素计算出的颜色差异之间的转换”。这是因为在数学上彼此接近的颜色并不总是在视觉上与我们人类相似。

你在找什么可能是delta-e，这是一个单一的数字，代表两种颜色之间的“距离”。

下面列出了最流行的算法，CIE76（又名CIE 1976或dE76）是最受欢迎的算法。

每个人去了解不同的方式事情，但在大多数情况下，他们都需要你转换到一个更好的（用于比较）颜色模型比RGB。

维基百科有所有的公式：http://en.wikipedia.org/wiki/Color_difference

您可以在线色彩计算器检查您的工作：

最后，这不是JavaScript，但有一个我开始开源的C＃库将做一些这些转换和计算：https://github.com/THEjoezack/ColorMine

来源

2013-03-03 18:14:40

嗨，乔。在你的C＃库中，弧度和度之间没有转换？如'Math.Atan2（lab1.B，aPrime1）％360;'是一个弧度值为360度的魔术，这让我很困惑......让我知道你的想法，谢谢。 –

实现CIE76

https://github.com/garex/nodejs-color-difference

来源

2014-10-27 14:12:53 ygaradon

的JavaScript色差图书馆我发布了一个NPM /鲍尔包计算三个CIE算法：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来做到这一点 - 我相信你也可以找到一些特别的东西。

来源

2015-03-25 03:39:27

两个值与JS之间的色差/相似度％

回答

相关问题