好吧,这个答案已经成为它自己的野兽。新版本很多,时间越来越长了。非常感谢这个答案的所有贡献者。但是,为了让大众保持简单。我将这个答案演变的所有版本/历史存档到我的github https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js)#stackoverflow-archive-begin。并在 StackOverflow 上使用最新版本重新开始。特别感谢迈克·“波马克斯”·卡默曼斯 https://stackoverflow.com/users/740553/mike-pomax-kamermans对于这个版本。他给了我新的数学。
这个函数(pSBC
) 将采用 HEX 或 RGB 网页颜色。pSBC
可以将其调暗或调亮,或者将其与第二种颜色混合,也可以将其直接传递,但从十六进制转换为 RGB (Hex2RGB) 或 RGB 到十六进制 (RGB2Hex)。您甚至不知道您正在使用什么颜色格式。
它运行得非常快,可能是最快的,特别是考虑到它的许多功能。这件事酝酿了很长时间。在我的网站上查看整个故事github https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js)#stackoverflow-archive-begin。如果您想要绝对最小和最快的方式来着色或混合,请参阅下面的微功能并使用 2 线速度恶魔之一。它们非常适合激烈的动画,但这个版本对于大多数动画来说已经足够快了。
该函数使用对数混合或线性混合。但是,它不会转换为 HSL 来正确调亮或调暗颜色。所以,该函数的结果会有所不同来自那些使用 HSL 的更大且更慢的函数。
jsFiddle 与 pSBC https://jsfiddle.net/PimpTrizkit/a7ac0qvp/
github > pSBC 维基 https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js)
特征:
- 自动检测并接受字符串形式的标准十六进制颜色。例如:
"#AA6622"
or "#bb551144"
.
- 自动检测并接受字符串形式的标准 RGB 颜色。例如:
"rgb(123,45,76)"
or "rgba(45,15,74,0.45)"
.
- 按百分比将颜色变为白色或黑色。
- 按百分比将颜色混合在一起。
- 同时或单独进行 Hex2RGB 和 RGB2Hex 转换。
- 接受 3 位(或 4 位带 alpha)十六进制颜色代码,格式为 #RGB(或 #RGBA)。它将扩大它们。例如:
"#C41"
变成"#CC4411"
.
- 接受并(线性)混合 Alpha 通道。如果任一
c0
(来自)颜色或c1
(to) 颜色有一个 alpha 通道,那么返回的颜色将有一个 alpha 通道。如果两种颜色都有 Alpha 通道,则返回的颜色将是使用给定百分比的两个 Alpha 通道的线性混合(就像它是普通颜色通道一样)。如果两种颜色中只有一种具有 Alpha 通道,则该 Alpha 将直接传递到返回的颜色。这允许人们在保持透明度水平的同时混合/着色透明颜色。或者,如果透明度级别也应混合,请确保两种颜色都有 Alpha。着色时,它将直接穿过 Alpha 通道。如果您想要同时对 Alpha 通道进行着色的基本着色,请使用rgb(0,0,0,1)
or rgb(255,255,255,1)
身为你的c1
(到)颜色(或其十六进制等效值)。对于 RGB 颜色,返回颜色的 Alpha 通道将四舍五入到小数点后 3 位。
- 使用混合时,RGB2Hex 和 Hex2RGB 转换是隐式的。不管
c0
(来自)颜色;返回的颜色将始终采用颜色格式c1
(到)颜色(如果存在的话)。如果没有c1
(到)颜色,然后通过'c'
在作为c1
颜色,它会着色并转换任何内容c0
彩色岛。如果只需要转换,则通过0
为百分比 (p
)也是如此。如果c1
颜色被省略或非string
传入的话,不会转换。
- 一个辅助函数也被添加到全局中。
pSBCr
可以传递一个 Hex 或 RGB 颜色,它返回一个包含该颜色信息的对象。其形式为:{r: XXX, g: XXX, b: XXX, a: X.XXX}。在哪里.r
, .g
, and .b
范围为 0 到 255。当没有 alpha 时:.a
是-1。否则:.a
范围为 0.000 到 1.000。
- 对于 RGB 输出,它输出
rgba()
over rgb()
当带有 alpha 通道的颜色被传递到c0
(来自)和/或c1
(to).
- 添加了小错误检查。它并不完美。它仍然可能崩溃或产生乱码。但它会捕获一些东西。基本上,如果结构在某些方面是错误的,或者百分比不是数字或超出范围,它将返回
null
。一个例子:pSBC(0.5,"salt") == null
,正如它认为的那样#salt
是有效的颜色。删除以结尾的四行return null;
删除此功能并使其更快、更小。
- 使用日志混合。经过
true
in for l
(第四个参数)使用线性混合。
Code:
// 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=this.pSBCr(c0),P=p<0,t=c1&&c1!="c"?this.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)
}
Usage:
// 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}
下图将有助于显示两种混合方法的差异:
微功能
如果您确实想要速度和大小,则必须使用 RGB 而不是 HEX。 RGB 更直接和简单,HEX 写入速度太慢,并且对于简单的两行代码来说有太多风格(即,它可以是 3、4、6 或 8 位十六进制代码)。您还需要牺牲一些功能,没有错误检查,没有 HEX2RGB 或 RGB2HEX。此外,如果您想要着色或混合,您还需要为颜色混合数学选择一个特定的函数(基于下面的函数名称)。这些函数确实支持 Alpha 通道。当两种输入颜色都有 Alpha 时,它将对它们进行线性混合。如果两种颜色中只有一种具有 Alpha,它将直接传递到结果颜色。下面是两个非常快且小的线性函数:
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,j=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)+j;
}
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,j=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)+j;
}
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 https://github.com/PimpTrizkit/PJs/wiki/12.-Shade,-Blend-and-Convert-a-Web-Color-(pSBC.js).
PT
(P.s.如果有人知道另一种混合方法的数学,请分享。)