颜色渐变

指定一系列随位置而变的颜色

颜色渐变(有时也叫颜色带)是指一定范围的随之位置而变的颜色,通常用于填充某一个区域。[1]渐变产生的颜色随位置连续变化,产生平滑的颜色过渡。

线性或轴向颜色渐变

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

定义

编辑

在数学中,渐变可以以函数的形式表示[2],其中r是实数,c中色彩空间 中的一个点。

 

其中:

  • 色彩空间C
  • 采样点的递增序列 
  • 颜色空间内的一系列值  
  • 映射 
  • 中间值的插值规则 

其中:

  • r是实数 
  •  是实数集
  • c是色彩空间C中的颜色点

类型

编辑

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

依形状划分

编辑

线性渐变

编辑
 
线性渐变,白色线段连接到两个点

线性渐变(英语:linear gradient),有时也称为轴向渐变(英语:axial color gradient),是指沿着一个直线进行过渡的渐变。在数字图像系统中,颜色通常都是以RGB色彩空间进行插值的。CSS和SVG都支持线性渐变[3][4]

径向渐变

编辑
 
径向渐变

径向渐变(英语:radial gradient)是指依照圆形由中心到边缘进行过渡的渐变,其颜色根据距离中心的位置进行线性插值。CSS和SVG都支持径向渐变。在CSS和SVG中,径向渐变可以是圆形,也可以是椭圆[5][6]

锥形渐变

编辑
 
锥形渐变

锥形渐变(英语:conic gradientconical gradient),是指颜色围绕一个中心点进行旋转的渐变。锥形渐变的例子包括饼图和色轮[7]

其他形状

编辑

矢量图形中,可以使用多边形的渐变,例如在Adobe Illustrator中支持多边形网格(英语:polygon mesh)。

色彩空间

编辑

色彩空间的效果

编辑

渐变的外观不仅取决于颜色本身,还会受到颜色空间的计算方式的影响,这一问题主要影响以下两个方面:

  • 对色彩空间的伽玛校正。当γ值约为2时,很容易看到启用了gamma的颜色空间会把颜色混合得深一些,这是由于两个数的平方和不会超过其和的平方。这一效果在混合互补色时尤为明显,例如红色和绿色,其颜色的中间值会是更深的颜色,而不是预期的黄色[8][9]
  • 处理其他的感知属性。在信息的可视化中,让渐变能够平衡地过渡亮度和饱和度是不现实的,这是因为人类感知会强调其品质,导致一些偏差和误解[10]

长期以来,线性的混合方式是游戏引擎的标准[11]。而在网页中,混合方式往往会在颜色渐变和图像缩放中忽略[12]。这种混合与在感知均匀的颜色空间中进行的混合仍然有细微差别[13]

例子

编辑

HSV彩虹

编辑

参考文献

编辑
  1. ^ Eisenberg, J. David. SVG Essentials. O'Reilly Media. 2002: 107. ISBN 0-596-00223-8 (英语). 
  2. ^ 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). 
  3. ^ Linear Gradients页面存档备份,存于互联网档案馆) in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012
  4. ^ Linear Gradients页面存档备份,存于互联网档案馆) in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011
  5. ^ Radial Gradients页面存档备份,存于互联网档案馆) in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012
  6. ^ Radial Gradients页面存档备份,存于互联网档案馆) in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011
  7. ^ mozilla docs: CSS conic-gradient. [2023-09-14]. (原始内容存档于2020-11-01). 
  8. ^ Minute Physics. Computer Color is Broken. YouTube. March 20, 2015. (原始内容存档于2021-12-21). 
  9. ^ Novak, John. What every coder should know about gamma. September 21, 2016 [2023-09-14]. (原始内容存档于2023-09-22). 
  10. ^ 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]. 
  11. ^ Chapter 24. The Importance of Being Linear [第24章:线性的重要性]. NVIDIA Developer. [2023-09-14]. (原始内容存档于2023-10-17) (英语). 
  12. ^ Web color is still broken. [2023-09-14]. (原始内容存档于2023-10-17). 
  13. ^ How software gets color wrong [软件如何弄错颜色]. bottosson.github.io. [2023-09-14]. (原始内容存档于2023-04-20) (英语). 

参见

编辑