颜色渐变

在数学中，渐变可以以函数的形式表示[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中的颜色点

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

线性渐变

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

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

径向渐变

径向渐变

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

锥形渐变

锥形渐变

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

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

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

• Ombré
• 数字成像
• 色彩带
• 色调分离
• 扩散曲线