24

出力がパーセンテージ値になるように、2つの16進カラー値の差を計算する必要があります。私が最初に気を失ったのは、16進値を10進数に変換することでした。これは、最初の値の重みが最後の値よりもはるかに大きいためです。

2番目のオプションは、各RGB値の差を計算してから、それらすべてを加算することです。ただし、との差は0, 0, 0との差30, 30, 30よりもはるかに小さく0, 0, 0なり90, 0, 0ます。

この質問はYUVの使用を推奨していますが、違いを確立するためにYUVを使用する方法がわかりません。

また、この他の質問には、差を計算してRGB値を出力するための優れた式がありますが、それは完全ではありません。

4

5 に答える 5

12

問題は、3 次元の世界で距離のようなものが必要なことですが、その RGB 表現はまったく直感的ではありません。「近い」色は「遠い」色とは大きく異なる場合があります。

たとえば、グレーの 2 つの色合い c1 : (120,120,120) と c2 : (150,150,150) を例にとると、今度は c3 : (160,140,​​140) を取ります。これは c1 よりも c2 に近いですが、紫であり、目には暗いグレーがはるかに近くなります。紫より灰色に。

hsv を使用することをお勧めします。色は、「ベース」カラー (色相)、彩度、および強度によって定義されます。色相が近い色は、実際に非常に近い色です。非常に異なる色相を持つ色は互いに関連していません (expl : yellow と green ) が、(非常に) 低い彩度と (非常に) 低い強度で近くに見える場合があります。
(夜はすべての色が同じです。)

色相は 6 つのブロックに分割されているため、 cyl = Math.floor( hue / 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-27T15:35:23.757 に答える
10

ユークリッド距離を計算するだけです：

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-27T15:05:16.970 に答える
2

ColorWikiでの色比較の3番目のルールは、「平均化係数を使用して、異なる方程式で計算された色の違いを変換しようとしないでください」です。これは、数学的に互いに近い色が、必ずしも私たち人間と視覚的に似ているとは限らないためです。

探しているのはおそらくdelta-eです。これは、2つの色の間の「距離」を表す単一の数値です。

最も人気のあるアルゴリズムを以下に示します。CIE76（別名CIE 1976またはdE76）が最も人気があります。

それぞれが異なる方法で物事を進めますが、ほとんどの場合、RGBよりも優れた（比較のための）カラーモデルに変換する必要があります。

ウィキペディアにはすべての公式があります：http：//en.wikipedia.org/wiki/Color_difference

あなたはオンラインの色計算機であなたの仕事をチェックすることができます：

最後に、これはjavascriptではありませんが、私が開始したオープンソースのc＃ライブラリがあり、これらの変換と計算の一部を実行します：https ://github.com/THEjoezack/ColorMine

于 2013-03-03T18:14:40.490 に答える