js减轻/变暗颜色

2018-07-01 08:11:29

我试图创建一些jQuery函数，将对象bgcolor更改为更亮或更暗（您将参数设置为色调的差异）。正如我认为它应该起作用，但它会破裂。

$.fn.changeBg = function(difference){




    var hexToRgb = function(hex) {
        var result = /^#?([a-fd]{2})([a-fd]{2})([a-fd]{2})$/i.exec(hex);
        return result ? {
            r: parseInt(result[1], 16),
            g: parseInt(result[2], 16),
            b: parseInt(result[3], 16)
        } : null;
    }

    var rgbToHex = function(r, g, b) {
        return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
    }

    //returns color n-tones lighter or darker (for negavitve values) from given.
    var changeColor = function(hex,tones){
        var rgb = hexToRgb(hex);
        rgb.r+=tones;
        rgb.g+=tones;
        rgb.b+=tones;

        rgb.r=rgb.r>255?255:rgb.r;
        rgb.r=rgb.r<0?0:rgb.r;

        rgb.g=rgb.g>255?255:rgb.g;
        rgb.g=rgb.g<0?0:rgb.g;

        rgb.b=rgb.b>255?255:rgb.b;
        rgb.b=rgb.b<0?0:rgb.b;

        var hex = rgbToHex( rgb.r , rgb.g , rgb.b );
        return hex;
    }

    var bgColor = $(this).css('background-color');
    var secColor = changeColor(bgColor,difference);
    $(this).css('background-color',secColor);

}

小提琴 - 任何想法有什么不对？

bgColor不一定是#RRGBB格式，不管原始的CSS。它可以是以下任何一种：

#RRGGBB

#RGB

rgb（R，G，B）

rgba（R，G，B，A）

名称

你将不得不解析它们中的每一个。

如果您的JavaScript源代码中的原始颜色以正确的格式存在，那将更容易。

那么，我的回答下面不使用JQuery的任何东西。但是，无论哪种方式，它都应该可以很好地工作。正如Dark Absol在他的回答中提到的，下面的函数可以解析各种类型的颜色代码，除了书面名称（除blue字外）。不幸的是，这使用Lerp而不是HSL。所以它不是100％准确，但非常接近。对于这个小错误，我们获得了很多速度和更小的尺寸。

以编程方式使亮度变暗或变暗十六进制颜色（或rgb和混合颜色）

function shadeBlendConvert(p, from, to){
    if(!this.sbcRip)this.sbcRip=function(d){
        var l=d.length,RGB=new Object();
        if(l>9){
            d=d.split(",");
            RGB[0]=i(d[0].slice(4)),RGB[1]=i(d[1]),RGB[2]=i(d[2]),RGB[3]=d[3]?parseFloat(d[3]):-1;
        }else{
            if(l<6)d="#"+d[1]+d[1]+d[2]+d[2]+d[3]+d[3]+(l>4?d[4]+""+d[4]:""); //3 digit
            d=i(d.slice(1),16),RGB[0]=d>>16&255,RGB[1]=d>>8&255,RGB[2]=d&255,RGB[3]=l==9||l==5?r(((d>>24&255)/255)*10000)/10000:-1;
        }
        return RGB;}
    var i=parseInt,r=Math.round,h=from.length>9,h=typeof(to)=="string"?to.length>9?true:to=="c"?!h:false:h,b=p<0,p=b?p*-1:p,to=to&&to!="c"?to:b?"#000000":"#FFFFFF",f=sbcRip(from),t=sbcRip(to);
    if(h)return "rgb("+r((t[0]-f[0])*p+f[0])+","+r((t[1]-f[1])*p+f[1])+","+r((t[2]-f[2])*p+f[2])+(f[3]<0&&t[3]<0?")":","+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*10000)/10000:t[3]<0?f[3]:t[3])+")");
    else return "#"+(0x100000000+(f[3]>-1&&t[3]>-1?r(((t[3]-f[3])*p+f[3])*255):t[3]>-1?r(t[3]*255):f[3]>-1?r(f[3]*255):255)*0x1000000+r((t[0]-f[0])*p+f[0])*0x10000+r((t[1]-f[1])*p+f[1])*0x100+r((t[2]-f[2])*p+f[2])).toString(16).slice(f[3]>-1||t[3]>-1?1:3);
}

其中p是从0到100的百分比， from和to分别是开始颜色和结束颜色。

此功能可以使这些格式变亮，变暗，混合和转换颜色：

#RGB

#RRGGBB

#RGBA

#RRGGBBAA

rgb(R,G,B)

rgb(R,G,B,A)

Hex2RGB / RGB2Hex转换是隐含的。查看链接了解更多信息以及此功能的其他版本。主版本有一些错误检查。也有没有Hex2RGB / RGB2Hex转换的版本; 他们有点小。

为了以我想要的方式使用它，请执行以下操作：

var color1 = "rgb(114,93,20)";
var c2 = shadeBlendConvert(0.3,color1); // rgb(114,93,20) + [30% Lighter] => rgb(156,142,91)
var c3 = shadeBlendConvert(-0.13,"#F3A"); // #F3A + [13% Darker]  => #de2c94

请参阅链接获取更多使用选项。有许多。

链接地址: http://www.djcxy.com/p/87409.html

上一篇: js lighten / darken color

下一篇: How to convert a color integer to a hex String in Android?