计算机中的颜色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 »

时间: 2024-11-09 00:52:21

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

计算机中的颜色VIII——快速计算颜色的偏转

在"计算机中的颜色VII--快速计算纯色的偏转"中介绍了纯色的偏转. 本文对上文的公式进行扩展,扩展到任意的颜色. 颜色(R,G,B)偏转ω后,如何计算偏转颜色(R',G',B') 具体的推导过程不详述了,和前文类似.下面介绍计算过程: 令MAX为R.G.B三个分量的最大值,MIN为R.G.B三个分量的最小值 若MAX=MIN,则颜色为灰度色,无论怎么偏转,还是原来的颜色. R'=R:G'=G:B'=B 若MAX≠MIN,令ρ=MAX-MIN 当G<B时,ω=-ω ω'=ω/60

计算机中的颜色XI——从色相值到纯色的快速计算(新的公式)

先将前面写的关于颜色的十篇文章列表贴于下方 计算机中的颜色I--颜色概述 计算机中的颜色II--VB2005中的Color结构 计算机中的颜色III--HSV表示方法 计算机中的颜色IV--纯色.色相色 计算机中的颜色V--快速计算颜色的色相值 计算机中的颜色VI--从色相值到纯色的快速计算 计算机中的颜色VII--快速计算纯色的偏转 计算机中的颜色VIII--快速计算颜色的偏转 计算机中的颜色IX--总述:RGB和HSV快速转换 计算机中的颜色X--两颜色的偏转值   先回顾"计算机中的颜色V

计算机中的颜色XIII——颜色转换的快速计算公式

本文的公式的基础都是在前文的基础上的.详情请参看前文: 计算机中的颜色I--颜色概述 计算机中的颜色II--VB2005中的Color结构 计算机中的颜色III--HSV表示方法 计算机中的颜色IV--纯色.色相色 计算机中的颜色V--快速计算颜色的色相值 计算机中的颜色VI--从色相值到纯色的快速计算 计算机中的颜色VII--快速计算纯色的偏转 计算机中的颜色VIII--快速计算颜色的偏转 计算机中的颜色IX--总述:RGB和HSV快速转换 计算机中的颜色X--两颜色的偏转值 计算机中的颜色X

计算机中的颜色IX——总述:RGB和HSV快速转换

写了一段有关颜色的文章,回顾过去几篇文章,做一个阶段性总结.利用前几篇文章的心得,推导出快速转换RGB模式与HSV模式的公式. RGB模式:用R.G.B三个颜色的分量来表示颜色,分量的取值范围为[0,255],整数型 HSV模式:用H.S.V三个分量来表示颜色. 分量H:表示颜色的色相,取值[0,360),整数型 分量S:表示颜色的纯度,取值[0,1),浮点数型 分量V:表示颜色的亮度,取值[0,1),浮点数型 以上内容,详细请参看"计算机中的颜色III--HSV表示方法" 1.RGB

计算机中的颜色VI——从色相值到纯色的快速计算

在上一文中,介绍了"如何快速计算颜色的色相值",本文介绍从色相值到纯色的计算过程.之前已经介绍,色相值和纯色有着一一对应的关系.先看看传统的计算方法:        从图中计算的过程来看,还是比较繁琐的,再看看之前的纯色色相分布图.         从图中找到规律,在图中的右半部阴影部分,各个分量的变化如下所示: 0-60:R:255->255:G:0->255:B:0->0: 60-120:R:255->0:G:255->255:B:0->0: 1

计算机中的颜色VII——快速计算纯色的偏转

在颜色的实际使用中,通过更改颜色的色相值改变图片的颜色是常用的方法. 通过更改纯色的色相值称为纯色的偏转,例如:纯色(255,0,0)顺时针偏转60就得到纯色(255,255,0),逆时针偏转60得到纯色(255,0,255). 那么纯色(255,44,0)顺时针偏转127得到什么颜色呢?下面的文章就是讲述计算方法. 在"计算机中的颜色V--快速计算颜色的色相值"中,纯色的色相值H的计算公式为: 当G≥B时,H=(255-R+G+B)/255×60 公示1 当G<B时,H=360

计算机中的颜色XII——快速计算纯色的色相值(新的公式)

在"计算机中的颜色XI--从色相值到纯色的快速计算(新的公式)"中提到了色相值到纯色的快速计算. 反过来如何快速的计算纯色的色相值?在"计算机中的颜色V--快速计算颜色的色相值"中曾经提到过计算公式 任意一个纯色的色相值可以用下面公式表示 当G≥B时,H=(255-R+G+B)/255×60 当G<B时,H=360-(255-R+G+B)/255×60 经过一番推导之后,将上面两个公式合并成一个计算公式. H=180+(510-G-B+R)×Sign(B-G-

计算机中的颜色X——两颜色的偏转值

颜色C1到颜色C2的偏转值定义为,颜色C1沿顺时针方向偏转到颜色C2时所转过的角度. 偏转值和两颜色C1与C2的夹角类似,但不完全一样.两颜色的夹角表示为两颜色的色相值的夹角,取值范围为[0,180],C1和C2的夹角与 C2和C1的夹角是一样的.偏转值特制C1沿顺时针所偏转的角度,故取值范围为[0,360).C1到C2的偏转值和C2到C1的偏转值是不一样的,他们的和为360. H1为C1和红色的夹角,H2为C2和红色的夹角.(相关的计算参看"计算机中的颜色V--快速计算颜色的色相值"

android开发-安卓中使textview隔一段时间变换颜色

问题描述 安卓中使textview隔一段时间变换颜色 tx1.setBackground(getResources().getDrawable(R.drawable.style3));try { Thread.sleep(1000); } catch (InterruptedException e) { e.printStackTrace(); } tx1.setBackground(getResources().getDrawable(R.drawable.style));为什么这样写不会变化