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

Post on:2021年3月31日

sponsors

美しい色を選んだのに、グラデーションがくすんでしまうことはありませんか？
真ん中辺りがグレーにくすんでしまうのは、選択した2つのカラーを結ぶ線が色相環の真ん中を通過しているのが原因です。

美しいグラデーションを作成するためにどうすればよいのか、紹介します。
Photoshopなどのデザインツールだけでなく、CSSのグラデーションにも使用できるテクニックです。

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。

カラーのグラデーションについて、Erik D. Kennedy氏が興味深い現象を指摘しています。2つのカラーを使用したグラデーションで、その2つのカラーを結ぶ線がカラースペース内で彩度ゼロの中央を通ると、グラデーションに「グレーのデッドゾーン」が生じます。

グラデーションに「グレーのデッドゾーン」が生じる

グレーになってしまうグラデーションは下記のデモでご覧ください。

また、2色の組み合わせによってはグレーゾーンが発生しないこともあります。例えば、ブルーとレッドの2色でパープルを通過すると、グレーゾーンは発生しません。
上記の色相環で2つのカラーを結ぶ線を確認してみてください。

Erik氏によると、グレーゾーンを通過するのではなく、少し迂回させることでこの減少を回避できます。

彩度ゼロの中央を通過しないようにする

Erik氏がローンチしたGradient Generatorは精度の高いカラーストップでグラデーションを緩和することで、これに対応しています。放射状と円錐形のオプションもあり、中心をスクリーン外に配置することができ、他の方法ではできない美しいグラデーションを作成することができます。

手軽に美しいグラデーションを使用したい時は、下記のギャラリーもあります。