web-dev-qa-db-ja.com

ぬるい暖かい色は何色ですか?

私は、他のユーザーのイニシアチブ(またはプロジェクトのアイデア)に対するユーザーの応答をクラウドソーシングするWebアプリケーションを設計しています。イニシアチブに対する全体的なユーザーの応答は、3つの状態のステータスコンポーネントを使用して表されます。

暖かい場合は#FB6B7B、寒い場合は#45CBE5を使用しています。しかし、ぬるま湯に何色を使うかわかりません。一般の人の目に温かみのある色を教えてください。

the 3 states of my status component

32
Teik Jun

ベージュ


Windows 10には、夜間照明用の色温度計があります。

Win 10 Night Light Color temperature

これを出発点として、グラデーションからメインカラーを抽出し、カラーを反転してグラデーションの「クールな」半分を推定し、これを解決しました。

Color Temperature Meter

この5ポイントスケールでは、Lukewarm#FFE1A5

もちろん、これはWarmの色を変更すると変わります。 Cold色はWarm#FF6000 <---> #009FFFColorHexa )を使用して計算されます。

この jsFiddle を使用して、満足のいく色に調整できます。

29
SNag

ぬるぬるとした色はあまりありません。 xiota's answer の図が示すように、人間が持つ色の関連付け(赤=暖かく、青=冷たい)は、物理学の観点から予想されるものとは正反対です。

  • 「ぬるい」はニュートラルなオプションなので、ニュートラルな色を使用できます:gray。ボタンのスタイルを無効なボタンと異なるものにしてください(ある場合)。
  • 'lukewarm'が真ん中のオプションであるため、赤と青の間の色purpleを使用できます。
  • 「ぬるい」は中央に表示されるので、ボタンの色に関係なく暖かい色と冷たい色(== --- ==)の中立的なオプションであることがわかります。もちろん、その色は他のオプションのいずれにも寄りすぎないようにしてください。青や赤の別の色合いは選びません。
26
Glorfindel

バイオレットとライトグリーン

色知覚理論では、カラーホイールに暖かい色と冷たい色を区別する区分があります。このディビジョンは、バイオレットとライトグリーンによって設定されたディビジョンです。このラインより上は暖かく、下は冷気です。バイオレットとライトグリーンは、暖かい構図にあるときは暖かくなり、冷たい構図にあるときは冷たい色になったという属性があります。この定義の欠如により、暖色または寒色ではなくなります。

enter image description here

黄緑や赤紫など、これらの暖色と冷涼の両極端の中間の色は、かなりニュートラルです。彼らはとても暖かくも涼しくもありません。この時点での暖かく冷たい色の質は非常に微妙です。

FromIch werde ein perfekterKünstler。Bd。2。by John H. Miller、Sonja Steiner-Welz

24
Danielillo

赤が「暖かい」を表す場合、黄色は「ぬるい」に意味があると思います Danielilloの回答 :「ぬるい」は「適度に暖かい」を意味するため、わずかに薄い色で表す必要がありますニュートラルグリーンより暖かい。マゼンタもこのロジックのオプションになりますが、ホットピンク(文字通り、名前に「ホット」が含まれている)との類似性により、混乱を招く選択になると思います。

しかし、これは XY問題 かもしれません。実際には、温度を測定するUXを作成しようとしているのではなく、感情を表しているのです。温度のメタファーは、ユーザーベースに存在すると予想されるすべてのカルチャーに対応していますか?それらの文化は、色が誰にとっても意味を持つのに十分に似た方法で、色を温度と感情にマッピングしますか?例として、赤は英語圏の多くの状況ではネガティブカラーとして表示されますが(たとえば、「インザレッド」または「レッドはストップを意味します」)、中国文化では主にポジティブと見なされます。あなたは「一般大衆」の認識について尋ねましたが、その認識は彼らの文化に依存し、あなたはこの場合「一般大衆」が誰であるかについて言及しませんでした。これらの質問に答えることは、ユーザーベースに正しい選択をするのに役立ちます。

19
Thomas DeSilva

