カラースキームの生成-理論とアルゴリズム[終了]

チャートと図を作成し、配色とアルゴリズムの例に関する理論を探しています。

質問例：

• 補色または類似色を生成する方法は？
• パステル調、寒色、暖色を生成する方法は？
• ランダムではあるが異なる色をいくつでも生成する方法は？
• すべてを16進数のトリプレット（ウェブの色）に変換する方法は？

私の実装はAS3になりますが、擬似コードの例は大歓迎です。

この質問に関する詳細情報を探しているときに（これも苦労しました）、このブログを見つけました。Stefano Mazzocchiが、プログラマーがUIデザインの色を選ぶのを嫌う理由について彼の理論を説明し、いくつかの役立つアドバイスとリンクを提供します。

彼が提供する最初のアドバイスは、色相と彩度を選ぶための基礎を築くこの明白な事実です。

背景と同じコントラストを持つ2つの情報は同じ重要度レベルで認識され（他のすべてのものは等しい）、コントラストが高いほど重要度が高く、コントラストが低いほど重要度が低くなります。

これにより、前景と背景の色を選択する方法に関する最初の手がかりが得られます。重要度の低い情報ではコントラストを低くし、重要度の高い情報ではコントラストを高くする必要があります。

最初のリンクは、Kulerに類似したサイトであるColor Scheme Designerへのリンクです。Kulerと同様に、これは便利な対話型ツールですが、色を選択する方法、つまり、どの黄色がどの緑や青などで機能するかについての洞察を提供しません。

彼が提供する次のリンクは、情報表示グラフィックスで色を使うというタイトルのNASA Color Usage Research Labウェブサイトです。このサイトでは、適切なコントラストなどを得るために色を選択する方法に関する多くの情報を提供し、コントラストなどを測定するための数式をリストしています。そのサイトではまだSWコードや擬似コードアルゴリズムを見つけていませんが、数ページしか見ていません。Stefanoはまた、NASA Color Labがマンセルカラーシステムを使用していることを指摘しています。これはHSVに似ていますが、測定可能な色の特性ではなく、人間の色の知覚をより正確に反映するように重み付けされています。

Stefanoのブログで言及されている最後のリンクは、Color Trends + Palettes :: COLOURloversというサイトへのリンクです。このサイトでは、カラースキームデザイナーまたはKulerほど色を選択するアルゴリズムを見つけることはできませんが、特定の色とパレットのつかの間の楽しみにおける現在の変更の測定可能な品質があまり強調されていません。UIに最新のトレンドを反映させたい場合は、訪れる価値があります。

もう一度、NASAのWebサイトをチェックして、特にColor Scienceのページのいくつかのページを読んでください。一緒に機能し、望ましいコントラストを提供する色を選択するための実行可能なアルゴリズムを考え出すことができるはずです。

編集： 私はそれらを見つけたら、このエリアに追加の便利なリンクを追加します。

1. Colors.pdfのインタラクティブな遺伝的アルゴリズム
2. 知覚的色分割アルゴリズム.pdf
3. Great Web Design.htmlの色と配色の組み合わせガイド

色生成ツールに関する限り、http：//kuler.adobe.comが最も気に入っています。

サイトでカラーパレット（5色）を作成するときのオプションは、アナログ、単色、トライアド、補色、複合、シェードです。もちろん、色を自動生成する代わりに、色をカスタマイズできます。各カラーブロックには、RGBと16進数（およびCMYK / HSV / Lab）の数値が表示されます。

補色または類似色を生成する方法は？

これにはもう少し色理論の知識が必要です。こちらでnice（basic）の説明を確認できます。カラーホイールを参照してください。

パステル調、寒色、暖色を生成する方法は？

一般に、パステルカラーは「ソフトカラー」です。それらは色合いのより高いスペクトルとより低いスペクトルです。Kulerのユーザー生成パステルカラーセクションを参照してください。

ランダムではあるが異なる色をいくつでも生成する方法は？

チャート作成の目的上、ランダムな色が機能するかどうかはわかりません。それぞれの色の選択は、手で選ぶ必要があります。

すべてを16進数のトリプレット（ウェブの色）に変換する方法は？

ほとんどのグラフィカルソフトウェアは、色の16進値を表示します。16進数は、##（赤）、##（緑）、##（青）で構成されるRGB文字列です。

たとえば、純粋な赤はFF0000、純粋な青は＃0000FFです。紫（赤と青の混合から得られます）は＃FF00FFです。

チャートを作成するので、インスピレーションを得るために次のブログにアクセスすることをお勧めします。

http://infosthetics.com

http://flowingdata.com

時間があれば、色理論のレッスンを読んでください

私がしばらく念頭に置いていたアイデアは、必要に応じてできるだけ多くの色に対して、可能な限り異なる（制限内）色を生成することです。余分な面倒なことは、同じチャートに対して後でいくつかの色を追加する必要がある場合（おそらく追加のバーをいくつか追加する場合）、既存の色を同じに保ちながら同じスキームに合わせる必要があることです。

