js lighten / darken color
I'm trying to create some jQuery function that changes object bgcolor to lighter or darker (you set parameter as difference of tone of color). And as I think it should work, but it cracks.
$.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);
}
Fiddle - any idea what is wrong with that?
bgColor isn't necessarily in #RRGBB format, regardless of the original CSS. It could be any of:
And you would have to parse each of them.
It would be much easier if you could have the original colour in your JavaScript source somewhere in the right format.
Well, my answer below doesn't use JQuery for anything. But it should work just fine as a JQuery function either way. As Niet the Dark Absol mentioned in his answer, the function below can parse the various types of color code, except the written name (IE. except the word blue ). Unfortunately, this uses Lerp and not HSL. So its not 100% accurate, but pretty close. For this small inaccuracy we gain a lot of speed and a smaller size.
Programmatically Lighten or Darken a hex color (or rgb, and blend colors)
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);
}
Where p is a percentage from 0 to 100 and from and to are respectively the starting color and the ending color.
This function can lighten, darken, blend and convert colors in these formats:
#RGB #RRGGBB #RGBA #RRGGBBAA rgb(R,G,B) rgb(R,G,B,A) Hex2RGB/RGB2Hex conversions are implicit. Check the link for more info and for other versions of this function. The main version has some Error Checking. Also there are versions without the Hex2RGB/RGB2Hex conversion; they are a bit smaller.
To use it the way that I think you want, do this:
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
See link for more usage options. There are many.
PT
链接地址: http://www.djcxy.com/p/87410.html上一篇: 在PHP中将十六进制颜色转换为RGB值
下一篇: js减轻/变暗颜色