均等なカラーコード生成

色数を入力すると均等な色を配列で出力する関数。

概要

色塗りグラフなどで必要なカラーチャ−トを自動生成します。引数に生成したい色の数を入力するとその数の均等に離散した色を合成し多次元配列で出力します。均等に離散したと言いましたが、厳密には同じ間隔で離れた連続色になります。

RGB値は入力値に最も近くて大きい自然数の3乗根が選択され組み合わせによって生成されます。そのため入力値が選択される自然数の3乗根より離れていると赤系統の色を含まないカラーチャートが合成される危険性があります。最も均等に合成されるのは入力値の3乗根が自然数となる場合なので、できるだけ入力値の3乗根が自然数となる数を入力してください。その後ランダムに減色すればかなり精度の高いカラーチャートができるはずです。

引数のthintrueだと彩度が低くなり全体としてやわらかい色になります。

関数

function make_color_chart( input,thin )
{
        var r = 0x0;
        var g = 0x0;
        var b = 0x0;
        var thin_plus = ( thin )? 1:0;
        var colors_array = new Array();
        for( var i=0 ; ; i++ )
        {
                if( Math.pow(i,3) >= input )
                {
                        var max = i - 1 + thin_plus;
                        break;
                }
        }
        
        var _plus = 0xff / max;
        for( var i=thin_plus ; i<=max ; i++ )
        {
                r = _plus * i;
                g = 0x0;
                b = 0x0;
                for( var j=thin_plus ; j<=max ; j++ )
                {
                        g = _plus * j;
                        b = 0x0;
                        for( var k=thin_plus ; k<=max ; k++ )
                        {
                                b = _plus * k;
                                colors_array.push( [ Math.round(r) , Math.round(g) , Math.round(b) ] );
                                if( colors_array.length >= input )return colors_array;
                        }
                        if( colors_array.length >= input )return colors_array;
                }
                if( colors_array.length >= input )return colors_array;
        }
}

Test

make colors
個数
薄く

Debug
OutPut
[data]

ページ情報

作成日時
2006/02/07
最終更新日時
2006/02/07
HTML4.01版
index.html
XHTML1.1版
index.xhtml
XML原本
index.xml