グラデーション
読み: ぐらでーしょん
2 色以上の色が滑らかに変化する色の遷移表現。線形、放射状、円錐形などの種類があり、背景やマスクに活用される。
グラデーション (Gradient) は、2 つ以上の色が連続的かつ滑らかに変化する色の遷移表現である。印刷デザイン、Web デザイン、画像処理のいずれにおいても、単色では表現できない奥行きや動きを生み出す基本技法として広く使われている。
主要なグラデーションの種類は以下のとおりである。
- 線形グラデーション (Linear): 指定した方向に沿って色が直線的に変化する。CSS では
linear-gradient(to right, #000, #fff)のように記述 - 放射状グラデーション (Radial): 中心点から外側に向かって同心円状に色が変化する。光源表現やビネット効果に使用
- 円錐形グラデーション (Conic): 中心点を軸に角度方向に色が変化する。円グラフやカラーホイールの表現に適する。CSS の
conic-gradient()で実装可能 - ダイヤモンドグラデーション: 菱形に広がるグラデーション。Photoshop 等の画像編集ソフトで利用可能
グラデーションの品質を左右する重要な概念がバンディング (色の段差) である。8 ビットカラーでは 256 段階しか表現できないため、広い面積に微妙な色変化を適用するとバンディングが目立つ。対策としてディザリングの適用や 16 ビットモードでの編集が有効である。
画像処理ではグラデーションマップ (Gradient Map) も重要な技法である。画像の輝度値をグラデーションの色に置き換えることで、デュオトーンやトリトーンの表現を実現する。カラーグレーディングやアート表現に多用される。