查看“︁颜色渐变”︁的源代码

[[File:linear-gradient.svg|thumb|150px|线性或轴向颜色渐变]]
'''颜色渐变'''（有时也叫'''颜色带'''）是指一定范围的随之位置而变的[[颜色]]，通常用于填充某一个区域。<ref>{{cite book |title=SVG Essentials |url=https://archive.org/details/svgessentials00jdav |isbn=0-596-00223-8 |last=Eisenberg |first=J. David |year=2002 |publisher=[[O'Reilly Media]] |page=[https://archive.org/details/svgessentials00jdav/page/n107 107]|language=en}}</ref>渐变产生的颜色随位置连续变化，产生平滑的颜色过渡。

在网页设计中，渐变可以依其形状可以分为线性渐变、径向渐变和锥形渐变，每个渐变由多个色标组成，各个色标都有各自的颜色（含不透明度）和位置。渐变在色标之间进行平滑颜色过渡，因此还需要指定颜色的插值方式。

== 定义 ==

在数学中，渐变可以以[[函数 (数学)|函数]]的形式表示<ref>{{Cite web |url=https://datascience.dsscale.org/wp-content/uploads/2017/10/TheGoodtheBadandtheUgly.pdf |title=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 |access-date=2023-09-14 |archive-date=2023-10-17 |archive-url=https://web.archive.org/web/20231017051200/https://datascience.dsscale.org/wp-content/uploads/2017/10/TheGoodtheBadandtheUgly.pdf |dead-url=no }}</ref>，其中r是实数，c中[[色彩空间]]<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中的颜色点

== 类型 ==
渐变可以按照不同的分类标准进行分类。例如，根据维度来划分，渐变可以是一维、二维或者三维的。而根据形状划分，渐变可以是线性渐变、径向渐变和锥形渐变，甚至是其他一系列形状的渐变。此外，不同的渐变还可以有不同的颜色深度和颜色插值模式。

=== 依形状划分 ===
==== 线性渐变 ====
[[File:Gradient.svg|thumb|150px|线性渐变，白色线段连接到两个点]]
线性渐变（{{lang-en|linear gradient}}），有时也称为轴向渐变（{{lang-en|axial color gradient}}），是指沿着一个直线进行过渡的渐变。在数字图像系统中，颜色通常都是以[[RGB色彩空间]]进行插值的。CSS和SVG都支持线性渐变<ref>[http://www.w3.org/TR/2012/CR-css3-images-20120417/#linear-gradients Linear Gradients] {{Wayback|url=http://www.w3.org/TR/2012/CR-css3-images-20120417/#linear-gradients |date=20210505210938 }} in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012</ref><ref>[http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradients Linear Gradients] {{Wayback|url=http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#LinearGradients |date=20200429003347 }} in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011</ref>。

==== 径向渐变 ====
[[File:radial-gradient.svg|thumb|150px|径向渐变]]
径向渐变（{{lang-en|radial gradient}}）是指依照圆形由中心到边缘进行过渡的渐变，其颜色根据距离中心的位置进行线性插值。CSS和SVG都支持径向渐变。在CSS和SVG中，径向渐变可以是圆形，也可以是椭圆<ref>[http://www.w3.org/TR/2012/CR-css3-images-20120417/#radial-gradients Radial Gradients] {{Wayback|url=http://www.w3.org/TR/2012/CR-css3-images-20120417/#radial-gradients |date=20210505210938 }} in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012</ref><ref>[http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#RadialGradients Radial Gradients] {{Wayback|url=http://www.w3.org/TR/2011/REC-SVG11-20110816/pservers.html#RadialGradients |date=20200429003347 }} in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011</ref>。

==== 锥形渐变 ====

[[File:20151204-IMG 2634BlauGelb.jpg|thumb|right|锥形渐变]]
锥形渐变（{{lang-en|conic gradient}}或{{lang|en|conical gradient}}），是指颜色围绕一个中心点进行旋转的渐变。锥形渐变的例子包括饼图和色轮<ref>{{Cite web |url=https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient |title=mozilla docs: CSS conic-gradient |access-date=2023-09-14 |archive-date=2020-11-01 |archive-url=https://web.archive.org/web/20201101022238/https://developer.mozilla.org/en-US/docs/Web/CSS/conic-gradient |dead-url=no }}</ref>。

====其他形状====
在[[矢量图形]]中，可以使用多边形的渐变，例如在[[Adobe Illustrator]]中支持[[多边形网格]]（{{lang-en|polygon mesh}}）。

=== 色彩空间 ===

<gallery>
LCH Gradient Example.png|[[CIELAB色彩空间|LCH]]
HSV Gradient Example.png|[[HSL和HSV|HSV]]
</gallery>
==== 色彩空间的效果====
渐变的外观不仅取决于颜色本身，还会受到颜色空间的计算方式的影响，这一问题主要影响以下两个方面：

* 对色彩空间的[[伽玛校正]]。当γ值约为2时，很容易看到启用了gamma的颜色空间会把颜色混合得深一些，这是由于两个数的平方和不会超过其和的平方。这一效果在混合[[互补色]]时尤为明显，例如红色和绿色，其颜色的中间值会是更深的颜色，而不是预期的黄色<ref>{{cite web|url=https://www.youtube.com/watch?v=LKnqECcg6Gw |archive-url=https://ghostarchive.org/varchive/youtube/20211221/LKnqECcg6Gw |archive-date=2021-12-21 |url-status=live|title=Computer Color is Broken|author=Minute Physics|date=March 20, 2015|website=[[YouTube]]}}{{cbignore}}</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|access-date=2023-09-14|archive-date=2023-09-22|archive-url=https://web.archive.org/web/20230922174417/https://blog.johnnovak.net/2016/09/21/what-every-coder-should-know-about-gamma/|dead-url=no}}</ref>。
* 处理其他的感知属性。在信息的可视化中，让渐变能够平衡地过渡亮度和饱和度是不现实的，这是因为人类感知会强调其品质，导致一些偏差和误解<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>。

长期以来，线性的混合方式是游戏引擎的标准<ref>{{cite web |title=Chapter 24. The Importance of Being Linear |trans-title=第24章：线性的重要性 |url=https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear |website=NVIDIA Developer |language=en |access-date=2023-09-14 |archive-date=2023-10-17 |archive-url=https://web.archive.org/web/20231017061628/https://developer.nvidia.com/gpugems/gpugems3/part-iv-image-effects/chapter-24-importance-being-linear |dead-url=no }}</ref>。而在网页中，混合方式往往会在颜色渐变和图像缩放中忽略<ref>{{cite web |title=Web color is still broken |url=https://webcolorisstillbroken.com/ |access-date=2023-09-14 |archive-date=2023-10-17 |archive-url=https://web.archive.org/web/20231017051207/https://webcolorisstillbroken.com/ |dead-url=no }}</ref>。这种混合与在感知均匀的颜色空间中进行的混合仍然有细微差别<ref>{{cite web |title=How software gets color wrong |trans-title=软件如何弄错颜色 |url=https://bottosson.github.io/posts/colorwrong/ |website=bottosson.github.io |language=en |access-date=2023-09-14 |archive-date=2023-04-20 |archive-url=https://web.archive.org/web/20230420103509/https://bottosson.github.io/posts/colorwrong/ |dead-url=no }}</ref>。

== 例子 ==
<gallery caption="2D RGB profiles">
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彩虹 ===

<gallery caption="HSV彩虹">
Gnuplot HSV gradient.png| RGB 2D profiles
HSV 2D profile of the rainbow gradient.png|HSV 2D profiles
0 3d 60 75 v.png|3D RGB profile
</gallery>

== 参考文献 ==
{{reflist}}

== 参见 ==
* {{link-en|Ombré|Ombré}}
* {{link-en|数字成像|Image gradient}}
* [[色彩带]]
* [[色调分离]]
* {{link-en|扩散曲线|Diffusion curve}}

{{color topics}}

[[Category:计算机图形学]]