カラーグラデーションのソースを表示

[[File:linear-gradient.svg|thumb|150px|線形グラデーション]]

'''カラーグラデーション'''（'''color gradient'''）とは、[[コンピューターグラフィックス]]の分野において、一定の範囲における色を、その色の位置に応じて指定するものである。一般的には特定の領域を塗りつぶすために使用される<ref>{{cite book |title=SVG Essentials |url=https://archive.org/details/svgessentials00eise_317 |url-access=limited |isbn=0-596-00223-8 |last=Eisenberg |first=J. David |year=2002 |publisher=[[O'Reilly Media]] |page=[https://archive.org/details/svgessentials00eise_317/page/n32 107]}}</ref>。例えば、[[ウィンドウマネージャ]]には画面の背景としてグラデーションを設定できるものが多い。「グラディエント（勾配）」によって生成された色は、その位置に応じて連続的に変化し、滑らかな色の遷移を描く。「color gradient」の「gradient」とは「[[勾配]]」の意味で、日本語では「グラデーション」と慣用的に訳されているが、「[[グラデーション]]（gradation）」とは本来は別の単語である。

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

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

<gallery caption="RGB色空間を通るカーブ">
3D RGB profile of the Linear Gray Continous color gradient.png|gray 
3D RGB profile of cubehelix color gradient.png|cubehelix<ref>[http://www.mrao.cam.ac.uk/~dag/CUBEHELIX/ Dave Green's `cubehelix' colour scheme]</ref>
0 3d 60 75 v.png|HSV rainbow
3D RGB profile of the Smooth Cool Warm diverging color gradient by Kenneth Moreland.png|diverging<ref>[http://www.kennethmoreland.com/color-maps/ Diverging Color Maps for Scientific Visualization -  Kenneth Moreland]</ref>
</gallery>

===厳密な定義===
カラーマップ<ref>[https://datascience.dsscale.org/wp-content/uploads/2017/10/TheGoodtheBadandtheUgly.pdf 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]</ref>とは、実数の値<math>r</math>を色空間<math>C</math>上の点<math>c</math>に関連付ける[[関数 (数学)|関数]]である。

<math display="block">f: [r_{min}, r_{max}] \subset \mathbf{R} \to C</math>

これは、以下によって定義される。
* 色空間 C
* 標本点からなる増加列 <math>r_0 < ... < r_m \in [r_{min}, r_{max}]</math> 
* 色空間上の連続する値 <math>c_0,..., c_m \in C</math> 
* [[写像]] <math>f(r_i) = c_i ,i = 0,...,m </math>
* 中間値を[[内挿]]（補間）するための法則 <math>r_{i-1} < r < r_i \in [r_{min}, r_{max}]</math>

なお、上記の式中において、
* rは[[実数]] <math> r \in [r_{min}, r_{max}] \subset \mathbf{R} </math> である。
* <math>\mathbf{R}</math> は、実数の集合である。
* c は、[[色]]、すなわち色空間C上の点である。

== グラデーションのタイプ別の分類 ==
*分類の基準
** [[次元 (数学)|次元]] - 1D（1次元）、2D（2次元）、3D（3次元）のものがある。
** 離散的（discrete）/連続的（continuous） - 「離散的（discrete）」とは、特定の色ごとに「[[クラス (集合論)|クラス]]化」された<ref>[https://blog.datawrapper.de/which-color-scale-to-use-in-data-vis/ which-color-scale-to-use-in-data-vis by Lisa Charlotte Rost]</ref>色によるグラデーション。「連続的（continuous）」とは、その逆で、連続的な色によるグラデーション。
** 形 - [[Cascading Style Sheets|CSS]]では直線グラデーション、放射グラデーション、扇形グラデーション、の3つがサポートされている。
** 知覚的な統一性<ref>[https://www.fabiocrameri.ch/visualisation/#ws-block-features-with-aside-icons-3-cols-mQE9rwEn Fabio Crameri:  Scientific colour maps]</ref> - 特にデザイナーにとって重要となる要素。理論的には統一的なグラデーションになっているはずでも、人間が見た時に統一的なグラデーションになっておらず、色が濁って見える場合がある。人間の知覚と、色の物理的な特性をすり寄らせるようなカラーグラデーションが色々と考案されている。
** 順序
*** 順序化 (sequential) /カテゴリ化(categorical） - 集めたデータを可視化する「[[情報可視化]]」において重要となる。データの大きさや比率などに合わせて順序化してカラーグラデーションとして色分けして可視化するのか、あるいは順序化せずにカテゴリーごとに色分けするのか、と言うのが問題となる。
*** 知覚的順序 - 人間の「知覚的な統一性」を考慮して順序化したグラデーションは、色の物理的な特性に合わせて順序化したグラデーションとは異なったものになる。
** リーダビリティ - 人によって色の見え方が違い、特に、特定の視細胞の感度が弱い人がいるので、[[色覚多様性]]に配慮したカラーグラデーションがこれからの時代の基準となってくる。

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

=== 次元による分類 ===
* 1D - 1次元のグラデーション。直線状のグラデーション。
* 2D<ref>[http://publica.fraunhofer.de/documents/N-337230.html 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) {{ISBN2|9781628414875}}</ref> - 2次元のグラデーション。平面の形のグラデーション。
* 3D - 3次元のグラデーション。3次元空間に配置されたグラデーション。
<gallery caption="">
Difficulty_gradient.png |1次元のグラデーション
16777216colors.png |2次元のグラデーション
Munsell color-tree hg.jpg|3次元のグラデーション
</gallery>
=== 形による分類 ===
==== 線形グラデーション ====
[[File:Gradient.svg|thumb|150px|線形カラーグラデーション。ここでは2つの色経由点の位置を解りやすいように白い線分で結んでいる]]
線形グラデーション（axial color gradient または linear color gradient）は、2つの点（色経由点）および各点の色を指定することでグラデーションを描く、最も基本的なグラデーションの形である。2点間を結ぶ線に沿って、グラデーションの色が線形補間を用いて計算され、そしてその線に垂直な方向にもその色が拡張されて同じ色が塗られる。一般的なデジタル画像処理システムにおいては、色はRGB色空間に基づいて補間されるが、ガンマ圧縮されたRGB色空間を使う場合もしばしばあり（[[ガンマ補正]]）、その場合には非線形な補間となる。CSSとSVGはどちらも線形グラデーションをサポートしている<ref>
[https://www.w3.org/TR/2012/CR-css3-images-20120417/#linear-gradients Linear Gradients] in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012</ref><ref>
[https://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradients Linear Gradients] in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011</ref>。

==== 放射状グラデーション（円形グラデーション） ====
[[File:radial-gradient.svg|thumb|150px|放射状カラーグラデーション]]
放射状グラデーション（円形グラデーション、radial gradient）は、1つの点（放射色経由点）が端部に、もう1つの点が中央にあると指定することで、円形のグラデーションを描く。グラデーションの色は、中心にある放射色経由点からの距離に基づいた線形補間によって算出される。使い道としては、球体による点光源からの光の拡散反射を近似するためにも使用できる{{citation needed|date=September 2014}}。CSSとSVGはどちらも放射状グラデーションをサポートしている<ref>
[https://www.w3.org/TR/2012/CR-css3-images-20120417/#radial-gradients Radial Gradients] in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012</ref><ref>
[https://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#RadialGradients Radial Gradients] in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011</ref>。

==== 扇形グラデーション（円錐形グラデーション）====
[[File:20151204-IMG 2634BlauGelb.jpg|thumb|right|扇形グラデーション]]
扇形グラデーション（円錐形グラデーション、conic gradients または conical gradients）は、（中心点から放射状にグラデーションするのではなく）中心点を中心としてぐるりと回転する形で色がグラデーションする。日本語では「扇形」だが、英語では円錐を上から見た時に似ているので「conic（円錐形）」と言う（日本語版Photoshopでは「円錐形グラデーション」の名称で実装されている）。色経由点は「グラデーション弧（扇形グラデーションの中心点を中心とする円周）」上に配置される。扇形グラデーションの使い道としては、[[円グラフ]]や[[色相環]]などがCSSにおいては想定されている<ref>[https://developer.mozilla.org/ja/docs/Web/CSS/gradient/conic-gradient() conic-gradient() - CSS: カスケーディングスタイルシート] MDN</ref>。マニアックな使い方だが、左上と右下の色経由点に白を、右上と左下の色経由点に黒を指定することで、市松模様を描くことも可能である。CSSは扇形グラデーションをサポートしているが、SVGでは残念ながらサポートしていない。

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

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

* 色空間へのガンマ補正。一般的なガンマ値である「&gamma; = 2.2」の場合を想定すると、ガンマ補正がかかった色空間（ガンマ色空間）では数値が線形に増加する色空間（リニア色空間）よりも暗くブレンドされるということはすぐにわかる。というのも、2つの数値の二乗の合計が、2つの数値の合計の二乗を超えることはありえないからである。この効果は、赤と緑などの補色をブレンドすることで最も顕著になり、グラデーションの中間の色は期待通りの黄色ではなく、暗い色になる<ref>{{cite web |url=https://www.youtube.com/watch?v=LKnqECcg6Gw |title=Computer Color is Broken |author=Minute Physics |date=March 20, 2015 |website=[[YouTube]] |accessdate=2022-04-10}}</ref><ref>{{cite web |title=What every coder should know about gamma |url=https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/ |last=Novak |first=John |date=September 21, 2016 |accessdate=2022-04-10}}</ref>。このページで取り上げている「放射状グラデーション」および「扇形グラデーション」の画像は、この不具合を明確に示している。
* 人間の知覚特性との兼ね合い。本来なら2つの色が「滑らか」にグラデーションするはずなのに、グラデーションの途中の混色が汚い部分が目立ってしまう、と言うような事態は、グラデーションを使った[[情報可視化]]の分野においては好ましくない。というのも、人間の視覚がこのような目立った部分を強調して脳に伝えるため、情報の解釈に偏りや混乱を引き起こすからである<ref name="Zeileis2019">{{Cite arXiv |eprint = 1903.06490|last1 = Zeileis|first1 = Achim|title = Colorspace: A Toolbox for Manipulating and Assessing Colors and Palettes|last2 = Fisher|first2 = Jason C.|last3 = Hornik|first3 = Kurt|last4 = Ihaka|first4 = Ross|last5 = McWhite|first5 = Claire D.|last6 = Murrell|first6 = Paul|last7 = Stauffer|first7 = Reto|last8 = Wilke|first8 = Claus O.|class = stat.CO|year = 2019}}</ref>。

== カラーグラデーションの例 ==
<gallery caption="2Dのカラーグラデーションと、それぞれのRGB値">
Cubehelix gnuplot palette.png
Gnuplot color gradient, defined as 0 0 0 0, 1 0 0 1, 3 0 1 0, 4 1 0 0, 6 1 1 1.png
P hot inv.gif
P hot.gif
Gnuplot color gradient RGB defined ( 0 "red", 0.5 "yellow", 1 "green" ).png
Matlab gradient.png
Gnuplot HSV gradient.png
</gallery>

<gallery caption="HSV色相環のカラーグラデーション">
Mono1.png| 同一色相 (いわゆる「[[モノクロ]]」) におけるカラーグラデーション
Le Jeu Analogue.png|複数色相（多色）におけるカラーグラデーション
</gallery>

===HSVのレインボーカラーマップ===
HSVのレインボーカラーマップ（HSVレインボー）を[[gnuplot]]を用いて図示した物。
<gallery caption="">
Gnuplot HSV gradient.png| RGBの値を2Dで示したもの
HSV 2D profile of the rainbow gradient.png|HSVの値を2Dで示したもの
0 3d 60 75 v.png|RGBの値を3Dで示したもの
</gallery>

== 出典 ==
{{reflist}}

== 関連項目 ==
*{{仮リンク|イメージグラデーション|en|Image gradient}}
*{{仮リンク|カラーバンディング|en|Color banding}} -コンピュータで処理した画像に縞模様ができてしまう現象 
*{{仮リンク|ポスタリゼーション|en|Posterization}} -画像の階調数を減らす手法
* [[Diffusion curve]]
* [[色差]]
* [[Color difference#Tolerance|perceptually uniform]] [[color space]]s
* {{仮リンク|カラーマッピング|en|Color mapping}} - 別の画像から抽出した色合いに置き換える手法<!-- a function that maps (transforms) the colors of one image to the colors of another image.-->
* {{仮リンク|パレット (コンピュータ)|en|Palette (computing)}}; a finite set of colors in no particular order
* [[ぼかし (浮世絵)|ぼかし]] - 浮世絵の印刷技法

== 外部リンク ==
{{Wikibooks|Colors/Color gradient}}
{{Commons category|Color gradient}}
* [https://developer.mozilla.org/ja/docs/Web/CSS/CSS_Images/Using_CSS_gradients CSS グラデーションの使用 - CSS: カスケーディングスタイルシート] - [[Cascading Style Sheets|CSS]]におけるカラーグラデーションの使い方を解説したもの。[[MDN Web Docs|MDN]]による提供。

{{color topics}}
{{デフォルトソート:からあくらてえしよん}}
[[Category:コンピュータグラフィックス]]
[[Category:色]]