颜色渐变

颜色渐变（有时也叫颜色带）是指一定范围的随之位置而变的颜色，通常用于填充某一个区域。渐变产生的颜色随位置连续变化，产生平滑的颜色过渡。 在网页设计中，渐变可以依其形状可以分为线性渐变、径向渐变和锥形渐变，每个渐变由多个色标组成，各个色标都有各自的颜色（含不透明度）和位置。渐变在色标之间进行平滑颜色过渡，因此还需要指定颜色的插值方式。 在数学中，渐变可以以函数的形式表示，其中r是实数，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中的颜色点 渐变可以按照不同的分类标准进行分类。例如，根据维度来划分，渐变可以是一维、二维或者三维的。而根据形状划分，渐变可以是线性渐变、径向渐变和锥形渐变，甚至是其他一系列形状的渐变。此外，不同的渐变还可以有不同的颜色深度和颜色插值模式。 线性渐变（英語：linear gradient），有时也称为轴向渐变（英語：axial color gradient），是指沿着一个直线进行过渡的渐变。在数字图像系统中，颜色通常都是以RGB色彩空间进行插值的。CSS和SVG都支持线性渐变。 径向渐变（英語：radial gradient）是指依照圆形由中心到边缘进行过渡的渐变，其颜色根据距离中心的位置进行线性插值。CSS和SVG都支持径向渐变。在CSS和SVG中，径向渐变可以是圆形，也可以是椭圆。 锥形渐变（英語：conic gradient或conical gradient），是指颜色围绕一个中心点进行旋转的渐变。锥形渐变的例子包括饼图和色轮。 在矢量图形中，可以使用多边形的渐变，例如在Adobe Illustrator中支持多边形网格（英語：polygon mesh）。 LCH HSV 渐变的外观不仅取决于颜色本身，还会受到颜色空间的计算方式的影响，这一问题主要影响以下两个方面： 对色彩空间的伽玛校正。当γ值约为2时，很容易看到启用了gamma的颜色空间会把颜色混合得深一些，这是由于两个数的平方和不会超过其和的平方。这一效果在混合互补色时尤为明显，例如红色和绿色，其颜色的中间值会是更深的颜色，而不是预期的黄色。 处理其他的感知属性。在信息的可视化中，让渐变能够平衡地过渡亮度和饱和度是不现实的，这是因为人类感知会强调其品质，导致一些偏差和误解。 长期以来，线性的混合方式是游戏引擎的标准。而在网页中，混合方式往往会在颜色渐变和图像缩放中忽略。这种混合与在感知均匀的颜色空间中进行的混合仍然有细微差别。 2D RGB profiles HSV色轮上的渐变 单色相渐变 多色相渐变 HSV彩虹 RGB 2D profiles HSV 2D profiles 3D RGB profile Eisenberg, J. David. SVG Essentials. O'Reilly Media. 2002: 107. ISBN 0-596-00223-8 （英语）.  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 (PDF). [2023-09-14]. （原始内容存档 (PDF)于2023-10-17）.  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 mozilla docs: CSS conic-gradient. [2023-09-14]. （原始内容存档于2020-11-01）.  Minute Physics. Computer Color is Broken. YouTube. March 20, 2015. （原始内容存档于2021-12-21）.  Novak, John. What every coder should know about gamma. September 21, 2016 [2023-09-14]. （原始内容存档于2023-09-22）.  Zeileis, Achim; Fisher, Jason C.; Hornik, Kurt; Ihaka, Ross; McWhite, Claire D.; Murrell, Paul; Stauffer, Reto; Wilke, Claus O. Colorspace: A Toolbox for Manipulating and Assessing Colors and Palettes. 2019. arXiv:1903.06490  [stat.CO].  Chapter 24. The Importance of Being Linear [第24章：线性的重要性]. NVIDIA Developer. [2023-09-14]. （原始内容存档于2023-10-17） （英语）.  Web color is still broken. [2023-09-14]. （原始内容存档于2023-10-17）.  How software gets color wrong [软件如何弄错颜色]. bottosson.github.io. [2023-09-14]. （原始内容存档于2023-04-20） （英语）.  Ombré（英语：Ombré） 数字成像（英语：Image gradient） 色彩带 色调分离 扩散曲线（英语：Diffusion curve）