カラーグラデーション

カラーグラデーション（color gradient）とは、コンピューターグラフィックスの分野において、一定の範囲における色を、その色の位置に応じて指定するものである。一般的には特定の領域を塗りつぶすために使用される。例えば、ウィンドウマネージャには画面の背景としてグラデーションを設定できるものが多い。「グラディエント（勾配）」によって生成された色は、その位置に応じて連続的に変化し、滑らかな色の遷移を描く。「color gradient」の「gradient」とは「勾配」の意味で、日本語では「グラデーション」と慣用的に訳されているが、「グラデーション（gradation）」とは本来は別の単語である。 カラーランプ（color ramp）とも呼ばれる。「ramp」とは「傾斜」の意味で、照明器具の「ランプ（lamp）」とは無関係である。 「カラーグラデーション」とは、線形順序で配列された色の集合である（つまり、「順序化（ordered）」されている）。 「連続的カラーマップ」とは、色空間を通る曲線である。 RGB色空間を通るカーブ gray cubehelix HSV rainbow diverging カラーマップとは、実数の値 r {\displaystyle r} を色空間 C {\displaystyle C} 上の点 c {\displaystyle c} に関連付ける関数である。 f : [ r m i n , r m a x ] ⊂ R → C {\displaystyle f:[r_{min},r_{max}]\subset \mathbf {R} \to C} これは、以下によって定義される。 色空間 C 標本点からなる増加列 r 0 < . . . < r m ∈ [ r m i n , r m a x ] {\displaystyle r_{0}<...<r_{m}\in [r_{min},r_{max}]} 色空間上の連続する値 c 0 , . . . , c m ∈ C {\displaystyle c_{0},...,c_{m}\in C} 写像 f ( r i ) = c i , i = 0 , . . . , m {\displaystyle f(r_{i})=c_{i},i=0,...,m} 中間値を内挿（補間）するための法則 r i − 1 < r < r i ∈ [ r m i n , r m a x ] {\displaystyle r_{i-1}<r<r_{i}\in [r_{min},r_{max}]} なお、上記の式中において、 rは実数 r ∈ [ r m i n , r m a x ] ⊂ R {\displaystyle r\in [r_{min},r_{max}]\subset \mathbf {R} } である。 R {\displaystyle \mathbf {R} } は、実数の集合である。 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次元のグラデーション 線形グラデーション（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つの理由のためである。 色空間へのガンマ補正。一般的なガンマ値である「γ = 2.2」の場合を想定すると、ガンマ補正がかかった色空間（ガンマ色空間）では数値が線形に増加する色空間（リニア色空間）よりも暗くブレンドされるということはすぐにわかる。というのも、2つの数値の二乗の合計が、2つの数値の合計の二乗を超えることはありえないからである。この効果は、赤と緑などの補色をブレンドすることで最も顕著になり、グラデーションの中間の色は期待通りの黄色ではなく、暗い色になる。このページで取り上げている「放射状グラデーション」および「扇形グラデーション」の画像は、この不具合を明確に示している。 人間の知覚特性との兼ね合い。本来なら2つの色が「滑らか」にグラデーションするはずなのに、グラデーションの途中の混色が汚い部分が目立ってしまう、と言うような事態は、グラデーションを使った情報可視化の分野においては好ましくない。というのも、人間の視覚がこのような目立った部分を強調して脳に伝えるため、情報の解釈に偏りや混乱を引き起こすからである。 2Dのカラーグラデーションと、それぞれのRGB値 HSV色相環のカラーグラデーション 同一色相 (いわゆる「モノクロ」) におけるカラーグラデーション 複数色相（多色）におけるカラーグラデーション HSVのレインボーカラーマップ（HSVレインボー）をgnuplotを用いて図示した物。 RGBの値を2Dで示したもの HSVの値を2Dで示したもの RGBの値を3Dで示したもの ^ Eisenberg, J. David (2002). SVG Essentials. O'Reilly Media. p. 107. ISBN 0-596-00223-8. https://archive.org/details/svgessentials00eise_317  ^ Dave Green's `cubehelix' colour scheme ^ Diverging Color Maps for Scientific Visualization - Kenneth Moreland ^ The Good, the Bad, and the Ugly: A Theoretical Framework for the Assessment of Continuous Colormaps by Roxana Bujack, Terece L. Turton, Francesca Samsel, Colin Ware ^ which-color-scale-to-use-in-data-vis by Lisa Charlotte Rost ^ Fabio Crameri: Scientific colour maps ^ A survey and task-based quality assessment of static 2D colormaps Author(s): Bernard, Jürgen; Steiger, Martin; Mittelstädt, Sebastian; Thum, Simon; Keim, Daniel; Kohlhammer, Jörn, In Kao, David L. (Ed.) ; Society for Imaging Science and Technology -IS&T-; Society of Photo-Optical Instrumentation Engineers -SPIE-, Bellingham/Wash.: Visualization and Data Analysis 2015 : 9–11 February 2015, San Francisco, California Bellingham, WA: SPIE, 2015 (Proceedings of SPIE 9397) ISBN 9781628414875 ^ Linear Gradients in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012 ^ Linear Gradients in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011 ^ Radial Gradients in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012 ^ Radial Gradients in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011 ^ conic-gradient() - CSS: カスケーディングスタイルシート MDN ^ Minute Physics (March 20, 2015). “Computer Color is Broken”. YouTube. 2022年4月10日閲覧。 ^ Novak, John (September 21, 2016). “What every coder should know about gamma”. 2022年4月10日閲覧。 ^ Zeileis, Achim; Fisher, Jason C.; Hornik, Kurt; Ihaka, Ross; McWhite, Claire D.; Murrell, Paul; Stauffer, Reto; Wilke, Claus O. (2019). "Colorspace: A Toolbox for Manipulating and Assessing Colors and Palettes". arXiv:1903.06490 [stat.CO]。 イメージグラデーション（英語版） カラーバンディング（英語版） -コンピュータで処理した画像に縞模様ができてしまう現象 ポスタリゼーション（英語版） -画像の階調数を減らす手法 Diffusion curve 色差 perceptually uniform color spaces カラーマッピング（英語版） - 別の画像から抽出した色合いに置き換える手法 パレット (コンピュータ)（英語版）; a finite set of colors in no particular order ぼかし - 浮世絵の印刷技法 ウィキブックスにColors/Color gradient関連の解説書・教科書があります。 ウィキメディア・コモンズには、カラーグラデーションに関連するカテゴリがあります。 CSS グラデーションの使用 - CSS: カスケーディングスタイルシート - CSSにおけるカラーグラデーションの使い方を解説したもの。MDNによる提供。