緑-黄-赤の配色を確立する良い方法はありますか？

基本的な色理論は、グリーン、イエロー、レッドのカラーパレットは笑えるほど醜い、それらは衝突する色であることを私たちに教えています。緑を目立つ色とすると、それに似た色は赤と青になります。そのような配色には黄色の余地はありません。

それで、ユーザーを盲目にすることなく、緑、黄色、赤を配色に組み合わせる方法はありますか？

私の例として、あるユーザーの実際のスキルレベルに対して、プロジェクトに必要なスキルレベルを測定するためにこれらの色が使用されているWebサイトのページがあります。緑はこのレベルを満たしているか、超えています。黄色は期待のわずかな不足を示し、赤は十分ではないか、特定のスキルにまったく欠けていることを示します。

これが私の例です（文字の周りのオレンジと灰色のフィールドは無視してください。これらは無関係です）。

これはかなりひどいように見えることに私たちは皆同意することができますが、それは私が固執する必要があるこの形式であり、全体が緑、赤、黄色です。：/

グラフィック/ウェブデザイナーとは対照的に、主にプログラマーであるため、色理論とユーザーエクスペリエンスについての私の理解は限られています。

それにポイントを置くために、私の質問は、ユーザーエクスペリエンスを損なうことなく、伝統的に衝突するカラースキームをどのように確立できるかということです。

（私の質問が不適切な場合は削除します。どこに質問するかわからなかったので、最も適切であるように思われました）

緑、黄、赤は一緒に行けない？エチオピア人はひどく侮辱されなければなりません。緑、黄、赤の画像にGoogleを使用すると、いくつかの魅力的な例（醜いものに加えて）が見つかると思います。

色のセットがどれだけうまく調和するかは、正確な色座標、色付きオブジェクトの相対的な位置、形状、サイズ、および必要な効果（例：落ち着きと刺激、楽しいと深刻、大胆と微妙）に依存します。 ）。厳密なルールはありませんが、いくつか実験してみましょう。

サイズと飽和のトレードオフ

不快な効果を回避するために（そうしたくない場合）、色付きオブジェクトのサイズは、色の彩度に反比例する必要があります。あなたの例はかなり高い彩度を持っていたので、より低い彩度（例えば、パステル）か、背景以外の色を試してください。たとえば、テキストに色を付けて背景をニュートラルのままにしたり、テキストの横にある小さな形や記号に色を付けたりすることができます。後者は、シェイプを使用して、アクセシビリティと白黒印刷の目的でスキルマッチを冗長にコード化する機会を提供します（満足の場合は緑色のチェックマーク、不足の場合は黄色の感嘆符、不十分な場合は赤色の「入力しない」記号） 。

間隔

色がどのように見えるかは、互いの近さによって異なります。隣接する外観が少し離れていても問題ない場合は、色が衝突します。同じ色のセルを混ぜ合わせて単一のオブジェクトとして認識されることに意味がない限り、各セルの周りに中間色の境界線を配置して、（ヘッダーにあるように）色をより分離します。異なる厚さを試してください。各セルを白い境界線で区切って、タイル状にしてみてください。

パターン

色がうまくいく度合いも、色のパターンによって変化するため、色の典型的な比率と位置でモックアップを評価していることを確認してください。たとえば、ほとんどの場合すべてが緑であり、ユーザーが黄色と赤の「ハイライト」に注意を払うことが最も重要な場合は、背景が適切な緑（彩度、光など）を選択し、黄色と赤が「上」にあるように見えます（彩度が高い、暗いなど）。パターンの美学もユーザーをコミュニケーションさせ、やる気にさせることができると考えてください。ユーザーが特に不適当または不均衡なスキルのセットを持っている場合、おそらく醜いパターンが必要です。最も魅力的なパターンは、ユーザーにとって最も有利な状態に対応している必要があります。

使いやすさ

あなたの質問は美学に関するものですが、色分けの選択はユーザビリティにも大きな影響を与えます。色の選択は次のとおりです。

• 特に劣化した視覚条件下で使用される場合（例：日光のある携帯電話）、互いに視覚的に区別されます。

• 背景（前景の場合）または前景（背景の場合）とのコントラストをよくします。たとえば、赤に黒のテキストはあまり良くありません。一般に、前景と背景には異なるレベルの明るさが必要です。

• 色のランク付けがコードの内容と一致していることを確認してください。たとえば、ユーザーが注意する必要があるものは、背景や他の色とのコントラストを強くする必要があります。

• アクセシビリティと印刷可能性を提供します。各色は異なるレベルの暗さを持ち、暗さはランクに合わせて調整されます（赤よりも黄色が緑よりも多い）。緑がやや青みがかったり、赤がややオレンジがかったりするようにして、赤緑の色覚異常ユーザー（最も一般的な種類の色覚異常）でも色の違いが見えるようにします。

• 1つの変数のみに色分けを使用します。グレーとオレンジの用途はわかりませんが、混乱を招き、ユーザーが赤、緑、黄色を使いにくくなる可能性があります。3色以上あるときはいつでも、物事を使い続けるのは難しいです。灰色とオレンジ色のコードをコーディングする別の方法を見つけます（たとえば、フォントサイズまたは太さを使用するか、セルの境界線に破線を使用します。GをGUIに配置するを参照）。