クール対ウォームをどのように決めましたか?他の人が指摘しているように、赤の解釈は一部の人々が期待するものと反対であるため、問題になる可能性があります。

  • 回答は色分けされたgreen-yellow-redとよく見られます。 信号機に慣れているためか、説明なしでうまく機能するようです。 (ライトが必ずしもでなくても、テニスボールやUSドルのように、人々はまだ緑であると考えています。 )

  • あなたが持っているものはそれで十分にうまくいくようです。温度計のイラストと一緒に使用することを検討してください。

    thermometer

  • Kaz は、車の温度コントロールが温度を示す方法を示します。同様のソリューションが一部の家庭用サーモスタットや水栓で使用されています。

    Car A/C

  • [〜#〜] roygbiv [〜#〜]は一部の天気予報で使用されています

    weather forecast

  • 色温度 スケールがあり、青-赤スペクトルこれは、カメラのホワイトバランスを調整するために一般的に使用されます。青はより高温で、赤はより低温であることに注意してください。 中間色は、白、黄、オレンジです。

    color temperature

10
習約塔

まず、Temperatureに関連するターゲットデータがLukewarm color = purple赤と青の中間です。

選択するのに最適な色は「赤と青」のみで、温度を明確に表すため、温度の変化はこれら2つの色の値の間で次のように異なります。グラデーションを使用して次数の変化を示します。例としてリストされた画像のように。

ユーザビリティの主な一般的なルールの1つ:より多くのデータ表現は、ユーザーを集中させるのではなく、ユーザーを混乱させます。あなたは彼の魅力を得るために色を使用しますが、それ以上に彼は値に行き、チャートやグラフィックスのことを無視します。

Mapbox GLについて読むことができます。これは、Web、モバイル、デスクトップに高度にカスタマイズ可能で応答性の高いクライアント側マップを埋め込むためのオープンソースライブラリのスイートです。アプリケーション。

多分それはあなたの仕事のトラックとは関係ありませんが、ヒートマップと色表現をうまく使う方法のアイデアを得るでしょう。詳細を読んで選択肢を絞りましょう!

enter image description here

これは温度マップで、ネットから取得したものです。最近読んだこの便利な記事からその画像を参照できます https://blog.ndustrial.io/temperature-gradient-maps-with-mapbox -gl-9f97fb44d5f2

5
Khalil Hanna

乗用車のAC /ヒーターのコントロールを見てください は有益だと思います。これらは、多くの場合、円形のダイヤルの形で提供され、その反対の範囲は赤と青で示されます。それらの中間をどのように扱うかは、いくつかのパターンに分類されます。

  • 「ぬるい」ゾーンがない:青から赤への突然の移行で、おそらく小さなギャップがあります。

  • 「ぬるい」色はありませんが、少し大きなギャップがあります。

  • 「偽のクロスフェード」で赤から青に重なり、一方のストライプが狭くなり、もう一方のストライプが広くなります。

  • 粗いディザリングによる「フェイククロスフェード」:ストライプが細かくブレンドされ、1つのカラーのカットは他のカラーが短くなるにつれて長くなります。

  • ストライプは重なり合うことなく、またはほぼ一致しますが、中央のミーティングポイントに向かって細くなります。

  • 「ぬるい」ゾーンは白い縞で示されます。時々、青/白/赤の弧はほぼ同じ長さになります。時々、白は範囲の3分の1を大幅に超える場合もあれば、大幅に少ない場合もあります。

白または透明以外の3番目の色(背景/基板の色が何であれ)を使用しているデザインの画像が見つかりません。

コンピューターのUIでは、赤から白、青、または赤から透明/背景から青へのグラデーションを作成するか、上記のアイデアを模倣します。

5
Kaz

赤紫色

顔料ではなく青と赤の光を混ぜると、マゼンタになります。

また、主観的には「ぬるい」色のように感じます。

Magenta

3
Rinke

すべての物理学の議論は無関係であり、平均的なユーザーは色温度についての手がかりを持っていません。しかし、色相の明度のカラーホイールで赤と冷水ブルーの間に線を引くと、手掛かりが得られる場合があります。赤よりもやや藤色の淡いピンクを通過します。それはおそらく良いぬるい色でしょう。暑さと寒さをキャンセルしますが、気づくのに十分な暖かさを残しました。

1
nigel222

この質問はバイアスの完璧な例です。要件は、「ユーザーレスポンスを表示する方法」でした。しかし、与えられた選択/「解決策」は想定された解決策でした-ユーザーの反応を示すための色の使用。正しいアプローチは、ユーザーの反応を最もよく示す方法である必要があります-親指を上/横/下にするのが正しいアプローチである可能性があります-それらは承認/非承認を象徴しています。

0
genetic