背景色に応じた文字色に変える / ランダム色を生成する

まずはサンプルから。
押すたびに背景色がランダムで変わり、文字色が白か黒の適した色に変わります。

ここをクリック

コードはこんな感じ。

<div id="colordiv" onclick="changeColor();">
  ここをクリック
</div>

<script>
/* 与えられた背景色に適した文字色を返す */
function getStrColor (bg){
    // 色をRGBに分割
    var r = parseInt(bg.substr(1, 2), 16);
    var g = parseInt(bg.substr(3, 2), 16);
    var b = parseInt(bg.substr(5, 2), 16);

    // 適した色を返す
    return ((((r * 299) + (g * 587) + (b * 114)) / 1000 ) < 128) ? "#FFFFFF" : "#000000" ;
}

/* ランダムな背景色とそれに適した文字色を求め、それを設定する */
function changeColor(){
    // ランダムな色を生成（背景色）
    var bgcolor = "#" + Math.round(Math.random() * 255).toString(16) + Math.round(Math.random() * 255).toString(16) + Math.round(Math.random() * 255).toString(16);
    // 生成した背景色に適した文字色を求める
    var strcolor = getStrColor(bgcolor);
    
    // 設定する
    $("#colordiv").css("background", bgcolor);
    $("#colordiv").css("color", strcolor);
}
</script>

ほんとはCSSだけで文字色求める方法を探してたのですが無理そうな気がする。

参考文献

JavaScriptで背景色から適した文字色が白か黒かを判定する方法
乱数を取得する | 主にjQueryのメモ
2進数、10進数、16進数の相互変換:humming bird