私が取り組んだ1つのプロジェクトで、付属の色は＃E00000、＃FF8400、および＃C0FFE0でした（非常に黄色がかった黄色ではありませんが、それでも機能しました）。

Breaking the Color Codeで色と明るさのコントラストを計算する方法など、カラーコードの選択について詳しく説明します。

実際のRGYカラーの代わりにパステルを使用してみてください。彩度が低下すると、情報を見やすくなります。

パステルレッドヘックス：＃F7977A RGB：246-150-121

パステルグリーンヘックス：＃82CA9D RGB：130-202-156

パステルイエローHex：＃FFF79A RGB：255-247-153

これら3つの色には3つの主要な課題があると思います。

• 赤と緑はテキストで使用するのに適した明るさのレベルを持っていますが、黄色はそうではありません。
• 黄色は背景色に適した明るさで、緑は目的のために明るくすることができますが、赤はピンクに変わります。
• 緑と赤の彩度を下げると問題なく動作しますが、黄色は濁っています。

飽和色の大きな領域のポップアートの影響が気に入らないと仮定すると、いくつかのオプションしか考えられません。これらはどちらも、色をフェードアウトすることにより、彩度の影響を最小限に抑えます。

• セルの背景にグラデーションを使用します。
• 色をテキストの影として適用します。シャドウは、テキストを目立つように強調するために、かなりのぼかしを必要とします。

美学とは何の関係もないもう1つの課題があります。赤は他の2つの色を圧倒し、ページ上のネガティブマークに注意を引きます。それがあなたの目標であれば、あなたは大丈夫です。チャートをポジティブなものにしたい場合は、苦労します。

「赤」、「黄」、「緑」は解釈の余地が多いので、うまく機能する組み合わせを見つけるチャンスです。

あなたの美的問題のために、私はあなたの「赤」と「緑」の色を取り、それをカラーブレンダーに入れました。次に、ブレンドのカラーモデルとしてpHSLを選択しました。これはすでにカラーセットを改善しました。

次に、印象をさらに良くするために「赤」と「緑」を変えてみました。少し暗く、彩度が高く/強い赤。少し黄色があり、彩度が高いグリーン。

はい、悪くありませんが、まだ準備ができていません。

使いやすさの問題については、注意を導くための（相対）輝度、色相、彩度の階層があることに注意してください。自然に黄色が最も高い輝度値を持っているので、これらのフィールドは私たちの注意を最も引き付けます。そこで、各色を個別に微調整するために色をカラーコンバーターにインポートしました。私の例では、「黄色」と「緑」に等しい輝度値を与えました。黄色の輝度が低いか、緑色の輝度が高いと、審美的に問題があるように見えました。

Photoshopで組み合わせてみたところ、白い（間隔のある）境界線が良い印象を与えることがわかりました。そのため、セルの白い間隔と、エントリの各行を分割するためのせいぜい1つの細い黒い線をお勧めします。

上記のツールを使用することで、個人の好みや要件にさらに合う色の組み合わせを見つけることができます（たとえば、緑の彩度が高い）...

背景として色を使用すると、読みにくくなり、メッセージからユーザーの注意をそらす可能性があるため、注意が必要です。つまり、赤の背景と黒のフォント。

通常、色をグレースケールに変換すると、どの色が最もコントラストがよいかを理解するのに役立ちます。つまり、赤をグレースケールに変換すると、色は濃い灰色になります。したがって、フォントが黒の場合、背景として使用するのは不適切な色です。コントラストをよくする色を選ぶ必要があります。

ただし、ユーザーが何をしようとしているのかをすぐに理解したい場合は、セルを空白（明るい色）のままにして、ステータスを示す小さな記号（正方形または5％またはセルが塗りつぶされている）を追加することをお勧めします色）

そうすれば、ユーザーはテキストを読んで、それが属しているカテゴリーをかなり素早く見ることができます。

ただし、色を組み合わせる場合は、「カラーインデックス」を購入することをお勧めします。そこには、うまくいく組み合わせが何千もあり、時間を節約できます。

あなたが色の正しい色合いを見つけたら、あなたは確かに一緒に赤、黄、緑を使うことができます。

私はいくつかの良い組み合わせを見つけることができるこれらのサイトのいくつかを調べることをお勧めします：

http://www.colorschemer.com/schemes/search.php?s=red+yellow+green&submit=Search

または、自分で作成してみてください。

http://colorschemedesigner.com/

私が本当にお勧めするのは、あなたの色の組み合わせを選んだ後、他の人にそれについてどう思うか尋ねてください。時々、私たちは外見が十分ではなく、色がまったく良くなくても、色を合わせるのが好きです。

適切な色合いを選択するときは、テキストのコントラストと可視性を考慮することを忘れないでください。

淡い黄色は、かなりニュートラルな色として使用することをお勧めします。

ここに3つのスキームがあります。