[解決済み] 16進カラーが「黒すぎる」ことを確認するには？

質問

カラーピッカーで選んだ色の暗さを評価して、それが "黒すぎる" かどうかを確認し、もしそうなら白に設定しようとしています。16進数の値の最初の文字を使って、これを実行できると思いました。これは動作していますが、いくつかの合法的な明るい色も切り替えています。

私はこれを行うコードを持っています。

        if (lightcolor.substring(0,3) == "#00"|| lightcolor.substring(0,3) == "#010"){
            lightcolor="#FFFFFF";
            color=lightcolor;
        }

色があるレベルの暗さを超えたことを知るために、hex 数学を使ったより効率的な方法があるはずです。例えば、lightcolor + "ある16進値" <= "ある16進値" ならば、それを白に設定するように。

tinyColorを追加しましたので、これに使えるかもしれませんが、確かなことはわかりません。

どのように解決するのですか？

RGBの3つの成分を個別に抽出し、標準的な計算式でRGBの値を知覚できる明るさに変換する必要があります。

6 文字の色を想定した場合。

var c = c.substring(1);      // strip #
var rgb = parseInt(c, 16);   // convert rrggbb to decimal
var r = (rgb >> 16) & 0xff;  // extract red
var g = (rgb >>  8) & 0xff;  // extract green
var b = (rgb >>  0) & 0xff;  // extract blue

var luma = 0.2126 * r + 0.7152 * g + 0.0722 * b; // per ITU-R BT.709

if (luma < 40) {
    // pick a different colour
}

EDIT

2014年5月より tinycolor は、現在では getBrightness() 関数が追加されました。ただし、上記の ITU-R の重み付け係数の代わりに CCIR601 の重み付け係数が使用されています。

EDIT

この結果、ルーマ値の範囲は 0 ～ 255 となり、0 が最も暗く、255 が最も明るくなります。128より大きい値は、以下のように明るいとみなされます。 tinycolor . (恥ずかしながら @pau.moreno と @Alnitak のコメントからコピーしたものです)