关于javascript：以编程方式使六角颜色变亮或变暗(或rgb，并混合颜色)


Programmatically Lighten or Darken a hex color (or rgb, and blend colors)

这是我正在努力以编程方式使特定量的十六进制颜色变亮或变暗的功能。只需传入一个字符串，如"3F6D2A"，颜色(col)和一个base10整数(amt)，颜色要变亮或变暗。为了变暗，传入负数(即-20)。

我这样做的原因是因为我找到的所有解决方案，到目前为止，它们似乎使问题过于复杂。而且我觉得只需几行代码即可完成。如果您发现任何问题，请告诉我，或者进行任何调整以使其加速。

1
2
3
4
function LightenDarkenColor(col,amt) {
    col = parseInt(col,16);
    return (((col & 0x0000FF) + amt) | ((((col>> 8) & 0x00FF) + amt) << 8) | (((col >> 16) + amt) << 16)).toString(16);
}

对于开发使用，这里是一个更容易阅读的版本：

1
2
3
4
5
6
7
8
function LightenDarkenColor(col,amt) {
    var num = parseInt(col,16);
    var r = (num >> 16) + amt;
    var b = ((num >> 8) & 0x00FF) + amt;
    var g = (num & 0x0000FF) + amt;
    var newColor = g | (b << 8) | (r << 16);
    return newColor.toString(16);
}

最后一个版本处理可能(或可能不)在开头有"＃"的颜色。另外调整不正确的颜色值：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
function LightenDarkenColor(col,amt) {
    var usePound = false;
    if ( col[0] =="#" ) {
        col = col.slice(1);
        usePound = true;
    }

    var num = parseInt(col,16);

    var r = (num >> 16) + amt;

    if ( r > 255 ) r = 255;
    else if  (r < 0) r = 0;

    var b = ((num >> 8) & 0x00FF) + amt;

    if ( b > 255 ) b = 255;
    else if  (b < 0) b = 0;

    var g = (num & 0x0000FF) + amt;

    if ( g > 255 ) g = 255;
    else if  ( g < 0 ) g = 0;

    return (usePound?"#":"") + (g | (b << 8) | (r << 16)).toString(16);
}

好吧，所以现在它不只是几行，但它似乎更简单，如果你没有使用"＃"并且不需要检查超出范围的颜色，它只是几行。

如果不使用"＃"，您只需将其添加到以下代码中：

1
2
3
var myColor ="3F6D2A";
myColor = LightenDarkenColor(myColor,10);
thePlaceTheColorIsUsed = ("#" + myColor);

我想我的主要问题是，我在这里是否正确？这不包括某些(正常)情况吗？

相关讨论

好吧，这个答案已成为它自己的野兽。许多新版本，它变得越来越愚蠢。非常感谢这个答案的所有贡献者。但是，为了让群众保持简单。我将这个答案的演变的所有版本/历史存档到我的github。并在StackOverflow上使用最新版本开始清理它。特别感谢Mike'Pomax'Kamermans这个版本。他给了我新的数学。

此功能(pSBC)将采用HEX或RGB网页颜色。 pSBC可以将其更暗或更浅，或者将其与第二种颜色混合，也可以直接传递，但是从Hex转换为RGB(Hex2RGB)或RGB转换为Hex(RGB2Hex)。所有这一切都没有你甚至不知道你正在使用什么颜色

这种运行速度非常快，可能是最快的，特别是考虑到它的许多功能。这是一段很长的时间。在我的github上查看整个故事。如果您想要绝对最小和最快的遮挡或混合方式，请参阅下面的微功能并使用其中一个双线速度恶魔。它们非常适合激烈的动画，但这个版本对于大多数动画都足够快。

此功能使用日志混合或线性混合。但是，它不会转换为HSL以使颜色正确变亮或变暗。因此，此函数的结果将不同于使用HSL的更大且更慢的函数。

jsFiddle with pSBC

Ok.

github > pSBC Wiki

Ok.

