javascriptで区別できる色生成

識別可能な色を選択するための単純なアルゴリズム（またはjQueryプラグイン）があるかどうかを知りたい場合は、約20種類までの色を選択できます。存在しない場合は、どこで私が直接使用できる識別可能な色の配列を見つけることができますか？javascriptで区別できる色生成

私の使用例は、円グラフのさまざまな色を生成することです。

出典

2012-01-24 Benjamin Crouzier

私の考えはHSVカラーモデルから開始し、最大彩度値と周囲長（色相）を歩くことです。

function hsvToRgb(h, s, v) { 
    //... see e.g.: http://snipplr.com/view/14590 
} 

function distinctColors(count) { 
    var colors = []; 
    for(hue = 0; hue < 360; hue += 360/count) { 
     colors.push(hsvToRgb(hue, 100, 100)); 
    } 
    return colors; 
}

distinctColors(10)は生成します。

[[255, 0, 0], [255, 153, 0], [204, 255, 0], [51, 255, 0], [0, 255, 102], [0, 255, 255], [0, 102, 255], [51, 0, 255], [204, 0, 255], [255, 0, 153]]

RGB値のみを見るだけでは伝えにくいですが、可能な限り異なっている必要があります。私はhsvToRgb()の実装をhereにしました。

出典

2012-01-24 13:21:30

+1これは私がここで使用しているアプローチです：http://graphicdivine.co.uk/timeline/。値段は、2つの100を下に調整することで、彩度と明るさを調整できることを述べる価値があります。 – graphicdivine

また、変数 'saturation'は、分かりやすくするために、おそらく' hue'という名前にする必要があります。 – graphicdivine

@graphicdivine：もちろん、修正しました、ありがとう！ BTWは間違いが明らかであれば誰かの回答を自由に編集できます:-)。 –

たとえば、 Color Scheme Designer。

私は自動的にそれを行う任意のJavaScriptのスニペットを知りませんが、あなたが適切「区別できる色」の用語を定義する場合は1を作成することができます。

デフォルトlist of 16 basic colors in CSS3 (from W3C)もあります：あなたはそれらを使用して、独自の使用のため、他の多くの色をあなたのようなを追加することができます

enter image description here

が。

出典

2012-01-24 13:13:33 Tadeck

として一時的な解決策は、私がweb colorsにWikipediaの記事から色をピックアップ：

var colors = [ 
    '#0000FF', //blue 
    '#FFFF00', //yellow 
    '#008000', //green 
    '#FFA500', // orange 
    '#FF0000', //red 
    '#800080', //purple 
    '#808000', //olive 
    '#00FF00', //lime 
    '#800000', //maroon 
    '#00FFFF', //aqua 
    '#008080', //team 
    '#000080', //navy 
    '#FF00FF', //fushua 
    '#808080' //gray 
];

出典

2012-01-24 13:18:32

多分このリンクはあなたを助けることができる：

http://kuler.adobe.com/

これは非常に便利なツールです！

幸運

出典

2012-01-24 13:23:53 MCSI