线性或轴向颜色渐变
颜色渐变（有时也叫颜色带）是指一定范围的随之位置而变的颜色，通常用于填充某一个区域。[1]渐变产生的颜色随位置连续变化，产生平滑的颜色过渡。
在网页设计中，渐变可以依其形状可以分为线性渐变、径向渐变和锥形渐变，每个渐变由多个色标组成，各个色标都有各自的颜色（含不透明度）和位置。渐变在色标之间进行平滑颜色过渡，因此还需要指定颜色的插值方式。
定义[编辑]
在数学中，渐变可以以函数的形式表示[2]，其中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}<... 颜色空间内的一系列值 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 ∈ [ 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都支持线性渐变[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 参考文献[编辑] ^ 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） 查论编颜色主題色度学色彩物理學 電磁波譜 光 彩虹 可见光 光譜色彩（英语：Spectral color） 發色團 结构色 生物色（英语：Animal coloration） On Vision and Colors（英语：On Vision and Colors） 同色異譜（英语：Metamerism (color)） 光譜波率分佈（英语：Spectral power distribution） 色彩生物學仿生学 生物色（英语：Animal coloration） 生物色素 色素細胞 生物結構色 生物发光 偽裝色 保護色 警戒色 迷彩 色覺 彩色視覺 色盲 色盲檢測 四色視覺 色彩恆常性（英语：Color constancy） 色彩語碼（英语：Color term） 色彩深度 色域 彩色攝影 印刷專色（英语：Spot color） 彩色印刷 网页颜色 色彩映射（英语：Color mapping） 色碼（英语：Color code） 色彩管理 Chrominance（英语：Chrominance） 假色 色鍵 色彩偏差 色彩平衡 偏色（英语：Colour cast） 色温 色差 色彩帶 色調分離 格拉斯曼定律 色彩心理學 色彩象徵主義（英语：Color symbolism） 色彩偏好（英语：Color preferences） 色溫與照度曲線（英语：Kruithof curve） 政治色彩 國家代表色 安全色 恐色症（英语：Chromophobia） 色彩療法（英语：Chromotherapy） 脈輪 視錯覺 色彩原理（英语：Philosophy of color）色彩空間 色彩模型 加色法 減色法 調色 原色 間色 三次色（英语：Tertiary color） 柔和色（英语：Pastel (color)） 色彩梯度 配色 色彩工具（英语：Color tool） 互補色 類似色 無彩色 單色系 多色系（英语：Polychrome） 不可能的顏色 夜間模式 紋章學的顏色 色彩調和原理 色彩通用設計 色彩理論 色度 色立体 色環 色三角（英语：Color triangle） 色彩分析（英语：Color analysis (art)） 色彩現實主義（英语：Color realism (art style)） 色彩語碼（英语：Color term）文化差異 色彩文化史 膚色 中国传统色彩 日本传统色系 色彩民俗地理 語言相對論與顏色命名問題（英语：Linguistic relativity and the color naming debate） 語言中的藍綠之分（英语：Blue–green distinction in language） 染色 色素 染料 色彩尺度 色彩三要素 色相 明度 彩度 色调 色性 二色性（英语：Dichromatism） 灰度图像 國際色彩組織 彩通 国际照明委员会 国际色彩联盟 主要顏色 白色 銀色 灰色 黑色 藏青色 藍色 天藍色 水色 天空藍 蔚藍色 青色 蒼色 藍綠色 祖母綠 綠色 碧綠色 草綠色 橄欖綠 卡其色 黄色 金色 橙色 米色 褐色 朱紅色 红色 緋紅色 酒紅色 栗色 胭脂紅 粉紅色 桃色 玫紅色 洋紅色 薰衣草紫 紫水晶色 紫色 靛色 無色 彩虹色 相關領域 视知觉 图像处理 多原色顯示技術 Quattron 感质 照明 固有色（英语：Local color (visual art)） Category