颜色渐变

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

线性或轴向颜色渐变

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

定义

在数学中，渐变可以以函数的形式表示^[2]，其中r是实数，c中色彩空间${\displaystyle C}$中的一个点。

$${\displaystyle f:[r_{min},r_{max}]\subset \mathbf {R} \to C}$$

其中：

• 色彩空间C
• 采样点的递增序列${\displaystyle r_{0}<...<r_{m}\in [r_{min},r_{max}]}$
• 颜色空间内的一系列值 ${\displaystyle c_{0},...,c_{m}\in C}$
• 映射${\displaystyle f(r_{i})=c_{i},i=0,...,m}$
• 中间值的插值规则${\displaystyle r_{i-1}<r<r_{i}\in [r_{min},r_{max}]}$

其中：

• r是实数${\displaystyle r\in [r_{min},r_{max}]\subset \mathbf {R} }$
• ${\displaystyle \mathbf {R} }$是实数集
• c是色彩空间C中的颜色点

类型

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

依形状划分

线性渐变

线性渐变，白色线段连接到两个点

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

径向渐变

径向渐变

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

锥形渐变

锥形渐变

锥形渐变（英语：conic gradient或conical gradient），是指颜色围绕一个中心点进行旋转的渐变。锥形渐变的例子包括饼图和色轮^[7]。

其他形状

在矢量图形中，可以使用多边形的渐变，例如在Adobe Illustrator中支持多边形网格（英语：polygon mesh）。

色彩空间

• 
  LCH
• 
  HSV

色彩空间的效果

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

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

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

例子

• 2D RGB profiles
• 
• 
• 
• 
• 
• 
• 

• HSV色轮上的渐变
• 
  单色相渐变
• 
  多色相渐变

HSV彩虹

• HSV彩虹
• 
  RGB 2D profiles
• 
  HSV 2D profiles
• 
  3D RGB profile