カラーグラデーション

線形グラデーション

カラーグラデーション（color gradient）とは、コンピューターグラフィックスの分野において、一定の範囲における色を、その色の位置に応じて指定するものである。一般的には特定の領域を塗りつぶすために使用される。例えば、ウィンドウマネージャには画面の背景としてグラデーションを設定できるものが多い。「グラディエント（勾配）」によって生成された色は、その位置に応じて連続的に変化し、滑らかな色の遷移を描く。「color gradient」の「gradient」とは「勾配」の意味で、日本語では「グラデーション」と慣用的に訳されているが、「グラデーション（gradation）」とは本来は別の単語である。

カラーランプ（color ramp）とも呼ばれる。「ramp」とは「傾斜」の意味で、照明器具の「ランプ（lamp）」とは無関係である。

定義

• 「カラーグラデーション」とは、線形順序で配列された色の集合である（つまり、「順序化（ordered）」されている）。
• 「連続的カラーマップ」とは、色空間を通る曲線である。

• RGB色空間を通るカーブ
• 
  gray
• 
  cubehelix
• 
  HSV rainbow
• 
  diverging

厳密な定義

カラーマップとは、実数の値$r$を色空間$C$上の点$c$に関連付ける関数である。

$$f:[r_{min},r_{max}]\subset 𝐑\to C$$

これは、以下によって定義される。

• 色空間 C
• 標本点からなる増加列 $r_0<...<r_m\in [r_{min},r_{max}]$
• 色空間上の連続する値 $c_0,...,c_m\in C$
• 写像 $f(r_i)=c_i,i=0,...,m$
• 中間値を内挿（補間）するための法則 $r_{i-1}<r<r_i\in [r_{min},r_{max}]$

なお、上記の式中において、

• rは実数 $r\in [r_{min},r_{max}]\subset 𝐑$ である。
• $𝐑$ は、実数の集合である。
• c は、色、すなわち色空間C上の点である。

グラデーションのタイプ別の分類

