兩個值與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之間的色差/相似度％

回答

相關問題