10人のプレーヤーに最適な色のセットを見つけるにはどうすればよいですか?


293

10人のプレイヤーにそれぞれ固有の識別色を付けたいと思います。これに最適な色のセットはありますか?作成する方法は?

私が思いついたすべてのセットには、あまりにも似ている色が含まれています。

更新:私はこれが何のためであるかを尋ねられました(公正な質問)。今、私はあなたに話すことができます- ウィンドワードポリスと色はうまくいきました。


2
赤、青、緑、紫、茶色、オレンジ、黄色、黒、白、灰色。
ルイスエストラダ

12
背景は何色ですか?またはシーンに他の色はありますか(たとえば、ニュートラルオブジェクトの場合)。
Ali1S232

これはあなたが計画したものより少し野心的かもしれませんが、プレイヤーにキャラクターの見た目をカスタマイズするためのあらゆる種類のオプションを与えて、可能な組み合わせの量が多いためにそれぞれがユニークに見えるようにしましょう。
フィリップ

後ろを見て、私はあなたが何を着色している​​のかを正確に尋ねたでしょうか?地図上のゾーン?マーカー?3Dゲームのプレイヤーモデル?
ティムホルト

4
この質問に良い答えがあるとは思わなかった、すごい。
ジョッキング

回答:


337

HSV空間に等距離の色相値を生成できます。

for (int i = 0; i < 10; i++)
    colors[i] = HSV(0.1 * i, 0.5, 1.0);

1を試してください

ただし、常に10人のプレイヤーがいるとは限りません。その場合、別の数のプレーヤー用に別のパレットを再生成しない限り、パレットはあまり効率的ではありません。代わりに、一部の著者は、黄金比を使用してパレットを生成することを推奨しています。これは、等分布定理から得られる特性を利用しています。

for (int i = 0; i < 10; i++)
    colors[i] = HSV(fmod(i * 0.618033988749895, 1.0), 0.5, 1.0);

2を試してください

そうすれば、3人または4人または7人のプレーヤーで停止しても、非常に良好な色相の広がりが得られます。

多くの非合理的な数値が機能しますが、黄金比が最も効果的です(証明ています)。

最後に、2つの異なる生成シーケンスを使用して、微調整SまたはVを行うこともできます。たとえば(編集sqrtより良い均等配分の呼び出しを追加しました):

for (int i = 0; i < 10; i++)
    colors[i] = HSV(fmod(i * 0.618033988749895, 1.0),
                    0.5,
                    sqrt(1.0 - fmod(i * 0.618033988749895, 0.5)));

3を試してください

更新:上記の結果Hは、人間の視覚システムを考慮に入れた(RGBコンポーネントのガンマ曲線と同様の)補正曲線を使用することで改善できます。これは、CIEDE2000メトリックを使用して計算した色相補正曲線です。

色相補正曲線

等距離の色相値の結果は次のとおりです。

4を試してください

また、黄金比生成シーケンスの場合(を調整する場合としない場合V):

5を試してください 6を試してください

適度に優れたものを見つけ次第、プログラムで使用するための曲線式の近似値を公開します。


11
素晴らしい答えです!彩度の値をシフトすることも役立ちます。ここには茶色がありません。マップスタイルによっては、白または黒も使用可能な色になる場合があります。
ボボボボ

21
これは、私が推測する色覚異常を考慮しないのですか?それでもなお非常に興味深い答えです。
AlexanderBrevig

7
@AlexanderBrevigいいえ、残念ながらそうではありません。また、人間が色相のコントラストを均一に知覚するとは考えられていないという事実も考慮していません。私は後者について考えており、後で答えを更新するかもしれません。色覚異常の問題は、私が恐れているはるかに複雑な問題です。
サムホセバル

25
色に頼らない単純な色覚異常に対する最良の答え。理想的には、すべてのプレイヤーは、自分がコントロールするすべての俳優に対してユニークなシルエットを持っている必要があります。そして、私はシルエットを意味し、何らかのシンボルではありません。マッチ3種類のゲームの多くはこれを完全に間違っており、色覚異常のない人でもプレイするのが難しく、目の疲れを引き起こします。
ショーンミドルディッチ

13
人間の色知覚グラフをご覧ください。この2D空間に等距離に点をプロットする必要があります。色相で等距離にプロットすると、ほんの少しでも人間の知覚に対応できなくなります。
エリック

172

8つのStarCraftの色は次のとおりです。

赤、青、青緑、紫、オレンジ、茶色(砂漠の地図では緑)、白(氷の地図では緑)、黄色

Obv。BlizzardはUIの天才であり、問​​題を研究しています。

