色(RGB)に少し詳しい方にお願いします。

質問

ランダムに生成されたタイルを並べたいのですが、同系色の色では境界が解りづらくなります。

更に、タイルごとにテキストで文字を表示させたいのですが、
これも背景色に対して出来る限り目立つ色にしたいと思っています。

これをアルゴリズムで解決できませんでしょうか?

使用、言語に依存しな記述で解りやすく説明頂けると助かります。

例えば、

１００回ループ
　背景色=隣のタイルに使える色候補最小<色の最大範囲の乱数<隣のタイルに使える色候補最大値
　隣のタイルに使える色候補最大値=(関数)背景色と差別が計れる最大値
　隣のタイルに使える色候補最小値=(関数)背景色と差別が計れる最小値
　文字色=背景色の正反対の色

(関数)背景色と差別が計れる最大値
　　　　そんなアルゴリズムがあるのか?
(関数)背景色と差別が計れる最小値
　 　　 そんなアルゴリズムがあるのか?

以上、
大雑把ですが、自分なりに流れを考えてみたのですが、
これが、よい方法なのかどうかすら検討がつきません。

そもそも、色相関の理論的なことが解ってないのと
色や数学に対しての知識がないため、
出来る限り、素人にもやさしい言葉で説明して頂ける方がいましたらほんとうに助かります♪

図々しいお願いですが、締め切りが迫りこまっておりますどうぞお助けくださいmOm

回答No.1

Ogre7077 · ベストアンサー

その様な案件に取り組む場合、私なら色を「HSL色空間」で管理して、

タイルの色は「隣接する色から、色相が60度以上離れている」ことで対応します。
色相H = 隣接色の色相 + 乱数(60～300)度
彩度S = 隣接色の彩度
輝度L = 隣接色の輝度

文字色なら簡単に「背景色の色相に180度を加えた色」、つまり補色を使います。
色相H = 背景色の色相 + 180度
彩度S = 背景色の彩度
輝度L = 背景色の輝度

彩度や輝度での差別化は少々ややこしいアルゴリズムになりそうですので、まずは色相だけで試してみてはいかがでしょうか。

ただし RGB色空間しか使えない環境の場合は、RGBとHSLの変換アルゴリズムを用意する必要があります。

お礼

>隣接する色から、色相が60度以上離れている」ことで対応
>色相だけで試す
>RGBとHSLの変換アルゴリズム
この辺りで挑戦してみます。
糸口が全くなかったので具体的に教えて頂き助かります。

回答No.2

OrangeCup150

テキスト色については、テレビなどで使われている中抜き装飾（Ｍｉｃｒｏｓｏｆｔ　Ｗｏｒｄのフォント設定の文字飾りの中抜き）のような感じにするといいと思います。
テキストのサイズが小さい場合には、背景色に応じて白色または黒色にします。白色のときには影を付けるといい感じになります。

質問の主旨と異なりますが、タイル（背景色）に応じて色を変えるというのは実用的ではありません。
色というのは、一種の記号で情報伝達を担っているのでランダムに変えるのは実用性が無いです。たとえば、ブラウザでは青の文字はリンクを意味する、道路交通標識の色による意味の違いなどです。
それよりも重要度が高いのですが一般に理解されていない問題として、人間の視覚処理能力というのは個人差があって色を区別する能力に秀でている人もいれば、病気などが原因で色を区別する能力が劣る人もいます。健常者は区別できても、視覚障碍（がい）者、高齢者は区別できない結果になることも考えられます。
公共サービス機関のサイトでは問題になるため、このような色をチェックするツールがあります。（富士通がＷＥＢアクセシビリティのチェックツールとして提供しています）
まあ、ゲームなどだったら気にする必要はないことですが。

実用性を考えると、背景色と文字色のペアを事前に検証して最低２セット用意しておき、それらをタイル状に並べる方法が有効と思います。タイル状に配置するので背景色は最小で２色あれば十分です。市松模様になります。
アルゴリズムというよりもデザインによる解決ですが。

アルゴリズムで解決するとなると、少なくともＲＧＢ表現ではなくＨＳＶ表現を使って、色の距離を求める方法が有効と思います。ＲＧＢ表現はあくまでも機械の都合なので人間的要素との親和性がありません。
変換式は Wikipedia にそれっぽいのがあります。
http://ja.wikipedia.org/wiki/HSV色空間

お礼

回答ありがとうございます。
HSVは知りませんでした。大変有益な情報ありがとうございます。