5

不特定多数の色の平均を求める方法を探しています。これを行う方法を探すのに多くの時間を費やしました。まず、色を CMYK に変換して平均化を試みましたが、期待した結果が得られませんでした。次に、いくつかの異なる場所で、色を CIE L*a*b* 空間に変換してから平均化することが、これを行うための推奨される方法であることがわかりました。そこで、RGB カラーを LAB 空間に変換する方法を調べ、これを実現するために必要なアルゴリズムを Javascript に変換しました。

これで LAB 空間に色ができたので、色の平均を見つけるのと同じくらい簡単だと思ったので、このトリックを実行するために次の関数を書きました。

color.mixRGB = function() {
    var cols = Array.prototype.slice.call(arguments),
        i = cols.length,
        lab = {l: 0, a: 0, b: 0};

    while(i--) {
        if (typeof cols[i].r === "undefined" && typeof cols[i].g === "undefined" && typeof cols[i] === "undefined") {
            console.log("Not enough parameters supplied for color " + i + ".");
            return;
        }

        if(cols[i].r === 0 && cols[i].g === 0 && cols[i].b === 0) {
            cols.splice(i, 1);
        } else {
            cols[i] = color.RGBtoLAB(cols[i]);
            lab.l += cols[i].l;
            lab.a += cols[i].a;
            lab.b += cols[i].b;            
        }
    }

    lab.l /= cols.length;
    lab.a /= cols.length;
    lab.b /= cols.length;

    return color.LABtoRGB(lab);
};

関数に RGB (255, 0, 0) と RGB(0, 0, 255) を入力すると、RGB(202, -59, 136) が得られます。この色は、Color Hexa が言うこれら 2 つの RGB の平均、つまり RGB (128, 0, 128)、つまり紫に近いものではありません。

すべてのコードを見直しましたが、これまでのところ、 Color HexaおよびEasyRGBに対してそれらをダブルおよびトリプルチェックすることにより、変換アルゴリズムのいずれにも問題がないことを確認できました。つまり、a) 色を平均化する方法に問題があるか、b) 誤解されており、CIE L*a*b* 空間で色を混ぜようとしてはいけません。

ここで何が欠けていますか？現在のアルゴリズムを使用して、RGB (255, 0, 0) と RGB (0, 0, 255) を平均しても、Color Hexa (または視覚的推定) と同じ結果が得られないのはなぜですか? （ここに私の問題のフィドルがあります）

4

2 に答える 2

4

R0、G0、B0 および R1、G1、B1 で定義された色があるとします。次に、ブレンド/平均色には次の RGB 値があります。

RA = (R0+R1)/2;
GA = (G0+G1)/2;
BA = (B0+B1)/2;

基本的にはそれだけです。

于 2013-07-06T21:35:11.473 に答える
2

null 戻り値は、エラーが発生したことを意味します。

color.mixRGB = function() {
   var cols = Array.prototype.slice.call(arguments),
       i = cols.length,
       rTotal = 0, gTotal = 0, rTotal = 0, colTotal = 0;

   while(i--) {
       // NOTE: you had && in your code, I think they should be ||
       if (typeof cols[i].r === "undefined" || typeof cols[i].g === "undefined" || typeof cols[i] === "undefined") {
            console.log("Not enough parameters supplied for color " + i + ".");
            return null;
        }
        colTotal++;
        rTotal += cols[i].r;
        gTotal += cols[i].g;
        bTotal += cols[i].b;
    }
    if(colTotal === 0) return null;

    // I am not sure what you are trying to return, just build it up with your rgb values
    return (new color(Math.round(rTotal / colTotal), Math.round(gTotal / colTotal), Math.round(bTotal / colTotal)));
};
于 2013-07-06T21:44:52.650 に答える