グラデーションを美しくするには配色が重要、真ん中辺りがグレーにくすんでしまうのを避ける方法

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

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

グラデーションの真ん中辺りがグレーにくすんでしまうのを避ける方法

The “Gray Dead Zone” of Gradients

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

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

2つのカラーを使用したグラデーション

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

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

デモのキャプチャ

グレーゾーンがあるグラデーション

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

デモのキャプチャ

グレーゾーンがないグラデーション

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

グラデーションの設計

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

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

サイトのキャプチャ

Gradient Generator

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

サイトのキャプチャ

Conic.css

sponsors

top of page

©2021 coliss