彼らは、砂漠のマップでブラウンのスワップインとしてグリーンを除外したので、技術的には9つがリストされています。

Warcraft 3 の12色は次のとおりです。

赤、青、青緑、紫、黄、オレンジ、緑、ピンク、グレー、ライトブルー、ダークグリーン、ブラウン

これは次のようになります。

ここに画像の説明を入力してください

ご覧のとおり、これらは非常に明確であり、簡単に区別できます。濃い緑は実際には青緑と区別するのが簡単です。おそらく人間の目が緑の色合いを最も簡単に区別できるからです。プレイヤーが女性の四色彩色になると確信しているなら、おそらくどんな色でも選ぶことができます。


3
2つの回答を選択できる場合は、あなたの回答も選択します。ありがとう
デビッドティーレン

11
通常のオブジェクトは複雑なスペクトルを持っているため、四色彩であることは現実世界で色を区別するのに役立ちます。ただし、モニターは3色(赤、緑、青)しかないため、四色彩であることはコンピューターゲームには役立ちません。記事の突然変異を抱える人々に利益をもたらすには、4色(赤、緑、青、オレンジ)の新しいモニターが必要になります。また、RGBカラースペースが限られているため、すべての写真/ビデオがテトラクロマティックには非常に非現実的に見える必要があります。
ジョー

3
部分的な色覚異常を持つ人々は別の問題です-上記のW3スクリーンショットでは、ピンクとグレーはどちらであるかを読み、実際によく見るまで私とほとんど同じに見えます。
f055

20
偉大なプログラマーが盗む!私が最初に行ったことは、最新のブリザードマルチプレイヤーゲームでもあります。
ジェフアトウッド

4
実際、私は部分的に色盲なので、次の色を区別するのがより難しくなります:オレンジvs緑、ピンクvs灰色、
暗緑

75

ここの数人は、HSV色空間を色相上で10の等距離位置に分割することを推奨しています。私の意見では、これは実際には良い解決策ではありません。人間の目は、HSVスペクトル全体で色の違いを均等に知覚しません。たとえば、オレンジと呼ばれるものは、バンドの小さなスライスを占有しますが、25%の良いチャンクは緑色とみなされます。だから、それは悪い前提から始まります。この答えの色の最初の列を見てください。2つのグリーンはほとんど区別できません。

ユーザーが色について話し合い、参照する必要があることを忘れないでください。これに照らして、スタークラフト/ウォークラフトのテーマは、従うべき大きなリードです。普通の英語のクレヨラの色のリストに基づいて選択することは、悪い考えではありません。おなじみの名前の付いた色になるからです。次に、赤、オレンジ、黄色、緑、青、紫、茶色、灰色、白、黒として認識できる限り、それらの色を微調整して、あなたの美学に合ったものを大胆に、ミュートします。

編集:言語と色知覚の関係はとても興味深いので、この素晴らしいリンクを共有したかっただけです。

世界のクレヨラ化:色の名前の付け方と経験的熱意での脳の混乱


2
それは本当に理にかなっています。私の答えを書いている間に、人間の相対的なコントラストの知覚に関する詳細な情報を調査しましたが、数字は見つかりませんでした。多分リンクはありますか?
サムホセバー

以下は、言語と色の関係に関する興味深いプログラムです。dailymotion.com
Matt M.

これを考慮した色相値の非線形マップを知っていますか?
アノニムース

1
こんにちは、@ MattMontag、ただの考え:変更される可能性のある「トップ投票の回答」を参照する代わりに(それでも再び大きなリードを持っています...)、問題の回答に直接リンクする価値があります。良い答え、+ 1
プラチナAzure

3
@ Anony-Mousse:ラボの色空間は、人間の視覚に近づけるように設計されています。知覚の均一性を目指しています。等距離のLabカラーを取得してHSVにマップすると、対応が表示されます。色相に関しては非線形であるだけではありません。
ヤヌストロエルセン

29

この「記号」アプローチを別の答えに分解する必要があると思いました。

昔、私は人々が遠く離れた軍隊の道を簡単に特定するために旗やものが必要だったと思うので、あなたは攻撃するか防御するか(敵の場合)、または軽減するか(味方の場合)を知っています。

それで、偶然にも、まさにあなたがやろうとしていることです。遠くにあるものを簡単に識別します。

あなたは色だけでそれを行うことができますが、おそらくそれを行うより良い方法は色とシンボルを使用することです。色と記号の 組み合わせを使用すると、多くの人が前述したように、色盲の人が物事を識別するのに役立ちます

