颜色渐变（有时也叫颜色带）是指一定范围的随之位置而变的颜色，通常用于填充某一个区域。渐变产生的颜色随位置连续变化，产生平滑的颜色过渡。
在网页设计中，渐变可以依其形状可以分为线性渐变、径向渐变和锥形渐变，每个渐变由多个色标组成，各个色标都有各自的颜色（含不透明度）和位置。渐变在色标之间进行平滑颜色过渡，因此还需要指定颜色的插值方式。
定义
在数学中，渐变可以以函数的形式表示，其中r是实数，c中色彩空间C中的一个点。
f: [r_{min}, r_{max}] \subset \mathbf{R} \to C
其中：
- 色彩空间C
- 采样点的递增序列r_0
- 颜色空间内的一系列值 c_0,..., c_m \in C
- 映射f(r_i) = c_i ,i = 0,...,m
- 中间值的插值规则r_{i-1}
其中：
- r是实数 r \in [r_{min}, r_{max}] \subset \mathbf{R}
- \mathbf{R}是实数集
- c是色彩空间C中的颜色点
类型
渐变可以按照不同的分类标准进行分类。例如，根据维度来划分，渐变可以是一维、二维或者三维的。而根据形状划分，渐变可以是线性渐变、径向渐变和锥形渐变，甚至是其他一系列形状的渐变。此外，不同的渐变还可以有不同的颜色深度和颜色插值模式。
依形状划分
线性渐变
线性渐变（），有时也称为轴向渐变（），是指沿着一个直线进行过渡的渐变。在数字图像系统中，颜色通常都是以RGB色彩空间进行插值的。CSS和SVG都支持线性渐变。
径向渐变
径向渐变（）是指依照圆形由中心到边缘进行过渡的渐变，其颜色根据距离中心的位置进行线性插值。CSS和SVG都支持径向渐变。在CSS和SVG中，径向渐变可以是圆形，也可以是椭圆。
锥形渐变
锥形渐变（或），是指颜色围绕一个中心点进行旋转的渐变。锥形渐变的例子包括饼图和色轮。
其他形状
在矢量图形中，可以使用多边形的渐变，例如在Adobe Illustrator中支持多边形网格（）。
色彩空间
LCH Gradient Example.png|LCH
HSV Gradient Example.png|HSV
色彩空间的效果
渐变的外观不仅取决于颜色本身，还会受到颜色空间的计算方式的影响，这一问题主要影响以下两个方面：
- 对色彩空间的伽玛校正。当γ值约为2时，很容易看到启用了gamma的颜色空间会把颜色混合得深一些，这是由于两个数的平方和不会超过其和的平方。这一效果在混合互补色时尤为明显，例如红色和绿色，其颜色的中间值会是更深的颜色，而不是预期的黄色。
- 处理其他的感知属性。在信息的可视化中，让渐变能够平衡地过渡亮度和饱和度是不现实的，这是因为人类感知会强调其品质，导致一些偏差和误解。
长期以来，线性的混合方式是游戏引擎的标准。而在网页中，混合方式往往会在颜色渐变和图像缩放中忽略。这种混合与在感知均匀的颜色空间中进行的混合仍然有细微差别。
例子
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
Mono1.png| 单色相渐变
Le Jeu Analogue.png| 多色相渐变
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
参考文献
参见
*
*
- 色彩带
- 色调分离
*
评论 (0)