私が思いついたアイデアは少しいじるトリックです。色の円を想像してください（それぞれが同じ彩度と明るさの異なる色相である場合がありますが、任意の色空間で任意の円を定義できます）。その円の角度を度単位で指定する代わりに、0〜255の範囲を設定します。バイナリでは、それは00000000〜11111111です。8ビット255に1を追加すると、オーバーフローしてゼロに戻ります。 （技術用語では、加算と減算は256を法としています）。

トリックは、カラーゼロ、カラーワンなどを選択して、これらの数値をビット反転する場合です。Cでそれを行うには、...

value = ((value & 0x0F) << 4) | ((value & 0xF0) >> 4);
value = ((value & 0x33) << 2) | ((value & 0xCC) >> 2);
value = ((value & 0x55) << 1) | ((value & 0xAA) >> 1);

したがって、シーケンス0、1、2、3、4は0、128、64、192、32に変換されます。

ポイントは、256の異なる色があり、最も早いものは非常に広く間隔が空いており、後のものはそれほど広くない間隔を空けて隙間を埋めることです（64は0と128の中間、32は中間です） 0〜64など）。

特定の「角度」のビット幅は、ビット反転を適応させると機能します。もちろん、色の異なるパラメーターに対して複数のサイクルを一度に実行できます（色相は速く回転しますが、彩度はゆっくり回転します）。

それは、「角度」を特定のRGB数値などにマッピングする方法の問題、つまり、私が専門家ではない-と、ActionScriptがビットいじりをサポートするかどうかという問題だけです。

これに関する興味深いスタックオーバーフローの質問「カラーホイールを作成するための関数」があります。また、推奨される論文（PDF）のいずれかを読むこともできます。

この質問に魅了されたので、グーグル検索を始めました。:)経験に基づいた答えを期待しないでください。

基本的に、色を使用して計算を行うには、HSL形式で表されるカラーホイールで操作を行うのが最善です。

この投稿の著者は、 RGBからHSLへの変換に関する情報と、補色の計算方法に関するサンプルコードを提供してくれました。

運がよければ、次の厄介な名前のAS3ライブラリのいずれかが機能する場合、そのいずれかを理解する必要はありません。

• カラージズ
• モジョカラー

次のコードを使用しました。注：目/脳の仕組みについての理論は使用していません。赤+緑+青= 1のような色の口蓋を作成できるようにしたかっただけで、色はほぼ等間隔です。パラメータ「me」は、可能なnum個の合計のうちのどの色です。numで約91になります。ゼロからnum-1まで実行する必要があることに注意してください。他のことも可能です。上記の制約は非常にarbitrary意的ですが、少なくとも明確な色を生成します-それらの多くを必要としないと仮定します。

void select_color(int me,int num){
  int s[14]={0,1,3,6,10,15,21,28,36,45,55,66,78,91};
  int j,nrows=0,irow=0,jcol=0;
  float del,red,grn,blu;
// we build a red/green triangle with an area>=num
  for(j=0;j<14;j++)if(me>=s[j])irow=j;
  for(j=13;j>0;j--)if(num<=s[j])nrows=j;
  jcol=me-s[irow];
  del=1./(nrows-.9);
  red=1.-del*irow;
  grn=del*jcol;
  blu=1.-red-grn;
  glColor3f(red,grn,blu);
}

繰り返しになりますが、色理論を使用しないため、特に部分的な色盲のユーザーに関心がある場合は、どのようなワットでも色度が最適化されているという保証はありません。

単純に原色変数を乱数に設定することもできますが、視覚的に明確なセットを形成する可能性はさらに低くなります。

過去に、私はそれらを生成しようとするのではなく、20色ほどの色を手で選ぶだけでこれを行ってきました。グラフが非常に複雑でない限り、通常はこれ以上必要ありません。このアプローチは単純ですが、グラフ内の同じ要素に同じ色を割り当てることもできます（たとえば、「販売」を常に同じ色にして、グラフを解釈しやすくすることができます）。

写真から色をサンプリングするのが好きです。デザイナーとしてこれを手動で行います。プログラマーとして、私は通常ランダムなピクセルを選びます。さらに制御したい場合は、特定のルールセットに準拠した独自の「写真」を作成できます。

複数の色を選択し、それらが互いにどれほどひどく衝突するかをインタラクティブに評価できるので、私は常にVisiBoneのオンラインユーティリティが好きでした：http ://www.visibone.com/colorlab/

「アナログ」アートに適用される色のコントラストに精通しており、デジタルアートで色の選択がどれほどひどく衝突したかには驚いたため、それらがどれほどひどく衝突するかを言います。（明らかに私はデザイナーではありません）