グラデーションのグレーデッドゾーン、真ん中辺りがグレーにくすむのを避ける方法、美しいグラデーションを作成する方法

美しい色を選んだのに、グラデーションがくすんでしまうことはありませんか？ 真ん中辺りがグレーにくすんでしまうのは、選択した2つのカラーを結ぶ線が色相環の真ん中を通過しているのが原因です。 美しいグラデーションを作成するためにどうすればよいのか、紹介します。 Photoshopなどのデザインツールだけでなく、CSSのグラデーションにも使用できるテクニックです。 The “Gray Dead Zone” of Gradients 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 カラーのグラデーションについて、Erik D. Kennedy氏が興味深い現象を指摘しています。2つのカラーを使用したグラデーションで、その2つのカラーを結ぶ線がカラースペース内で彩度ゼロの中央を通ると、グラデーションに「グレーのデッドゾーン」が生じます。

[coliss]

美しいグラデーションを作成するPhotoshopなどのデザインツールだけでなく、CSSのグラデーションにも使用できるテクニック。

[suien42]

これ円錐表面の最短距離とかでモデル化できそう

[spark7]

hslとかに変換してから間を計算すべきなのかね

[schoollife]

そもそも補色を使ったグラデーションはあんまやらないのでは？

[csouls]

すごい

[yoshi-na]

選択色を結ぶ線を可視化した色相環の図がとてもわかりやすい！！

[Katharine_15]

黄色はRGで青はBだから、グラデーションさせると、値が揃うポイントがあるからグレイになるのかな。

[yarumato]

“真ん中辺りがグレーにくすんでしまうのは、選択した2つのカラーを結ぶ線が色相環の真ん中を通過しているのが原因。彩度ゼロの中央を通過しないように迂回させて回避”

[kako-jun]

xy色度図（CIE1931）の中心付近はsaturationが小さい。2点間のグラデーションだと、どうしてもそこを横断する組み合わせがあるので、3点目（中間のhue）を経由する3色グラデーションにすると見かけが良いという話