ユニットが十分に大きい場合は、2〜4色の紋章を使用することもできます。

ここに画像の説明を入力してください

パターンだけでなく、色、容易に認識可能です。適切なテクスチャリングにより、各ユニットの胸部または上腕に非常に大きな紋章が付けられます。

上の画像では、さまざまなユニットのヘルメットのジオメトリとシールドの記章が異なります。

また、非常にシンプルに見える「ロゴ」である日本の月のアイデアも面白いかもしれません

日本の月

今、あなたは基本的にあなたのユニットに最新の「ブランド」をつけています。StarCraft IIはこれを「デカール」で少し行いましたが、

ここに画像の説明を入力してください

しかし、これらはゲーム内ではほとんど見えません

ここに画像の説明を入力してください

また、色のようにユニットの識別には使用されません。

インスピレーションについてもフラグを見てください。特に、3ストライプブランドパターンを使用していないもの(少し混乱するもの)です。考慮してください:

  • スイス: スイスの旗
  • ソモリア: ソモリアの旗
  • 韓国: 韓国の旗

これらにはすべて、非常にシンプルでありながら、独特のフラグがあります。

また、米国政府が防衛スタッフを識別するために使用する記号も確認してください。これらはモノクロ画像です(完全に白黒で行うことができます)。したがって、これは実際には色盲の人を排除しない素晴らしいソリューションかもしれません(基本的に、色ではなくシンボルを使用してチームを識別します)

ここに画像の説明を入力してください

 


これを2つの答えに分けると、一部の画像が壊れています。
マルクストーマス

紋章はクールに見えますが、実際のゲームプレイでは見た目が複雑すぎてわかりません。少なくとも主要な背景色なし。
デビッドC.ビショップ

3
ご存知のように、それは「ソマリア」ではなく「ソマリア」です。
パンダパジャマ

21

なぜ車輪を再発明するのですか?16色のセットの標準もあり、そのうち10色を選択できます。これはANSIセットですhttp://en.wikipedia.org/wiki/ANSI_escape_code#Colors

ここに画像の説明を入力してください

ANSIカラーはRGBキューブに均等に分散されます。これは、HSV空間よりもこの問題に適していると思います。

RGBキューブの極端な部分を撮影すると、赤、青、シアンなどの使い慣れた色が得られます。8つのコーナーポイントの後、エッジ上のすべてのポイントを取得します。


2
実際に色盲の人は、これは色あなたは色のいくつかを排除する場合に優しい盲目にかなり近い考える
アルキメデストラハノ

20

区別できる10色を作るのは本当に難しいでしょう。これは、多くの値のグラフまたはチャートを作成する際の非常に一般的な問題です。そのため、多くの場合、色と形または色とハッシュパターンの組み合わせを使用します。

マーカーを表示する必要がある場合は、4つの基本色(赤、青、オレンジ、黒など)と4つの基本形状(正方形、円、三角形、ダイアモンド)を使用して、16個の非常に簡単に区別できるマーカーを使用できます。

領域を着色する場合は、同じアイデアを使用しますが、色を形ではなく黒または白の線のハッチパターンと組み合わせます。

考慮すべきもう1つのことは、側面を伝える唯一の方法として色を使用しないことです。エリア上にマウスを置くと、そのエリアが強調表示され、プレイヤー名が明示的に記載されたツールヒントが表示されます。または、10人のプレーヤーのリストをマウスオーバーでき、プレーヤー名の上にカーソルを合わせると、そのプレーヤーのマップ上のすべてのエリアが表示されます。

また、色を選択する際には、色覚異常に留意してください。たとえば、緑と赤は区別できない場合があります。見てみましょうhttp://jfly.iam.u-tokyo.ac.jp/color/#select色盲の人のための問題ではないであろう提案した色のセットのために。追加のリソースはhttp://www.usability.gov/articles/newsletter/pubs/022010new.html#ColorsthatWorktheBestです


4
パターンと色覚異常に言及するための+1!ゲーム開発者はこの問題について十分に考えていません。
トレバーパウエル

7

ある人が簡単に区別できる10のユニークな色を取得できる場合でも、別の人はこのセットを区別するのが難しいと感じるかもしれません。

自分自身をより小さな色のセットに制限し、黒のストライプのような識別可能な機能を追加することを検討してください。色のセットについては、おそらくほとんどの人が簡単に区別できるもの、ROYGBIVから遠く離れないことが最善です。ROYGBIVのシンプルなストライプ/ストライプなしでは、14個のゲームピースを識別できます。

