JavaScript — программно осветлить или затемнить шестнадцатеричный цвет (или RGB, и смешать цвета)

Код:

 // Version 4.0 const pSBC=(p,c0,c1,l)={amp}gt;{ let r,g,b,P,f,t,h,i=parseInt,m=Math.round,a=typeof(c1)=="string"; if(typeof(p)!="number"||p{amp}lt;-1||p{amp}gt;1||typeof(c0)!="string"||(c0[0]!='r'{amp}amp;{amp}amp;c0[0]!='#')||(c1{amp}amp;{amp}amp;!a))return null; if(!this.pSBCr)this.pSBCr=(d)={amp}gt;{ let n=d.length,x={}; if(n{amp}gt;9){ [r,g,b,a]=d=d.split(","),n=d.length; if(n{amp}lt;3||n{amp}gt;4)return null; xr=i(r[3]=="a"?r.slice(5):r.slice(4)),xg=i(g),xb=i(b),xa=a?parseFloat(a):-1 }else{ if(n==8||n==6||n{amp}lt;4)return null; if(n{amp}lt;6)d="#" d[1] d[1] d[2] d[2] d[3] d[3] (n{amp}gt;4?d[4] d[4]:""); d=i(d.slice(1),16); if(n==9||n==5)xr=d{amp}gt;{amp}gt;24{amp}amp;255,xg=d{amp}gt;{amp}gt;16{amp}amp;255,xb=d{amp}gt;{amp}gt;8{amp}amp;255,xa=m((d{amp}amp;255)/0.255)/1000; else xr=d{amp}gt;{amp}gt;16,xg=d{amp}gt;{amp}gt;8{amp}amp;255,xb=d{amp}amp;255,xa=-1 }return x}; h=c0.length{amp}gt;9,h=a?c1.length{amp}gt;9?true:c1=="c"?!h:false:h,f=pSBCr(c0),P=p{amp}lt;0,t=c1{amp}amp;{amp}amp;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*tr),g=m(P*f.g p*tg),b=m(P*f.b p*tb); else r=m((P*fr**2 p*tr**2)**0.5),g=m((P*fg**2 p*tg**2)**0.5),b=m((P*fb**2 p*tb**2)**0.5); a=fa,t=ta,f=a{amp}gt;=0||t{amp}gt;=0,a=f?a{amp}lt;0?t:t{amp}lt;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) } 

Использование:

 // 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] ={amp}gt; rgb(166,171,225) pSBC ( -0.4, color5 ); // #F3A   [40% Darker] ={amp}gt; #c62884 pSBC ( 0.42, color8 ); // rgba(200,60,20,0.98631)   [42% Lighter] ={amp}gt; 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] ={amp}gt; #a6abe1ac // RGB2Hex {amp}amp; Hex2RGB Conversion Only (set percentage to zero) pSBC ( 0, color6, "c" ); // #F3A9   [Convert] ={amp}gt; 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] ={amp}gt; rgba(142,60,142,0.83) pSBC ( 0.7, color2, color7 ); // rgba(20,60,200,0.67423)   rgb(200,60,20)   [70% Blend] ={amp}gt; rgba(168,60,111,0.67423) pSBC ( 0.25, color3, color7 ); // #67DAF0   rgb(200,60,20)   [25% Blend] ={amp}gt; rgb(134,191,208) pSBC ( 0.75, color7, color3 ); // rgb(200,60,20)   #67DAF0   [75% Blend] ={amp}gt; #86bfd0 /*** Linear Blending ***/ // Shade (Lighten or Darken) pSBC ( 0.42, color1, false, true ); // rgb(20,60,200)   [42% Lighter] ={amp}gt; rgb(119,142,223) pSBC ( -0.4, color5, false, true ); // #F3A   [40% Darker] ={amp}gt; #991f66 pSBC ( 0.42, color8, false, true ); // rgba(200,60,20,0.98631)   [42% Lighter] ={amp}gt; 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] ={amp}gt; #778edfac // RGB2Hex {amp}amp; Hex2RGB Conversion Only (set percentage to zero) pSBC ( 0, color6, "c", true ); // #F3A9   [Convert] ={amp}gt; 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] ={amp}gt; rgba(110,60,110,0.83) pSBC ( 0.7, color2, color7, true ); // rgba(20,60,200,0.67423)   rgb(200,60,20)   [70% Blend] ={amp}gt; rgba(146,60,74,0.67423) pSBC ( 0.25, color3, color7, true ); // #67DAF0   rgb(200,60,20)   [25% Blend] ={amp}gt; rgb(127,179,185) pSBC ( 0.75, color7, color3, true ); // rgb(200,60,20)   #67DAF0   [75% Blend] ={amp}gt; #7fb3b9 /*** Other Stuff ***/ // Error Checking pSBC ( 0.42, "#FFBAA" ); // #FFBAA   [42% Lighter] ={amp}gt; null  (Invalid Input Color) pSBC ( 42, color1, color5 ); // rgb(20,60,200)   #F3A   [4200% Blend] ={amp}gt; null  (Invalid Percentage Range) pSBC ( 0.42, {} ); // [object Object]   [42% Lighter] ={amp}gt; null  (Strings Only for Color) pSBC ( "42", color1 ); // rgb(20,60,200)   ["42"] ={amp}gt; null  (Numbers Only for Percentage) pSBC ( 0.42, "salt" ); // salt   [42% Lighter] ={amp}gt; null  (A Little Salt is No Good...) // Error Check Fails (Some Errors are not Caught) pSBC ( 0.42, "#salt" ); // #salt   [42% Lighter] ={amp}gt; #a5a5a500  (...and a Pound of Salt is Jibberish) // Ripping pSBCr ( color4 ); // #5567DAF0   [Rip] ={amp}gt; [object Object] ={amp}gt; {'r':85,'g':103,'b':218,'a':0.941} 
Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector