基本知識回顧：
計算機中的顏色Color，用RGB模式儲存（用R、G、B三個分量表示顏色，每個分量的範圍是0—255）。
而計算機中的顏色除了用RGB模式表示以外，常見的還有HSV模式（或者是HSB、HSL模式）
RGB模式：
用R、G、B三個分量表示顏色
R分量：紅色（Red）分量，整數型，範圍是[0，255]
G分量：綠色（Green）分量，整數型，範圍是[0，255]
B分量：藍色（Blue）分量，整數型，範圍是[0，255]
HSV模式：
用H、S、V三個分量表示顏色
H分量：色相（Hue）分量，整數型，範圍是[0，360)
S分量：飽和（Saturation）分量，浮點數型，範圍是[0，1]
V分量：亮度（lightness Value）分量，浮點數型，範圍是[0，1]
在現在很多的前端UI框架中，都利用了HSV模式。因為HSV模式可以很方便的得出相近的顏色（色相相同、飽和和亮度不同的顏色）
而這兩個模式的快速轉換公式如下：
RGB模式到HSV模式的轉換
令MAX為R、G、B三個分量的最大值；MIN為三個分量的最小值
若MAX=MIN，則
H = 0
S = 0
V = MAX / 255
若MAX≠MIN
當G≥B時
H = （Max – R + G – Min + B – Min） / （Max – Min） × 60
S = 1 – MIN / MAX
V = MAX / 255
當G＜B時
H = 360 – （Max – R + G – Min + B – Min） / （Max – Min） × 60
S = 1 – MIN / MAX
V = MAX / 255
HSV模式到RGB模式的轉換
先定義一種運算： ｛ V1 ， V2｝
若V1 < 0，則｛ V1 ， V2｝ = 0；若V1 > V2，則｛ V1 ， V2｝ = V2；否則，｛ V1 ， V2｝ = V1。
例如：｛ -1 ， 2｝ = 0；｛ 1 ， 2｝ = 1；｛ 3 ， 2｝ = 2
則轉換公式如下：
R = （ ｛ | H / 60 – 3 | – 1 ， 1 ｝ × S + 1 – S） × 255 × V
G = （ ｛ 2 – | H / 60 – 2 | ， 1 ｝ × S + 1 – S） × 255 × V
B = （ ｛ 2 – | H / 60 – 4 | ， 1 ｝ × S + 1 – S） × 255 × V
快速變換顏色的V分量
有時在實際運用的時候，我們需要快速調整顏色的V分量，比如調整顏色的V分量增大20%（或者減少20%）
顏色Color的三個分量R、G、B，現在要調整V的分量為原來的80%。如何快速的計算？
假定顏色Color的三個分量H、S、V，則R、G、B和H、S、V的三個分量的關係為
R = （ ｛ | H / 60 – 3 | – 1 ， 1 ｝ × S + 1 – S） × 255 × V
G = （ ｛ 2 – | H / 60 – 2 | ， 1 ｝ × S + 1 – S） × 255 × V
B = （ ｛ 2 – | H / 60 – 4 | ， 1 ｝ × S + 1 – S） × 255 × V
新的顏色Color2的三個分量為H、S、V × 80%（新顏色的V分量是原顏色的80%），則新的顏色的R、G、B分量（用R2、G2、B2表示）
R2 = （ ｛ | H / 60 – 3 | – 1 ， 1 ｝ × S + 1 – S） × 255 × V × 80% = R × 80%
G2 = （ ｛ 2 – | H / 60 – 2 | ， 1 ｝ × S + 1 – S） × 255 × V × 80% = G × 80%
B2 = （ ｛ 2 – | H / 60 – 4 | ， 1 ｝ × S + 1 – S） × 255 × V × 80% = B × 80%
由此可知，快速的調整V分量的比例，只要把顏色的R、G、B的分量乘上相應的比例
那如何調整顏色的V分量到指定的值（比方說調整到V2）呢？
先求出顏色的V分量（V = MAX / 255），再計算出V2和V的比值，按照上面的公式計算即可
R2 = （ ｛ | H / 60 – 3 | – 1 ， 1 ｝ × S + 1 – S） × 255 × V2 = R × V2 / V
G2 = （ ｛ 2 – | H / 60 – 2 | ， 1 ｝ × S + 1 – S） × 255 × V2 = G × V2 / V
B2 = （ ｛ 2 – | H / 60 – 4 | ， 1 ｝ × S + 1 – S） × 255 × V2 = B × V2 / V
實際的運用
筆者在網上找尋Bootstrap的相關資料的時候，發現一個很有意思的網站
Beautiful Buttons for Twitter Bootstrappers
在這個網站裡，你可以自己設定一個顏色，它給你生成由你設定顏色的按鈕的CSS
在檢視生成CSS的 JS程式碼 後，發現生成程式碼如下
function refreshSwatch() { var hue = $("#hue").slider("value"), saturation = $("#saturation").slider("value"), lightness = $("#lightness").slider("value"), delta = $("#delta").slider("value"), highlight = lightness + delta, lowlight = lightness - delta, superLowlight = lightness - delta * 1.5, gradientTop = "hsl("+hue+", "+saturation+"%, "+highlight+"%)", gradientBottom = "hsl("+hue+", "+saturation+"%, "+lowlight+"%)", borderBottom = "hsl("+hue+", "+saturation+"%, "+superLowlight+"%)", hsl = "hsl("+hue+", "+saturation+"%, "+lightness+"%)", highhex = hsl2Hex(hue, saturation, highlight), lowhex = hsl2Hex(hue, saturation, lowlight), text = getTextColor(lightness, delta), css = generateHSLGradient(hsl, gradientTop, gradientBottom, borderBottom, text, highhex, lowhex), embeddedCss = ".btn-custom {\n"+css+"}"; $("button.custom").not('.sample').attr('style', css); $(".ui-slider-range").css("background", hsl); $('#embedded_css').html(embeddedCss); $('.ui-slider-handle').each(function(){ var v = $(this).parents('div').slider("value"); var i = $(this).parents('div').attr('id'); $("#"+i+"_value").text(v); }); }
可以看到，在給定一個顏色後，自動生成相關的顏色（gradientTop、gradientBottom、borderBottom），這些顏色也僅僅是V分量的不同
我們完全可以利用上面的公式，對這些計算進行簡化
基本色Color的三個分量H、S、V，得到R、G、B三個分量
那麼
gradientTop顏色（V2 = V + delta）為
R2 = R × V2 / V = R × （ V + delta ） / V
G2 = G × V2 / V = G × （ V + delta ） / V
B2 = B × V2 / V = B × （ V + delta ） / V
gradientBottom顏色（V3 = V - delta）為
R3 = R × V2 / V = R × （ V - delta ） / V
G3 = G × V2 / V = G × （ V - delta ） / V
B3 = B × V2 / V = B × （ V - delta ） / V
superLowLight顏色（V4 = V - 1.5 × delta）為
R4 = R × V2 / V = R × （ V - 1.5 × delta ） / V
G4 = G × V2 / V = G × （ V - 1.5 × delta ） / V
B4 = B × V2 / V = B × （ V - 1.5 × delta ） / V
甚至，在預先計算出基本量後，可以快速計算各個分量
基本量
R0 = （ ｛ | H / 60 – 3 | – 1 ， 1 ｝ × S + 1 – S） × 255
G0 = （ ｛ 2 – | H / 60 – 2 | ， 1 ｝ × S + 1 – S） × 255
B0 = （ ｛ 2 – | H / 60 – 4 | ， 1 ｝ × S + 1 – S） × 255
則基本色為
R = R0 × V
G = G0 × V
B = B0 × V
gradientTop顏色（V2 = V + delta）為
R2 = R0 × （ V + delta ）
G2 = G0 × （ V + delta ）
B2 = B0 × （ V + delta ）
gradientBottom顏色（V3 = V - delta）為
R3 = R0 × （ V - delta ）
G3 = G0 × （ V - delta ）
B3 = B0 × （ V - delta ）
superLowLight顏色（V4 = V - 1.5 × delta）為
R4 = R0 × （ V - 1.5 × delta ）
G4 = G0 × （ V - 1.5 × delta ）
B4 = B0 × （ V - 1.5 × delta ）
下面是利用該網頁生成的CSS得到的按鈕，看看吧，效果還不錯