顏色漸變

顏色漸變（有時也叫顏色帶）是指一定範圍的隨之位置而變的顏色，通常用於填充某一個區域。^[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