きれいな色を取得

きれいな色を適当に取得するには？ということを考えて、とりあえずjavascriptでテストコードを書いてみた。

• getNiceColor - test

きれいな色

ここで言う「きれいな色」というのは、例えば、グラフやラベルなどで、デフォルトで様々な色を取得したいときに使うことを想定しています。つまり、隣り合った色とはある程度判別がつく必要がある、ということです。

コードを書く前には、「全くのランダムでもある程度きれいになるんじゃないのか？」とか思ってたけど、やっぱり全くのランダムではそんなにきれいにならない。
パラメータを変えつつコードを修正しつつ、考えた結果「きれいな色」の定義は、結局次のようになった。
・どぎつい色は良くない。
・グレー系統が集まると汚く見える。
・あまりに薄い色も良くない。
アルゴリズムを書きながら逆に定義ができあがってくるところがおもしろい。
ただ、今回はアルゴリズムでどの程度きれいな色を出せるのか？ということを考えたかったので、きれいな色テーブルみたいなものを持つのはやめておいた。

様々な問題

これは別の問題だけど、モニタの調整度合いや、見ている部屋の照明度合いとかも大きな影響がある。
実際自分の環境がきちんとキャリブレーションされていないし・・。
簡易的なものでもキャリブレーションツールを買おうかな。

huey

もしかして既にある？

と、ここまでテストコード＆エントリを書いてから、こういうアルゴリズムって何かあるのかな？と思った。ちょっと探しても見つからなかったけど、もしこれを読んで「そういうの知ってるよ」という方がおられたら教えて欲しいです！

コード

以下にjavascriptコードを載せておきます。

function getNiceColor()
{
  var colorElem	= [ "66", "88", "AA", "CC", "EE" ];
  var colorElemNum	= colorElem.length;
  
  var rr=0, gg=0, bb=0;
  while( rr+gg+bb<6 || rr+gg+bb>13 || // あまりに暗い色、明るい色は外す.
    (Math.abs(rr-gg)<2 && Math.abs(gg-bb)<2) || // 灰色に近いと外す.
    (Math.abs(rr-gg)>3 || Math.abs(gg-bb)>3) ){ // ある色に偏ると外す.
    rr = Math.floor(Math.random()*colorElemNum);
    gg = Math.floor(Math.random()*colorElemNum);
    bb = Math.floor(Math.random()*colorElemNum);
  }
  
  return colorElem[rr]+colorElem[gg]+colorElem[bb];
}