漸變(Gradient)是美學中一條重要的形式美法則，與其相對應的是突變。形狀、大小、位置、方向、色彩等視覺因素都可以進行漸層。在色彩中，色相、明度、純度也都可以產生漸變效果，並會展現出具有豐富層次的美感。本文主要講述兩種顏色RGB數值的漸變演算法。
已知：A=50，B=200，A、B之間平均分成3份（Step=3），求每份的數值（StepN）分別是多少。
公式：Gradient = A (B-A) / Step * N
註]程式設計時為了提高效率避免浮點運算，往往把除法放在最後面，這樣公式就成了：Gradient = A (B-A) * N / Step
Step=3時，依公式可求Step1=A (A-B)/3*1=50 (200-50)/3=100，Step2=A (A-B)/3*2=50 (200- 50)/3*2=150。這就是均勻漸層的演算法原理了，很簡單，小學知識。
兩種顏色的漸變就是對兩種顏色的RGB通道分別進行這樣的計算，例如兩種顏色分別是RGB(200,50,0)和RGB(50,200,0)，用上述公式進行計算就是：
RStep1=RA=RA (BA-RA)/Step*N=200 (50-200)/3*1=200-50=150
GStep1=GA=GA (GA-GA)/Step*N=50 (200-50)/3*1=50 50=100
BStep1=BA=BA (BA-BA)/Step*N=0
因此RGBStep1=(150,100,0)，同樣的方法可以求出RGBStep2=(100,150,0)。
網頁中的漸層文字特效就是這麼做的。例如你的網頁HTML中有這麼一句程式碼：你就是我天空裡最美麗的彩虹，在後面加入如下的程式碼就可以實現漸層文字。 （產生漸層的兩種顏色：#c597ff和#73e7a9）
function color2rgb(color)
{
var r = parseInt(color.substr(1, 2), 16);
var g = parseInt(color.substr(3, 2), 16);
var b = parseInt(color.substr(5, 2), 16);
return new Array(r, g, b);
}
function rgb2color(rgb)
{
var s = "#";
for ({
var s = "#";
for (var i = 0; {
var c = Math.round(rgb[i]).toString(16);
if (c.length == 1)
c = '0' c;
s = c;
}
return s.toUpperCase();
// 產生漸變
function gradient()
{
var str = myText.innerText;
var result = "";
var Gradient = new Array(3);
var A = color2rgb(ColorA);
for (var N = 0; N {
for (var c = 0; c {
Gradient[c] = A[c] (B[c]-A[c]) / Step * N;
}
result = " " str.charAt(N) "";
}
myText.innerHTML = result;
gradient(); // 執行程式
A、B、C三種顏色或多種顏色的漸變，理論上講只要先把A、B進行漸變，再把B、C進行漸變，依此類推就行了。實踐過程中，為了讓漸層的每個像素顏色分佈均勻，產生了多種插值演算法，具體演算法以後再討論。
