web-dev-qa-db-ja.com

配色生成-理論とアルゴリズム

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

質問の例:

  • 補色または類似色を生成する方法は?
  • パステル、コールド、ウォームの色を生成するには?
  • 任意の数のランダムだが異なる色を生成する方法は?
  • それをすべて16進トリプレット(ウェブカラー)に変換する方法は?

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

28
daniel.sedlacek

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

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

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

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

最初のリンクは、Kulerに似た Color Scheme Designer へのリンクです。 Kulerと同様に、これは便利なインタラクティブツールですが、色を選択する方法、つまりどの黄色がどの緑や青と連動するかなどについての洞察はありません。

彼が提供する次のリンクは、NASA Color Usage Research LabのWebサイト sing Information Display Graphics in Color です。このサイトでは、適切なコントラストなどの色を選択する方法についてのより多くの情報を提供し、コントラストなどを測定するための数式をリストしています。そのサイトではまだSWコードや疑似コードアルゴリズムを見つけていませんが、数ページしか見ていません。ステファノはまた、NASAカラーラボがHSVに似たシステムである マンセルカラーシステム を使用していることを指摘していますが、重み付けは、測定可能な色の特性ではなく、人間の色の知覚をより正確に反映します。

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

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

編集:このエリアに役立つリンクを見つけたら、追加します。

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

色生成ツールに関する限り、私は http://kuler.Adobe.com が好きです。

enter image description here

サイトでカラーパレット(5色)を作成する場合、オプションは、類似、単色、トライアド、補色、コンパウンド、シェードです。もちろん、自動生成する代わりに色をカスタマイズできます。各カラーブロックは、RGBと16進数(およびCMYK/HSV/Lab)の数値を示します。

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

これにはもう少し色理論の知識が必要です。ナイス(基本)の説明 ここ を確認してください。カラーホイールをご覧ください。

パステル、コールド、ウォームの色を生成するには?

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

任意の数のランダムだが異なる色を生成する方法は?

グラフ化の目的で、ランダムな色が機能するかどうかはわかりません。各色の選択は、手で選ぶ必要があります。

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

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

たとえば、純粋な赤はFF0000、純粋な青は#0000FFです。紫(赤と青の混合から得られる)は#FF00FFです。

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

http://infosthetics.com

http://flowingdata.com

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

9
Jin

私がしばらくの間考えていたアイデアは、必要な数の色に対して可能な限り異なる(制限内)色を生成することです。同じチャートで後で追加の色をいくつか必要とする場合(おそらく追加の棒をいくつか追加する場合)は、既存の色を同じに保ちながら、同じスキームに合わせる必要があります。

私が思いついたアイデアは、ちょっとしたトリックです。色の円を想像してみてください(色空間全体で任意の円を定義することもできますが、同じ彩度と明るさの異なる色相である可能性があります)。その円の角度を度で指定する代わりに、0から255の範囲を指定します。2進数では、00000000から11111111です。1を8ビット255に追加すると、オーバーフローして0になり、自然に「円形の値」として機能します(技術的には、加算と減算は256を法としています)。

トリックは、これらの数値をビット反転するために、カラー0、カラー1などを選択するときです。 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がビット操作をサポートするかどうかという質問です。

4
Steve314

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

3
Gary Rowe

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

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

この投稿 の作者は、RGBをHSLに変換することに関するいくつかの情報と補色を計算する方法のサンプルコードを提供するのに十分親切でした。

運が良ければ、以下の厄介な名前のAS3ライブラリの1つがうまく機能すれば、それを理解する必要はありません。

2
Steven Jeuris

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

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);
}

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

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

1
Omega Centauri

VisiBoneのオンラインユーティリティはいつも好きでした。複数の色を選択し、それらが互いにどれほど激しく干渉しているかをインタラクティブに評価できるからです。 http://www.visibone.com/colorlab/

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

0
frogstarr78

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

0
GrandmasterB

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

0
Les