• 分類の基準
  • 次元 - 1D（1次元）、2D（2次元）、3D（3次元）のものがある。
  • 離散的（discrete）/連続的（continuous） - 「離散的（discrete）」とは、特定の色ごとに「クラス化」された色によるグラデーション。「連続的（continuous）」とは、その逆で、連続的な色によるグラデーション。
  • 形 - CSSでは直線グラデーション、放射グラデーション、扇形グラデーション、の3つがサポートされている。
  • 知覚的な統一性 - 特にデザイナーにとって重要となる要素。理論的には統一的なグラデーションになっているはずでも、人間が見た時に統一的なグラデーションになっておらず、色が濁って見える場合がある。人間の知覚と、色の物理的な特性をすり寄らせるようなカラーグラデーションが色々と考案されている。
  • 順序
    • 順序化 (sequential) /カテゴリ化(categorical） - 集めたデータを可視化する「情報可視化」において重要となる。データの大きさや比率などに合わせて順序化してカラーグラデーションとして色分けして可視化するのか、あるいは順序化せずにカテゴリーごとに色分けするのか、と言うのが問題となる。
    • 知覚的順序 - 人間の「知覚的な統一性」を考慮して順序化したグラデーションは、色の物理的な特性に合わせて順序化したグラデーションとは異なったものになる。
  • リーダビリティ - 人によって色の見え方が違い、特に、特定の視細胞の感度が弱い人がいるので、色覚多様性に配慮したカラーグラデーションがこれからの時代の基準となってくる。

• 
  「離散的（discrete）」なカラーグラデーション。特定の明度ごとに「クラス化」されている。
• 
  「連続的（continuous）」なカラーグラデーション。
• 
  「カテゴリ化(categorical）」されたカラーグラデーション。東京都の人口を「情報可視化」したもので、人口増の地域は緑、人口減の地域は赤、でカテゴリ分けされている。
• 
  「知覚的な統一性」を欠いたグラデーション。理論的には2色の統一的なグラデーションになっているはずだが、中間部分であからさまにグラデーションが濁って見える。
• 
  特に「扇形グラデーション」は、「知覚的順序」を欠いたものになりがちで、CSSの教科書通りにグラデをかけただけでは、グラデーションが全く順序的ではないように知覚される。
• 
  任天堂ファミリーコンピュータ（1983年）のカラーパレット。「知覚的な統一性」が考慮されている。

次元による分類

• 1D - 1次元のグラデーション。直線状のグラデーション。
• 2D - 2次元のグラデーション。平面の形のグラデーション。
• 3D - 3次元のグラデーション。3次元空間に配置されたグラデーション。

• 
  1次元のグラデーション
• 
  2次元のグラデーション
• 
  3次元のグラデーション

形による分類

線形グラデーション

線形カラーグラデーション。ここでは2つの色経由点の位置を解りやすいように白い線分で結んでいる

線形グラデーション（axial color gradient または linear color gradient）は、2つの点（色経由点）および各点の色を指定することでグラデーションを描く、最も基本的なグラデーションの形である。2点間を結ぶ線に沿って、グラデーションの色が線形補間を用いて計算され、そしてその線に垂直な方向にもその色が拡張されて同じ色が塗られる。一般的なデジタル画像処理システムにおいては、色はRGB色空間に基づいて補間されるが、ガンマ圧縮されたRGB色空間を使う場合もしばしばあり（ガンマ補正）、その場合には非線形な補間となる。CSSとSVGはどちらも線形グラデーションをサポートしている。

放射状グラデーション（円形グラデーション）

放射状カラーグラデーション

放射状グラデーション（円形グラデーション、radial gradient）は、1つの点（放射色経由点）が端部に、もう1つの点が中央にあると指定することで、円形のグラデーションを描く。グラデーションの色は、中心にある放射色経由点からの距離に基づいた線形補間によって算出される。使い道としては、球体による点光源からの光の拡散反射を近似するためにも使用できるテンプレート:Citation needed。CSSとSVGはどちらも放射状グラデーションをサポートしている。

扇形グラデーション（円錐形グラデーション）

扇形グラデーション

扇形グラデーション（円錐形グラデーション、conic gradients または conical gradients）は、（中心点から放射状にグラデーションするのではなく）中心点を中心としてぐるりと回転する形で色がグラデーションする。日本語では「扇形」だが、英語では円錐を上から見た時に似ているので「conic（円錐形）」と言う（日本語版Photoshopでは「円錐形グラデーション」の名称で実装されている）。色経由点は「グラデーション弧（扇形グラデーションの中心点を中心とする円周）」上に配置される。扇形グラデーションの使い道としては、円グラフや色相環などがCSSにおいては想定されている。マニアックな使い方だが、左上と右下の色経由点に白を、右上と左下の色経由点に黒を指定することで、市松模様を描くことも可能である。CSSは扇形グラデーションをサポートしているが、SVGでは残念ながらサポートしていない。

その他の形

ベクター画像編集ソフトにおいては、ポリゴンメッシュを使ってグラデーションを指定することもできる。例えば、Adobe Illustratorは「グラデーションメッシュ」をサポートしている。CSSとSVGは残念ながらポリゴンメッシュをサポートしていない。

色空間による影響

グラデーションの見た目は、グラデーションの元となる色自体の特性によってだけでなく、計算が実行される色空間によっても左右される。この問題が重大視されるのは、次の2つの理由のためである。

• 色空間へのガンマ補正。一般的なガンマ値である「γ = 2.2」の場合を想定すると、ガンマ補正がかかった色空間（ガンマ色空間）では数値が線形に増加する色空間（リニア色空間）よりも暗くブレンドされるということはすぐにわかる。というのも、2つの数値の二乗の合計が、2つの数値の合計の二乗を超えることはありえないからである。この効果は、赤と緑などの補色をブレンドすることで最も顕著になり、グラデーションの中間の色は期待通りの黄色ではなく、暗い色になる。このページで取り上げている「放射状グラデーション」および「扇形グラデーション」の画像は、この不具合を明確に示している。
• 人間の知覚特性との兼ね合い。本来なら2つの色が「滑らか」にグラデーションするはずなのに、グラデーションの途中の混色が汚い部分が目立ってしまう、と言うような事態は、グラデーションを使った情報可視化の分野においては好ましくない。というのも、人間の視覚がこのような目立った部分を強調して脳に伝えるため、情報の解釈に偏りや混乱を引き起こすからである。

カラーグラデーションの例

• 2Dのカラーグラデーションと、それぞれのRGB値
• 
• 
• 
• 
• 
• 
• 

• HSV色相環のカラーグラデーション
• 
  同一色相 (いわゆる「モノクロ」) におけるカラーグラデーション
• 
  複数色相（多色）におけるカラーグラデーション

HSVのレインボーカラーマップ

HSVのレインボーカラーマップ（HSVレインボー）をgnuplotを用いて図示した物。

• 
  RGBの値を2Dで示したもの
• 
  HSVの値を2Dで示したもの
• 
  RGBの値を3Dで示したもの

関連項目

• テンプレート:仮リンク
• テンプレート:仮リンク -コンピュータで処理した画像に縞模様ができてしまう現象
• テンプレート:仮リンク -画像の階調数を減らす手法
• Diffusion curve
• 色差
• perceptually uniform color spaces
• テンプレート:仮リンク - 別の画像から抽出した色合いに置き換える手法
• テンプレート:仮リンク; a finite set of colors in no particular order
• ぼかし - 浮世絵の印刷技法

外部リンク

• CSS グラデーションの使用 - CSS: カスケーディングスタイルシート - CSSにおけるカラーグラデーションの使い方を解説したもの。MDNによる提供。