计算机中的颜色XIV——快速变换颜色的V分量

基本知识回顾：

计算机中的颜色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得到的按钮，看看吧，效果还不错

Be Excellent To Each Other »