顏色漸變

指定一系列随位置而变的颜色

顏色漸變(有時也叫顏色帶)是指一定範圍的隨之位置而變的顏色,通常用於填充某一個區域。[1]漸變產生的顏色隨位置連續變化,產生平滑的顏色過渡。

線性或軸向顏色漸變

在網頁設計中,漸變可以依其形狀可以分為線性漸變、徑向漸變和錐形漸變,每個漸變由多個色標組成,各個色標都有各自的顏色(含不透明度)和位置。漸變在色標之間進行平滑顏色過渡,因此還需要指定顏色的插值方式。

定義

在數學中,漸變可以以函數的形式表示[2],其中r是實數,c中色彩空間 中的一個點。

 

其中:

  • 色彩空間C
  • 採樣點的遞增序列 
  • 顏色空間內的一系列值  
  • 映射 
  • 中間值的插值規則 

其中:

  • r是實數 
  •  是實數集
  • c是色彩空間C中的顏色點

類型

漸變可以按照不同的分類標準進行分類。例如,根據維度來劃分,漸變可以是一維、二維或者三維的。而根據形狀劃分,漸變可以是線性漸變、徑向漸變和錐形漸變,甚至是其他一系列形狀的漸變。此外,不同的漸變還可以有不同的顏色深度和顏色插值模式。

依形狀劃分

線性漸變

 
線性漸變,白色線段連接到兩個點

線性漸變(英語:linear gradient),有時也稱為軸向漸變(英語:axial color gradient),是指沿著一個直線進行過渡的漸變。在數字圖像系統中,顏色通常都是以RGB色彩空間進行插值的。CSS和SVG都支持線性漸變[3][4]

徑向漸變

 
徑向漸變

徑向漸變(英語:radial gradient)是指依照圓形由中心到邊緣進行過渡的漸變,其顏色根據距離中心的位置進行線性插值。CSS和SVG都支持徑向漸變。在CSS和SVG中,徑向漸變可以是圓形,也可以是橢圓[5][6]

錐形漸變

 
錐形漸變

錐形漸變(英語:conic gradientconical gradient),是指顏色圍繞一個中心點進行旋轉的漸變。錐形漸變的例子包括餅圖和色輪[7]

其他形狀

矢量圖形中,可以使用多邊形的漸變,例如在Adobe Illustrator中支持多邊形網格(英語:polygon mesh)。

色彩空間

色彩空間的效果

漸變的外觀不僅取決於顏色本身,還會受到顏色空間的計算方式的影響,這一問題主要影響以下兩個方面:

  • 對色彩空間的伽瑪校正。當γ值約為2時,很容易看到啟用了gamma的顏色空間會把顏色混合得深一些,這是由於兩個數的平方和不會超過其和的平方。這一效果在混合互補色時尤為明顯,例如紅色和綠色,其顏色的中間值會是更深的顏色,而不是預期的黃色[8][9]
  • 處理其他的感知屬性。在信息的可視化中,讓漸變能夠平衡地過渡亮度和飽和度是不現實的,這是因為人類感知會強調其品質,導致一些偏差和誤解[10]

長期以來,線性的混合方式是遊戲引擎的標準[11]。而在網頁中,混合方式往往會在顏色漸變和圖像縮放中忽略[12]。這種混合與在感知均勻的顏色空間中進行的混合仍然有細微差別[13]

例子

HSV彩虹

參考文獻

  1. ^ Eisenberg, J. David. SVG Essentials. O'Reilly Media. 2002: 107. ISBN 0-596-00223-8 (英語). 
  2. ^ 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). 
  3. ^ Linear Gradients頁面存檔備份,存於網際網路檔案館) in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012
  4. ^ Linear Gradients頁面存檔備份,存於網際網路檔案館) in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011
  5. ^ Radial Gradients頁面存檔備份,存於網際網路檔案館) in "CSS Image Values and Replaced Content Module Level 3", W3C Candidate Recommendation, April 2012
  6. ^ Radial Gradients頁面存檔備份,存於網際網路檔案館) in "SVG 1.1 (Second Edition)", W3C Recommendation, August 2011
  7. ^ mozilla docs: CSS conic-gradient. [2023-09-14]. (原始內容存檔於2020-11-01). 
  8. ^ Minute Physics. Computer Color is Broken. YouTube. March 20, 2015. (原始內容存檔於2021-12-21). 
  9. ^ Novak, John. What every coder should know about gamma. September 21, 2016 [2023-09-14]. (原始內容存檔於2023-09-22). 
  10. ^ 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]. 
  11. ^ Chapter 24. The Importance of Being Linear [第24章:線性的重要性]. NVIDIA Developer. [2023-09-14]. (原始內容存檔於2023-10-17) (英語). 
  12. ^ Web color is still broken. [2023-09-14]. (原始內容存檔於2023-10-17). 
  13. ^ How software gets color wrong [軟體如何弄錯顏色]. bottosson.github.io. [2023-09-14]. (原始內容存檔於2023-04-20) (英語). 

參見