この色のグラデーションが他の色のグラデーションよりもはるかに魅力的であるのはなぜですか？

私は開発中のサイトでいくつかのグラデーションをいじっていましたが、特定の色が他の色よりも魅力的である理由の背後にある心理学またはその他の意味に本当に興味があります。

現在のサイトは次のとおりです。

グラデーションはデザインにとって非常に自然に見えます。しかし、ミキシングとマッチングを開始すると、次のようになります。

「自然」に見える別のまともなグラデーションを見つけることができないようです。これらの色の混合をどのように知覚するのか、心理学の背後にあるものを疑問に思っています...グラデーションでうまく調和する色を見つけるためのある種のルールはありますか？私はそれがあなたが行っている感じの種類に依存すると思います。ありとあらゆる入力に感謝します！

最初の例と実験の主な違いは、元の色相の劇的な変化をほとんどカバーしていないことです。

ゴールデンイエローからマゼンタ/ピンクへの移動は、カラーホイールで約1/6回転します。対照的に、実験（オレンジ赤から青紫、青紫から黄緑、シアンから青紫）はすべて1/4回転以上です。

そのような変化は、色の単一のシフトとしてではなく、複数の色の進行として認識されます。ヘッダーではグラデーションがかなり凝縮されているため、急激な変化として現れ、なぜ「自然」に感じられないのかを説明できるかもしれません。

メインの「宛先」カラーブロックに別の色を使用する場合は、グラデーションの開始に隣接する色を選択します。たとえば、終点として青紫の場合、開始点として濃い青またはマゼンタを選択します。エンドポイントとして黄緑の場合、明るい緑または赤から始めます。

もちろん、これらは関係する色のムードに応じて異なる「ムード」を与えます-青紫は元のピンクよりもはるかにクールで落ち着いた色です。ただし、少なくともグラデーションは少し滑らかに見えるはずです。

あなたは「なぜ彼らは異なって知覚されるのか」を尋ねているので、考慮すべきもう一つの（非常にオタクな）事柄があります：RGB色の知覚された発光。これを適用するのは難しいので、トリビアとほぼ同じように私の答えを受け取ってください:)

の色の発光値は、あなたがそれをどのように「照らす」かを示します。色が電球の場合、低輝度の色は薄暗い（40W電球）として認識され、高輝度の色は非常に明るい（100W電球）として認識されます。

RGBカラーは、実際には小さな「電球」を使用して表示されます。画面は、ピクセルごとに3つの小さな「電球」で構成されています。R（ed）、G（reen）、B（lue）です。色の特定のR、GおよびB値は、その色の錯覚を作成するために各小さな電球をどれだけ明るくする必要があるかを示します。たとえば、オレンジ色のRGB（255、100、0）は、赤い電球を最大の効力（255）に変え、緑色の電球を半暗（100）にし、青い電球（0）をオフにすることで作成されます。

これは、いくつかの色と、色の錯覚を作成するために各RGBコンポーネントを「明るく」する方法を示す図です。各色の下の小さな点は、コンポーネントがどのように暗くまたは明るいかを示します。

図でわかるように、たとえば、白を作成するには、3つのコンポーネントを最大（255）にします。3つの小さな「電球」のこの組み合わせは、目で白として認識されます（なぜ大きな余談になるのかを説明します）。黒を作成するには、それらをすべてオフにします。それは簡単です。光も色もありません。

各色の発光は、3つのコンポーネントのそれぞれが「どれだけ明るいか」を加算して計算されます。白は、3つのコンポーネントが最大値に変わるため、最高の発光を示す色になります。黒は、最も低いものです。黄色を作るには、最大で2つの成分が必要ですが、緑色を作るには1つだけ必要なので、黄色は緑よりも高い発光を持ちます。だから、多かれ少なかれあなたは言うことができます

L = R + G + B

ただし、もう少し複雑です。図を見ると、緑色のコンポーネントがより明るく見えることがわかります。実際、それは最も明るいものとして目で認識されます。一方、青は非常に薄暗いものとして認識されます。発光を計算するための正確な式は、それを考慮に入れています。

L = 0.2126 R + 0.7152 G + 0.0722 B

ここに、各色の計算された発光を示す図があります。

あなたの目があなたに言ったかもしれないように、黄色はオレンジより明るいですが、オレンジはマゼンタとほぼ同じくらい明るいことに気付くでしょう。

これで、元の2つのパレットから色を取得し、その発光を計算しました。

最初のケースでは、一番下の最初の色の発光が、一番上の2番目の色の発光（200）よりも低い（125）ことに気づくでしょう。グラデーションは、明るさの増加として知覚され、まるでそれが光っているように見えます。

2番目のケースでは、大きな違いはないため、グラデーションは色相の変化として知覚されます。

3番目の場合、下の色は上の色よりも高いルミネセンスを持っているため、グラデーションは明るさの減少として知覚されます。

これは、カラーホイール上で、お好みの色相よりも比較的同じ距離にある2つの色相を選択した場合でも、結果が異なって知覚される理由を説明します。

http://www.colormatters.com/color-and-design/basic-color-theoryから

1-類似色に基づく配色

類似色は、黄緑色、黄色、黄色オレンジなど、12パートのカラーホイール上に並んでいる3色です。通常、3色のうちの1つが優勢です。

2-補色に基づく配色

補色は、赤と緑、赤紫と黄緑など、正反対の任意の2色です。上の図では、葉には黄緑色のいくつかのバリエーションがあり、蘭には赤紫色のいくつかのバリエーションがあります。これらの反対の色は、最大のコントラストと最大の安定性を作成します。

3-自然に基づいた配色

自然は色の調和の完璧な出発点を提供します。上の図では、この組み合わせがカラーハーモニーの技術式に適合するかどうかに関係なく、赤黄色と緑が調和のとれたデザインを作成します。

AmeliaBRの回答に追加するだけです（コメントである必要がありますが、画像を投稿します）。色相を「シフト」しながら、開始色と終了色の相対的な距離を同じに保つ1つの方法は、Photoshopの色相ツールを使用することです。

最初の画像（お好みのグラデーションの画像）を取り、Photoshopで開きます。次に、色相/彩度ツール（Image->Adjustment->Hue SaturationまたはCtr+U）を開き、最初のスライダー（色相）で再生します。これにより、画像全体の色相がシフトしますが、既存のすべての色相（特にグラデーションの開始と終了の色相）の間で同じ関係が維持されます。インターフェイスの背面は黒（またはニュートラルグレー）であるため、色相の変化は影響しません。

好みの組み合わせが見つかったら、色相/彩度の変更を受け入れ（クリックOK）、スポイトツールを使用して（を押しI）、グラデーションの開始色と終了色を選択します。

この例では、色相-155をシフトし、グラデーションは（トレンディな）アクアマリングリーンからブルーに変わりました。

色覚は非常に個人的な要素を持っています。あなたが他の人にとって「自然」だと感じるかもしれないものは、異常として知覚されるかもしれません。