また、自分自身を黒のストライプに制限する必要もありません。25ペアを配線するための次のソリューションを検討してください(ペアの代わりにストライプにすることも簡単です):http : //en.wikipedia.org/wiki/25-pair_color_code


際立った特徴といえば、私はあなたが戻って1993年にセガサターン用の10プレイヤーボンバーマンゲームを見てみてください示唆i.imgur.com/mCVmk.png
アルキメデストラハノ

B <-IとI-> Vを区別するのは難しいことが多いため、「I」をドロップします。12個のカラーIDがまだあります。
オコド

「私」を区別するのが難しいことはおそらく真実です。ただし、より明るい「B」とより暗い「I」を見つけて、7(ストライプ付き14)で動作させることができると思います。ただし、ストライプや他の際立った機能を追加することに関する主なポイントは、立っています。
クリストファー


3

ブレント・ベルリンとポール・ケイは、色空間をほんの数個の基本色に分割できることを示しましたが、色に名前を付けると色がより識別しやすくなるという点であなたの文化に依存します。

英語では、11の基本色があります:白、黒、赤、緑、黄色、青、茶色、紫、ピンク、オレンジ、グレー。

Matt Montagが述べたのとほぼ同じ理由で、ホイールの周りの色相を選択するという考えが好きではない


+1これは本当です。文化的な偏見があります。しかし、色の科学もあり、感覚器材に欠陥がない限り(色覚異常など)、波の調和を否定することはできません。
エンジニア

紙から、きちんとしたオンラインアプリへのリンクがあります:kuler.adobe.com
bobobobo

3

色だけでなく、伝承、アートスタイル、色の表現の両方に視覚的な表現を追加します。

たとえば、Legend of the Five Ringsは信じられないほどの方法で「色のセット」を区別しています。

レッスンを受ける最も美しい例の1つ。氏族を区別する何百もの方法に注意してください。原色だけでなく、二次色や三次色も同様です。色は、髪型、服装の種類、キャラクターの種類、シンボルの添付、旗、旗、背中のミニ旗、性格にも含まれています。

私がこれから取る最大のことは、複数の色の組み合わせです。それは単純ではありません:青、赤、紫、茶色、黄色、緑、ティール。

2色の組み合わせで、両方とも非常にはっきりしています。これにより、かなりの数のプレーヤーを追加できます。

各クランには、プライマリカラーとセカンダリカラーのセットがあります。

「カニは主に青灰色と黒、赤、茶色の色で識別されました。」

人がどのように見えたとしても(大、虚弱、sa、魔法使い、農民)、あなたはいつ彼らがどの氏族の出身であるかを常に知ることができたので、それは美しいです。スコーピオンにとって「赤」だけではなく、濃いブラッドレッドと黒でした。フェニックスには赤、オレンジ、黄色のサンバースト色がありました。

スコーピオンとフェニックスを混同することはありません。たとえ色が似ていて、両方とも赤をたくさん使っていたとしてもです。


3

このカラーミキサーをお試しください:w3schools.com HTML Color Mixer

私がやることは次のとおりです。最初のオプションの色を選択します。次に、2番目の色が最初の色とまったく反対の位置になるように、2番目のオプションに1つを選択します。したがって、位置1の色:行1、セル1は反対になります:最終行、最終セル。

そうすれば、ミックスの端で毎回非常に異なる2色になります。これを5回繰り返し、常に最後の選択から離れた色を選択します。


2
私はそれを試してみました。このように間隔を置いた色を選ぶ方が簡単だとわかりました。うまくいく。
マイケルハウス

1

この質問には多くの答えがありますが、アクセシビリティについてもっと触れたいと思いました。

私があなたのシナリオにあった場合(ゲーム内の関係するすべてのプレイヤーによって異なると認識される必要がある量の色を選択する必要があります)、私の主な懸念は色盲のプレイヤーだけでなく、ロービジョン。

私が知る限り、この問題の唯一の解決策はVALUE CONTRASTです。一部の人は白黒でしか見ることができません(情報源:レーザー眼科手術の失敗により色をまったく認識できない一方で、色彩理論の授業を受けた美術大学の物語の友人)。一部の人々は、弱視または部分的/法的に盲目です。あなたは必要な灰色の異なった色合いをあなたは色ように、出発点としてDO選択が表示可能とのために別個のものであるEVERYONE

これをすべて達成し、見栄えの良い色にするために、垂直の黒から白へのグラデーションの上にカラーブレンドモードで水平レインボーグラデーションを重ねて得られるこの画像を検討してください(おそらく、カスタムカラーで試してみてください)虹以外のグラデーション!):

上記のこの画像を再作成するプロセス

