线性或轴向颜色渐变
颜色渐变(有时也叫颜色带)是指一定范围的随之位置而变的颜色,通常用于填充某一个区域。[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