基本知识回顾:
计算机中的颜色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 »