特征：

  • 自动检测并接受字符串形式的标准Hex颜色。例如："#AA6622"或"#bb551144"。
  • 自动检测并接受字符串形式的标准RGB颜色。例如："rgb(123,45,76)"或"rgba(45,15,74,0.45)"。
  • 根据百分比将颜色变为白色或黑色。
  • 按百分比将颜色混合在一起。
  • Hex2RGB和RGB2Hex同时进行转换，还是单独转换。
  • 接受3位(或4位数w / alpha)HEX颜色代码，格式为#RGB(或#RGBA)。它会扩展它们。例如："#C41"变为"#CC4411"。
  • 接受和(线性)混合alpha通道。如果c0(从)颜色或c1(到)颜色具有Alpha通道，则返回的颜色将具有Alpha通道。如果两种颜色都具有Alpha通道，则返回的颜色将是使用给定百分比的两个Alpha通道的线性混合(就像它是正常颜色通道一样)。如果两种颜色中只有一种具有alpha通道，则此alpha将直接传递给返回的颜色。这允许人们在保持透明度水平的同时混合/遮蔽透明色。或者，如果透明度级别也应该混合，请确保两种颜色都有alpha。在着色时，它将直接通过alpha通道。如果您希望基本着色也遮蔽Alpha通道，则使用rgb(0,0,0,1)或rgb(255,255,255,1)作为c1(to)颜色(或其十六进制等值)。对于RGB颜色，返回颜色的Alpha通道将四舍五入到小数点后3位。
  • 使用混合时，RGB2Hex和Hex2RGB转换是隐含的。无论c0(来自)颜色;返回的颜色将始终采用c1(to)颜色的颜色格式(如果存在)。如果没有c1(到)颜色，则将'c'作为c1颜色传递，它将着色并转换c0颜色。如果仅需要转换，则也将0作为百分比(p)传递。如果省略c1颜色或传入falsy，则不会转换。
  • 辅助功能也被添加到全局。 pSBCr可以传递十六进制或RGB颜色，并返回包含此颜色信息的对象。它的形式为：{r：XXX，g：XXX，b：XXX，a：X.XXX}。其中.r，.g和.b的范围为0到255.当没有alpha时：.a为-1。否则：.a的范围为0.000到1.000。
  • 对于RGB输出，当带有alpha通道的颜色传递到c0(从)和/或c1(到)时，它会在rgb()上输出rgba()。
  • 已添加次要错误检查。这不完美。它仍然可能崩溃或造成乱码。但它会抓住一些东西。基本上，如果结构在某些方面是错误的，或者如果百分比不是数字或超出范围，它将返回null。例如：pSBC(0.5,"salt") == null，因为它认为#salt是有效颜色。删除以return null;结尾的四行以删除此功能并使其更快更小。
  • 使用日志混合。将true传递给l(第4个参数)以使用线性混合。

    • 码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    // Version 4.0
    const pSBC=(p,c0,c1,l)=>{
        let r,g,b,P,f,t,h,i=parseInt,m=Math.round,a=typeof(c1)=="string";
        if(typeof(p)!="number"||p<-1||p>1||typeof(c0)!="string"||(c0[0]!='r'&&c0[0]!='#')||(c1&&!a))return null;
        if(!this.pSBCr)this.pSBCr=(d)=>{
            let n=d.length,x={};
            if(n>9){
                [r,g,b,a]=d=d.split(","),n=d.length;
                if(n<3||n>4)return null;
                x.r=i(r[3]=="a"?r.slice(5):r.slice(4)),x.g=i(g),x.b=i(b),x.a=a?parseFloat(a):-1
            }else{
                if(n==8||n==6||n<4)return null;
                if(n<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(n>4?d[4]+d[4]:"");
                d=i(d.slice(1),16);
                if(n==9||n==5)x.r=d>>24&255,x.g=d>>16&255,x.b=d>>8&255,x.a=m((d&255)/0.255)/1000;
                else x.r=d>>16,x.g=d>>8&255,x.b=d&255,x.a=-1
            }return x};
        h=c0.length>9,h=a?c1.length>9?true:c1=="c"?!h:false:h,f=pSBCr(c0),P=p<0,t=c1&&c1!="c"?pSBCr(c1):P?{r:0,g:0,b:0,a:-1}:{r:255,g:255,b:255,a:-1},p=P?p*-1:p,P=1-p;
        if(!f||!t)return null;
        if(l)r=m(P*f.r+p*t.r),g=m(P*f.g+p*t.g),b=m(P*f.b+p*t.b);
        else r=m((P*f.r**2+p*t.r**2)**0.5),g=m((P*f.g**2+p*t.g**2)**0.5),b=m((P*f.b**2+p*t.b**2)**0.5);
        a=f.a,t=t.a,f=a>=0||t>=0,a=f?a<0?t:t<0?a:a*P+t*p:0;
        if(h)return"rgb"+(f?"a(":"(")+r+","+g+","+b+(f?","+m(a*1000)/1000:"")+")";
        else return"#"+(4294967296+r*16777216+g*65536+b*256+(f?m(a*255):0)).toString(16).slice(1,f?undefined:-2)
    }

    用法：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    // Setup:

    let color1 ="rgb(20,60,200)";
    let color2 ="rgba(20,60,200,0.67423)";
    let color3 ="#67DAF0";
    let color4 ="#5567DAF0";
    let color5 ="#F3A";
    let color6 ="#F3A9";
    let color7 ="rgb(200,60,20)";
    let color8 ="rgba(200,60,20,0.98631)";

    // Tests:

    /*** Log Blending ***/
    // Shade (Lighten or Darken)
    pSBC ( 0.42, color1 ); // rgb(20,60,200) + [42% Lighter] => rgb(166,171,225)
    pSBC ( -0.4, color5 ); // #F3A + [40% Darker] => #c62884
    pSBC ( 0.42, color8 ); // rgba(200,60,20,0.98631) + [42% Lighter] => rgba(225,171,166,0.98631)

    // Shade with Conversion (use"c" as your"to" color)
    pSBC ( 0.42, color2,"c" ); // rgba(20,60,200,0.67423) + [42% Lighter] + [Convert] => #a6abe1ac

    // RGB2Hex & Hex2RGB Conversion Only (set percentage to zero)
    pSBC ( 0, color6,"c" ); // #F3A9 + [Convert] => rgba(255,51,170,0.6)

    // Blending
    pSBC ( -0.5, color2, color8 ); // rgba(20,60,200,0.67423) + rgba(200,60,20,0.98631) + [50% Blend] => rgba(142,60,142,0.83)
    pSBC ( 0.7, color2, color7 ); // rgba(20,60,200,0.67423) + rgb(200,60,20) + [70% Blend] => rgba(168,60,111,0.67423)
    pSBC ( 0.25, color3, color7 ); // #67DAF0 + rgb(200,60,20) + [25% Blend] => rgb(134,191,208)
    pSBC ( 0.75, color7, color3 ); // rgb(200,60,20) + #67DAF0 + [75% Blend] => #86bfd0

    /*** Linear Blending ***/
    // Shade (Lighten or Darken)
    pSBC ( 0.42, color1, false, true ); // rgb(20,60,200) + [42% Lighter] => rgb(119,142,223)
    pSBC ( -0.4, color5, false, true ); // #F3A + [40% Darker] => #991f66
    pSBC ( 0.42, color8, false, true ); // rgba(200,60,20,0.98631) + [42% Lighter] => rgba(223,142,119,0.98631)

    // Shade with Conversion (use"c" as your"to" color)
    pSBC ( 0.42, color2,"c", true ); // rgba(20,60,200,0.67423) + [42% Lighter] + [Convert] => #778edfac

    // RGB2Hex & Hex2RGB Conversion Only (set percentage to zero)
    pSBC ( 0, color6,"c", true ); // #F3A9 + [Convert] => rgba(255,51,170,0.6)

    // Blending
    pSBC ( -0.5, color2, color8, true ); // rgba(20,60,200,0.67423) + rgba(200,60,20,0.98631) + [50% Blend] => rgba(110,60,110,0.83)
    pSBC ( 0.7, color2, color7, true ); // rgba(20,60,200,0.67423) + rgb(200,60,20) + [70% Blend] => rgba(146,60,74,0.67423)
    pSBC ( 0.25, color3, color7, true ); // #67DAF0 + rgb(200,60,20) + [25% Blend] => rgb(127,179,185)
    pSBC ( 0.75, color7, color3, true ); // rgb(200,60,20) + #67DAF0 + [75% Blend] => #7fb3b9

    /*** Other Stuff ***/
    // Error Checking
    pSBC ( 0.42,"#FFBAA" ); // #FFBAA + [42% Lighter] => null??(Invalid Input Color)
    pSBC ( 42, color1, color5 ); // rgb(20,60,200) + #F3A + [4200% Blend] => null??(Invalid Percentage Range)
    pSBC ( 0.42, {} ); // [object Object] + [42% Lighter] => null??(Strings Only for Color)
    pSBC ("42", color1 ); // rgb(20,60,200) + ["42"] => null??(Numbers Only for Percentage)
    pSBC ( 0.42,"salt" ); // salt + [42% Lighter] => null??(A Little Salt is No Good...)

    // Error Check Fails?(Some Errors are not Caught)
    pSBC ( 0.42,"#salt" ); // #salt + [42% Lighter] => #a5a5a500??(...and a Pound of Salt is Jibberish)

    // Ripping
    pSBCr ( color4 ); // #5567DAF0 + [Rip] => [object Object] => {'r':85,'g':103,'b':218,'a':0.941}

    下图将有助于显示两种混合方法的不同之处：

    > </p> <p>微功能</p> <p> 如果你真的想要速度和尺寸，你将不得不使用RGB而不是HEX。 RGB更简单，更简单，HEX写得太慢，并且对于简单的双线程(IE，它可能是3,4,6或8位HEX代码)来说有太多的风格。你还需要牺牲一些功能，没有错误检查，没有HEX2RGB和RGB2HEX。同样，您需要为颜色混合数学选择一个特定的函数(基于下面的函数名称)，如果您想要着色或混合。这些函数支持alpha通道。当两种输入颜色都有alpha时，它会将它们线性混合。如果两种颜色中只有一种具有α，则它将直接传递给所得到的颜色。下面是两个非常快速和小巧的衬里功能： </p> <div class=

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    const RGB_Linear_Blend=(p,c0,c1)=>{
        var i=parseInt,r=Math.round,P=1-p,[a,b,c,d]=c0.split(","),[e,f,g,h]=c1.split(","),x=d||h,d=x?","+(!d?h:!h?d:r((parseFloat(d)*P+parseFloat(h)*p)*1000)/1000+")"):")";
        return"rgb"+(x?"a(":"(")+r(i(a[3]=="a"?a.slice(5):a.slice(4))*P+i(e[3]=="a"?e.slice(5):e.slice(4))*p)+","+r(i(b)*P+i(f)*p)+","+r(i(c)*P+i(g)*p)+d;
    }

    const RGB_Linear_Shade=(p,c)=>{
        var i=parseInt,r=Math.round,[a,b,c,d]=c.split(","),P=p<0,t=P?0:255*p,P=P?1+p:1-p;
        return"rgb"+(d?"a(":"(")+r(i(a[3]=="a"?a.slice(5):a.slice(4))*P+t)+","+r(i(b)*P+t)+","+r(i(c)*P+t)+(d?","+d:")");
    }

    const RGB_Log_Blend=(p,c0,c1)=>{
        var i=parseInt,r=Math.round,P=1-p,[a,b,c,d]=c0.split(","),[e,f,g,h]=c1.split(","),x=d||h,d=x?","+(!d?h:!h?d:r((parseFloat(d)*P+parseFloat(h)*p)*1000)/1000+")"):")";
        return"rgb"+(x?"a(":"(")+r((P*i(a[3]=="a"?a.slice(5):a.slice(4))**2+p*i(e[3]=="a"?e.slice(5):e.slice(4))**2)**0.5)+","+r((P*i(b)**2+p*i(f)**2)**0.5)+","+r((P*i(c)**2+p*i(g)**2)**0.5)+d;
    }

    const RGB_Log_Shade=(p,c)=>{
        var i=parseInt,r=Math.round,[a,b,c,d]=c.split(","),P=p<0,t=P?0:p*255**2,P=P?1+p:1-p;
        return"rgb"+(d?"a(":"(")+r((P*i(a[3]=="a"?a.slice(5):a.slice(4))**2+t)**0.5)+","+r((P*i(b)**2+t)**0.5)+","+r((P*i(c)**2+t)**0.5)+(d?","+d:")");
    }

    想了解更多信息？阅读github上的完整文章。

    PT

    (P.。如果有人有另一种混合方法的数学，请分享。)

    好。

    相关讨论

    我提出了一个对我来说非常好的解决方案：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    function shadeColor(color, percent) {

        var R = parseInt(color.substring(1,3),16);
        var G = parseInt(color.substring(3,5),16);
        var B = parseInt(color.substring(5,7),16);

        R = parseInt(R * (100 + percent) / 100);
        G = parseInt(G * (100 + percent) / 100);
        B = parseInt(B * (100 + percent) / 100);

        R = (R<255)?R:255;  
        G = (G<255)?G:255;  
        B = (B<255)?B:255;  

        var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
        var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
        var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

        return"#"+RR+GG+BB;
    }

    示例减轻：

    1
    shadeColor("#63C6FF",40);

    示例变暗：

    1
    shadeColor("#63C6FF",-40);
    相关讨论

    这是我根据你的功能使用的。我更喜欢使用超过百分比的步骤，因为它对我来说更直观。

    例如，200蓝色值的20％与40蓝色值的20％大不相同。

    无论如何，这是我的修改，感谢您的原始功能。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    function adjustBrightness(col, amt) {

        var usePound = false;

        if (col[0] =="#") {
            col = col.slice(1);
            usePound = true;
        }

        var R = parseInt(col.substring(0,2),16);
        var G = parseInt(col.substring(2,4),16);
        var B = parseInt(col.substring(4,6),16);

        // to make the colour less bright than the input
        // change the following three"+" symbols to"-"
        R = R + amt;
        G = G + amt;
        B = B + amt;

        if (R > 255) R = 255;
        else if (R < 0) R = 0;

        if (G > 255) G = 255;
        else if (G < 0) G = 0;

        if (B > 255) B = 255;
        else if (B < 0) B = 0;

        var RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
        var GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
        var BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

        return (usePound?"#":"") + RR + GG + BB;

    }
    相关讨论

    我尝试了你的功能并且有一个小错误：如果某些最终的'r'值只是1位数，那么结果就像：'a0a0a'，例如，正确的值是'0a0a0a'。
    我只是通过添加此而不是返回来快速修复它：

    1
    2
    3
    4
    5
    var rStr = (r.toString(16).length < 2)?'0'+r.toString(16):r.toString(16);
    var gStr = (g.toString(16).length < 2)?'0'+g.toString(16):g.toString(16);
    var bStr = (b.toString(16).length < 2)?'0'+b.toString(16):b.toString(16);

    return (usePound?"#":"") + rStr + gStr + bStr;

    也许这不是那么好，但它做的工作。功能强大，BTW。正是我需要的。 :)

    相关讨论

    你有没有想过rgb> hsl转换？然后只是上下移动亮度？这就是我要去的方式。

    快速查看一些算法让我得到以下网站。

    PHP：
    http://serennu.com/colour/rgbtohsl.php

    <击>
    使用Javascript：
    http://mjijackson.com/2008/02/rgb-to-hsl-and-rgb-to-hsv-color-model-conversion-algorithms-in-javascript

    编辑上述链接不再有效。您可以查看页面源或要点的git hub

    或者，另一个StackOverflow问题可能是个好看的地方。

    尽管这不是OP的正确选择，但以下是我最初建议的代码的近似值。 (假设你有rgb / hsl转换函数)

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    var SHADE_SHIFT_AMOUNT = 0.1;

    function lightenShade(colorValue)
    {
        if(colorValue && colorValue.length >= 6)
        {
            var redValue = parseInt(colorValue.slice(-6,-4), 16);
            var greenValue = parseInt(colorValue.slice(-4,-2), 16);
            var blueValue = parseInt(colorValue.slice(-2), 16);

            var hsl = rgbToHsl(redValue, greenValue, blueValue);
            hsl[2]= Math.min(hsl[2] + SHADE_SHIFT_AMOUNT, 1);
            var rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
            return"#" + rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
        }
        return null;
    }

    function darkenShade(colorValue)
    {
        if(colorValue && colorValue.length >= 6)
        {
            var redValue = parseInt(colorValue.slice(-6,-4), 16);
            var greenValue = parseInt(colorValue.slice(-4,-2), 16);
            var blueValue = parseInt(colorValue.slice(-2), 16);

            var hsl = rgbToHsl(redValue, greenValue, blueValue);
            hsl[2]= Math.max(hsl[2] - SHADE_SHIFT_AMOUNT, 0);
            var rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
            return"#" + rgb[0].toString(16) + rgb[1].toString(16) + rgb[2].toString(16);
        }
        return null;
    }

    这假定：

  • 你有函数hslToRgb和rgbToHsl。
  • 参数colorValue是#RRGGBB形式的字符串

    • 虽然如果我们讨论css，有一种语法可以为IE9 / Chrome / Firefox指定hsl / hsla。

    相关讨论

    我想将颜色更改为特定的亮度级别 - 无论之前的颜色是什么亮度 - 这是一个简单的JS功能似乎运行良好，虽然我确信它可以更短

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    function setLightPercentage(col: any, p: number) {
        const R = parseInt(col.substring(1, 3), 16);
        const G = parseInt(col.substring(3, 5), 16);
        const B = parseInt(col.substring(5, 7), 16);
        const curr_total_dark = (255 * 3) - (R + G + B);

        // calculate how much of the current darkness comes from the different channels
        const RR = ((255 - R) / curr_total_dark);
        const GR = ((255 - G) / curr_total_dark);
        const BR = ((255 - B) / curr_total_dark);

        // calculate how much darkness there should be in the new color
        const new_total_dark = ((255 - 255 * (p / 100)) * 3);

        // make the new channels contain the same % of available dark as the old ones did
        const NR = 255 - Math.round(RR * new_total_dark);
        const NG = 255 - Math.round(GR * new_total_dark);
        const NB = 255 - Math.round(BR * new_total_dark);

        const RO = ((NR.toString(16).length === 1) ?"0" + NR.toString(16) : NR.toString(16));
        const GO = ((NG.toString(16).length === 1) ?"0" + NG.toString(16) : NG.toString(16));
        const BO = ((NB.toString(16).length === 1) ?"0" + NB.toString(16) : NB.toString(16));

        return"#" + RO + GO + BO;}
    相关讨论

    以下方法将允许您使十六进制(十六进制)颜色字符串的曝光值变亮或变暗：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    private static string GetHexFromRGB(byte r, byte g, byte b, double exposure)
    {
        exposure = Math.Max(Math.Min(exposure, 1.0), -1.0);
        if (exposure >= 0)
        {
            return"#"
                + ((byte)(r + ((byte.MaxValue - r) * exposure))).ToString("X2")
                + ((byte)(g + ((byte.MaxValue - g) * exposure))).ToString("X2")
                + ((byte)(b + ((byte.MaxValue - b) * exposure))).ToString("X2");
        }
        else
        {
            return"#"
                + ((byte)(r + (r * exposure))).ToString("X2")
                + ((byte)(g + (g * exposure))).ToString("X2")
                + ((byte)(b + (b * exposure))).ToString("X2");
        }

    }

    对于GetHexFromRGB()中的最后一个参数值，传入介于-1和1之间的double值(-1为黑色，0为未更改，1为白色)：

    1
    2
    3
    4
    5
    6
    // split color (#e04006) into three strings
    var r = Convert.ToByte("e0", 16);
    var g = Convert.ToByte("40", 16);
    var b = Convert.ToByte("06", 16);

    GetHexFromRGB(r, g, b, 0.25);  // Lighten by 25%;

    C＃版本......
    请注意，我正在以＃FF12AE34格式获取颜色字符串，并需要删除#FF。

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
        private string GetSmartShadeColorByBase(string s, float percent)
        {
            if (string.IsNullOrEmpty(s))
                return"";
            var r = s.Substring(3, 2);
            int rInt = int.Parse(r, NumberStyles.HexNumber);
            var g = s.Substring(5, 2);
            int gInt = int.Parse(g, NumberStyles.HexNumber);
            var b = s.Substring(7, 2);
            int bInt = int.Parse(b, NumberStyles.HexNumber);

            var t = percent < 0 ? 0 : 255;
            var p = percent < 0 ? percent*-1 : percent;

            int newR = Convert.ToInt32(Math.Round((t - rInt) * p) + rInt);
            var newG = Convert.ToInt32(Math.Round((t - gInt) * p) + gInt);
            var newB = Convert.ToInt32(Math.Round((t - bInt) * p) + bInt);

            return String.Format("#{0:X2}{1:X2}{2:X2}", newR, newG, newB);
        }
    相关讨论

    我一直希望能够产生色彩/色调，这是我的JavaScript解决方案：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    const varyHue = function (hueIn, pcIn) {
        const truncate = function (valIn) {
            if (valIn > 255) {
                valIn = 255;
            } else if (valIn < 0)  {
                valIn = 0;
            }
            return valIn;
        };

        let red   = parseInt(hueIn.substring(0, 2), 16);
        let green = parseInt(hueIn.substring(2, 4), 16);
        let blue  = parseInt(hueIn.substring(4, 6), 16);
        let pc    = parseInt(pcIn, 10);    //shade positive, tint negative
        let max   = 0;
        let dif   = 0;

        max = red;

        if (pc < 0) {    //tint: make lighter
            if (green < max) {
                max = green;
            }

            if (blue < max) {
                max = blue;
            }

            dif = parseInt(((Math.abs(pc) / 100) * (255 - max)), 10);

            return leftPad(((truncate(red + dif)).toString(16)), '0', 2)  + leftPad(((truncate(green + dif)).toString(16)), '0', 2) + leftPad(((truncate(blue + dif)).toString(16)), '0', 2);
        } else {    //shade: make darker
            if (green > max) {
                max = green;
            }

            if (blue > max) {
                max = blue;
            }

            dif = parseInt(((pc / 100) * max), 10);

            return leftPad(((truncate(red - dif)).toString(16)), '0', 2)  + leftPad(((truncate(green - dif)).toString(16)), '0', 2) + leftPad(((truncate(blue - dif)).toString(16)), '0', 2);
        }
    };
    相关讨论

    我创建了一个优秀的xcolor库的端口来删除它的jQuery依赖项。那里有很多功能，包括闪电和变暗的颜色。

    实际上，将十六进制转换为RGB是一种完全独立的功能，可以使颜色变亮或变暗。请保持干燥。在任何情况下，一旦你有RGB颜色，你可以添加你想要的光照水平和你对每个RGB值的光照水平之间的差异：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    var lightness = function(level) {
        if(level === undefined) {
            return Math.max(this.g,this.r,this.b)
        } else {
            var roundedLevel = Math.round(level) // fractions won't work here
            var levelChange = roundedLevel - this.lightness()

            var r = Math.max(0,this.r+levelChange)
            var g = Math.max(0,this.g+levelChange)
            var b = Math.max(0,this.b+levelChange)

            if(r > 0xff) r = 0xff
            if(g > 0xff) g = 0xff
            if(b > 0xff) b = 0xff

            return xolor({r: r, g: g, b: b})
        }
    }

    var lighter = function(amount) {
        return this.lightness(this.lightness()+amount)
    }

    有关更多信息，请参阅https://github.com/fresheneesz/xolor。

    相关讨论

    如何在PHP中简单的阴影颜色？

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    <?php
    function shadeColor ($color='#cccccc', $percent=-25) {

      $color = Str_Replace("#",Null,$color);

      $r = Hexdec(Substr($color,0,2));
      $g = Hexdec(Substr($color,2,2));
      $b = Hexdec(Substr($color,4,2));

      $r = (Int)($r*(100+$percent)/100);
      $g = (Int)($g*(100+$percent)/100);
      $b = (Int)($b*(100+$percent)/100);

      $r = Trim(Dechex(($r<255)?$r:255));  
      $g = Trim(Dechex(($g<255)?$g:255));  
      $b = Trim(Dechex(($b<255)?$b:255));

      $r = ((Strlen($r)==1)?"0{$r}":$r);
      $g = ((Strlen($g)==1)?"0{$g}":$g);
      $b = ((Strlen($b)==1)?"0{$b}":$b);

      return (String)("#{$r}{$g}{$b}");
    }

    echo shadeColor(); // #999999
    相关讨论