【実践テクニック＃5】2色の線形グラデーションで中間色をくすませず鮮やかに見せる

デザイン2022.2.4

最終更新日：2022.2.11 Update!!

今回も実務のデザイン制作で使えるテクニックについてまとめてみたいと思います。シリーズ化して第5回目となる今回は2色の線形グラデーションを鮮やかに見せるテクニックについてまとめていきます。近年のウェブデザインでは彩度の高い鮮やかなグラデーションがデザインに取り入れらることもよく見かけるようになりました。ただ、そのまま高い彩度をもつ色のペアでグラデーションを適用してしまうと、中間色のあたりがくすんでしまうことがあります、今回はその原因と対策について考察してみたいと思います。今すぐ使える実践テクニックの過去記事についてはこちらもぜひご覧ください。（過去記事）【実践テクニック＃1】複数の人物写真を並べるデザインで気をつけるポイント【実践テクニック＃2】料理の写真を使ったデザインで気をつけるポイント【実践テクニック＃3】1pxのハイライトとシャドウで要素を明瞭度を上げてシャープに見せる【実践テクニック＃4】ドロップシャドウをグラデーション状に重ねて自然な影を表現するそれでは早速実践に入ります。まず今回のサンプルとなるグラデーションはこちらになります。開始点が青緑、終了点が明るめの紫と、両方とも鮮やかな彩度をもつ色を選びました。カラーコードについて通常では16進数の記法で表されることが多いですが、今回は彩度が関係してくるので、「HSB」の指標で色を見ていきます。HSBは、左から順に色相（色味）・彩度・明度のスケールで色を表わすコードになります。

開始点の青緑は（160, 100, 90）で終了点の明るい紫は（300, 100, 80）とコードからも分かるようにどちらも高彩度・高明度の色になります。ただし中間点を見ると分かるように少しくすんだブルーになっているようです。両端が鮮やかなので余計に目立ちますね。実際にコードを調べてみると（230, 43, 70）と彩度のスケールだけが大きく下がっているのがわかります。鮮やかな色同士の組み合わせてグラデーションにしているのになぜこうなるのでしょうか？

その答えは、HLSカラーホイールを使うとよく見えてきます。HLSとは、色相（色味）・輝度・彩度をスケールとした指標で、それを円状に関係性を表したものをHLSカラーホイールと言います。カラーホイール上では、円の中心が低彩度で円周に近づくに連れて高彩度になります。開始点の青緑の色はカラーホイール上ではこの位置にあります。

続いて終了点の明るい紫色をカラーホイール上で見ていきます。こちらも鮮やかな色になるので、円周上にある色となります。ただ色相については、補色関係に近い色味になるのでほぼ反対側に位置していますね。

そして中間点のくすんだ青色はこのような位置にある色となります。くすんでいるので円周側からは大きく離れ、どちらかというと円の中心に近いところになりますね。

これら全ての色味をカラーホイール上に並べて位置関係を整理するとこのようになります。ちょうど線形グラデーションの中間点を通り、開始点と終了点を結ぶ一直線が出来上がります。2色の色味が補色関係や対称関係にあることでカラーホイール上の中心付近を通るので必然的に中間色の彩度は下がるということですね。類似色の場合にはこの傾向が弱くなり、対称であればあるほど彩度が下がり、補色関係の時に最大化されるようになります。