カラーグラデーション

カラーグラデーション（color gradient）とは、コンピューターグラフィックスの分野において、一定の範囲における色を、その色の位置に応じて指定するものである。一般的には特定の領域を塗りつぶすために使用される。例えば、ウィンドウマネージャには画面の背景としてグラデーションを設定できるものが多い。「グラディエント（勾配）」によって生成された色は、その位置に応じて連続的に変化し、滑らかな色の遷移を描く。「color gradient」の「gradient」とは「勾配」の意味で、日本語では「グラデーション」と慣用的に訳されているが、「グラデーション（gradation）」とは本来は別の単語である。
カラーランプ（color ramp）とも呼ばれる。「ramp」とは「傾斜」の意味で、照明器具の「ランプ（lamp）」とは無関係である。
定義.
厳密な定義.
カラーマップとは、実数の値formula_1を色空間formula_2上の点formula_3に関連付ける関数である。
formula_4
これは、以下によって定義される。
なお、上記の式中において、
グラデーションのタイプ別の分類.
形による分類.
線形グラデーション.
線形グラデーション（axial color gradient または linear color gradient）は、2つの点（色経由点）および各点の色を指定することでグラデーションを描く、最も基本的なグラデーションの形である。2点間を結ぶ線に沿って、グラデーションの色が線形補間を用いて計算され、そしてその線に垂直な方向にもその色が拡張されて同じ色が塗られる。一般的なデジタル画像処理システムにおいては、色はRGB色空間に基づいて補間されるが、ガンマ圧縮されたRGB色空間を使う場合もしばしばあり（ガンマ補正）、その場合には非線形な補間となる。CSSとSVGはどちらも線形グラデーションをサポートしている。
放射状グラデーション（円形グラデーション）.
放射状グラデーション（円形グラデーション、radial gradient）は、1つの点（放射色経由点）が端部に、もう1つの点が中央にあると指定することで、円形のグラデーションを描く。グラデーションの色は、中心にある放射色経由点からの距離に基づいた線形補間によって算出される。使い道としては、球体による点光源からの光の拡散反射を近似するためにも使用できる。CSSとSVGはどちらも放射状グラデーションをサポートしている。
扇形グラデーション（円錐形グラデーション）.
扇形グラデーション（円錐形グラデーション、conic gradients または conical gradients）は、（中心点から放射状にグラデーションするのではなく）中心点を中心としてぐるりと回転する形で色がグラデーションする。日本語では「扇形」だが、英語では円錐を上から見た時に似ているので「conic（円錐形）」と言う（日本語版Photoshopでは「円錐形グラデーション」の名称で実装されている）。色経由点は「グラデーション弧（扇形グラデーションの中心点を中心とする円周）」上に配置される。扇形グラデーションの使い道としては、円グラフや色相環などがCSSにおいては想定されている。マニアックな使い方だが、左上と右下の色経由点に白を、右上と左下の色経由点に黒を指定することで、市松模様を描くことも可能である。CSSは扇形グラデーションをサポートしているが、SVGでは残念ながらサポートしていない。
その他の形.
ベクター画像編集ソフトにおいては、ポリゴンメッシュを使ってグラデーションを指定することもできる。例えば、Adobe Illustratorは「グラデーションメッシュ」をサポートしている。CSSとSVGは残念ながらポリゴンメッシュをサポートしていない。
色空間による影響.
グラデーションの見た目は、グラデーションの元となる色自体の特性によってだけでなく、計算が実行される色空間によっても左右される。この問題が重大視されるのは、次の2つの理由のためである。
カラーグラデーションの例.
HSVのレインボーカラーマップ.
HSVのレインボーカラーマップ（HSVレインボー）をgnuplotを用いて図示した物。