最も暗いものから最も明るいものまで:黒、青、赤、マゼンタ、緑、シアン、黄色、白。

「純粋な色」のかすかなジグザグが見えますか?それは、図解された色の自然な価値です。純粋な色を使用する場合でも、青は最も暗く、黄色は最も明るいです。両方が色盲および/または低視力ゲーマーのための値の要件に合う色を選択するには、この情報を利用AND選択した色相の完全な威厳を知覚することができる人々に美的ですが。

お役に立てれば!:-)



PSあなたもこのコメントを見たことを確認したいです!

色に頼らない単純な色覚異常に対する最良の答え。理想的には、すべてのプレイヤーは、自分がコントロールするすべての俳優に対してユニークなシルエットを持っている必要があります。そして、私はシルエットを意味し、何らかのシンボルではありません。マッチ3種類のゲームの多くはこれを完全に間違っており、色覚異常のない人でもプレイするのが難しく、目の疲れを引き起こします。–ショーンミドルディッチ12年12月30日5:08で


0

(色覚異常を考慮せずに)さまざまな数のプレーヤーの識別可能な色に関して最適なセットを確保する方法は、HSL(色相、彩度、明度)カラーモデルから選択することです。

選択に応じて、一定の明度と彩度を選択します。次に360 / playerCount、次の擬似コードのように、色の色相をでシフトします。

saturation = 200;
lightness = 128;
hueDelta = 360 / PLAYER_COUNT;

for (int i = 0; i < PLAYER_COUNT; i++)
    color[i] = Color.FromHSL(hueDelta * i, saturation, lightness);

0

別の配色を提示したい:

16色

これらは、推奨される名前のRGBカラー(同じ順序)です。

#eeeeee - white
#efef00 - yellow
#00e1da - cyan
#bfbf00 - olive
#12c055 - light green
#e21e80 - pink
#777777 - gray
#c10008 - red
#8900ae - light purple
#7c3900 - light brown
#0029b9 - blue
#400086 - dark purple
#4b1c00 - dark brown
#003004 - dark green
#07004b - dark blue
#111111 - black

注:私は純粋な白黒を使用せず、おそらく背景やアウトラインとして使用されると考えました。

方法論:カラーキューブの飽和面で12色を選択し(12に満足していると思います)、それらの分離を確認し、次に-色覚異常をシミュレートするツールを使用して-週の始まりを開始しました。その後、私はできたので、白に近い、黒に近いを追加し、グレーをこっそりしました。それは私に15色を与えました。16の色が欲しかったのは、2の累乗であるため、開発者にとって物事を簡単にすることができたからです。最終的に、16番目の色を追加する方法を見つけました。そのために他の色を移動する必要がありました。次に...色覚異常シミュレーションツールでもう一度確認し、修正して繰り返します。

さまざまな色覚異常のケースを次に示します。

通常: 16色

プロタノピア: プロタノピア

ジュウテロノピア: ジュテラノピア

トリタノピア: トリタノピア

プロタノマリー: プロタノマリー

重度: 奇形

トリタノマリー: トリタノマリー

色覚異常: 色覚異常

色収差: アクロマトーリー


しばらくの間、色覚異常シミュレーションツールで遊んだ後、コントラストが最も重要だと言わざるを得ません。

たとえば、5番目(明るい緑)、7番目(灰色)、および9番目(明るい紫色)の色を考えます。いくつかの場合、特に小さいサイズで別の色で区切られているように見えます。ただし、それらを並べて配置すると、それらを区別できます。色で覆われている領域を増やすと、それらをより簡単に区別できます。だから...色覚異常のための設計は色を選ぶだけではありません。

そのメモで...派factを表すために1色ではなく2色の組み合わせを選択した場合、これは大いに役立ちます。

これらの色は非常に経験的な方法で選ばれました。非常に重要な点は、それらがすべて異なる明るさであることを確認することです。また、ほとんどの「色」が2回現れることに気付きます(2つの緑、2つの紫、2つの茶色などがあります)。実際、4番目の色(オリーブ)は最後に追加したもので、黄色のような色はなかったため、黄色のような色にすることにしました。これが、より体系的な色の選択方法の基礎になると思います。

振り返ってみると、2番目の黄色のような色(オリーブ)をより暗くし、その明るさスポットをピンクに使用する必要があります(7番目の色を参照)。なぜ?遊ぶためにより多くの色合いを与えるからです。ええと...これで十分で、すべての写真を取得するのは面倒です。

補遺:私が考慮しなかったのは、好みの角度範囲から外れた場合のLCDスクリーンの色の違いです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.