खैर, यह जवाब इसका अपना जानवर बन गया है। कई नए संस्करण, यह लंबे समय से बेवकूफ हो रहा था। इस उत्तर के लिए सभी महान योगदानकर्ताओं को बहुत धन्यवाद। लेकिन, जनता के लिए इसे सरल बनाए रखने के लिए। मैंने इस उत्तर के विकास के सभी संस्करणों / इतिहास को अपने गिथब में संग्रहीत किया । और इसे स्टैकऑवरफ्लो पर सबसे नए संस्करण के साथ यहां साफ करना शुरू किया। इस संस्करण के लिए माइक 'पोमैक्स' कमरमन्स के लिए एक विशेष धन्यवाद निकलता है । उसने मुझे नया गणित दिया।
यह फ़ंक्शन ( pSBC) एक HEX या RGB वेब रंग लेगा।pSBCइसे गहरा या हल्का शेड कर सकते हैं, या इसे दूसरे रंग के साथ मिश्रित कर सकते हैं, और इसे सही थ्रू भी पास कर सकते हैं लेकिन हेक्स से RGB (Hex2RGB) या RGB से Hex (RGB2Hex) में परिवर्तित कर सकते हैं। आप सब भी बिना यह जाने कि आप किस रंग प्रारूप का उपयोग कर रहे हैं।
यह वास्तव में तेजी से चलता है, शायद सबसे तेज, विशेष रूप से इसकी कई विशेषताओं को देखते हुए। इसे बनाने में काफी समय लगा था। पूरी कहानी मेरे गितुब पर देखें । यदि आप छाया या मिश्रण के लिए सबसे छोटा और तेज़ संभव तरीका चाहते हैं, तो नीचे दिए गए माइक्रो फ़ंक्शंस देखें और 2-लाइनर स्पीड राक्षसों में से एक का उपयोग करें। वे गहन एनिमेशन के लिए महान हैं, लेकिन यहां यह संस्करण अधिकांश एनिमेशन के लिए काफी तेज है।
यह फ़ंक्शन लॉग ब्लेंडिंग या रैखिक सम्मिश्रण का उपयोग करता है। हालाँकि, यह ठीक से हल्का या गहरा रंग करने के लिए HSL में परिवर्तित नहीं होता है। इसलिए, इस फ़ंक्शन के परिणाम उन बहुत बड़े और बहुत धीमे कार्यों से भिन्न होंगे जो एचएसएल का उपयोग करते हैं।
pSBC के साथ jsFiddle
github> pSBC विकी
विशेषताएं:
- स्ट्रिंग्स के रूप में मानक हेक्स रंगों को ऑटो-डिटेक्ट करता है और स्वीकार करता है। उदाहरण के लिए:
"#AA6622"या "#bb551144"।
- स्ट्रिंग्स के रूप में मानक आरजीबी रंगों को ऑटो-डिटेक्ट करता है और स्वीकार करता है। उदाहरण के लिए:
"rgb(123,45,76)"या"rgba(45,15,74,0.45)" ।
- रंग सफेद या काले रंग के प्रतिशत के अनुसार।
- रंगों को एक साथ प्रतिशत से रंगता है।
- क्या Hex2RGB और RGB2Hex एक ही समय में रूपांतरण करते हैं, या एकल।
- #RGB (या #RGBA) फॉर्म में 3 अंकों (या 4 अंकों w / अल्फा) HEX रंग कोड को स्वीकार करता है। यह उनका विस्तार करेगा। उदाहरण के लिए:
"#C41"बन जाता है"#CC4411" ।
- स्वीकार और (रैखिक) अल्फा चैनलों को मिश्रित करता है। यदि या तो
c0(से) रंग या c1(से) रंग में एक अल्फा चैनल है, तो लौटे रंग में एक अल्फा चैनल होगा। यदि दोनों रंगों में एक अल्फा चैनल है, तो दिए गए रंग दिए गए प्रतिशत का उपयोग करके दो अल्फा चैनलों का एक रैखिक मिश्रण होगा (जैसे कि यह एक सामान्य रंग चैनल था)। यदि केवल दो रंगों में से एक में एक अल्फा चैनल है, तो यह अल्फा केवल दिए गए रंग के माध्यम से पारित हो जाएगा। यह पारदर्शिता के स्तर को बनाए रखते हुए पारदर्शी रंग को मिश्रित / शेड करने की अनुमति देता है। या, यदि पारदर्शिता के स्तर के साथ-साथ मिश्रण होना चाहिए, तो सुनिश्चित करें कि दोनों रंगों में अल्फ़ाज़ हैं। छायांकन करते समय, यह अल्फा चैनल को सीधे थ्रू पास करेगा। यदि आप बेसिक शेडिंग चाहते हैं जो अल्फा चैनल को भी शेड करता है, तो उपयोग करें rgb(0,0,0,1)याrgb(255,255,255,1) अपने रूप मेंc1(से) रंग (या उनके हेक्स समकक्ष)। RGB रंगों के लिए, दिए गए रंग का अल्फा चैनल 3 दशमलव स्थानों पर गोल होगा।
- सम्मिश्रण का उपयोग करते समय RGB2Hex और Hex2RGB रूपांतरण निहित हैं।
c0रंग के बावजूद (से); लौटाया रंग हमेशा रंग के प्रारूप में c1(से) रंग का होगा, यदि कोई मौजूद है। यदि कोई c1() रंग नहीं है, तो रंग के 'c'रूप में पास करें c1और यह जो भी c0रंग है उसे छाया देगा और परिवर्तित करेगा । यदि रूपांतरण केवल वांछित है, तो 0प्रतिशत ( p) के रूप में अच्छी तरह से पास करें। यदि c1रंग छोड़ा गया है या एक गैर- stringमें पारित किया गया है, तो यह रूपांतरित नहीं होगा।
- एक द्वितीयक कार्य को वैश्विक रूप से भी जोड़ा जाता है।
pSBCrएक हेक्स या आरजीबी रंग पारित किया जा सकता है और यह इस रंग की जानकारी युक्त एक वस्तु देता है। इसके रूप में: {r: XXX, g: XXX, b: XXX, a: X.XXX}। कहाँ .r, .gऔर .b0 से 255 तक है। और जब कोई अल्फा नहीं है: .a-1 है। अन्यथा: .aसीमा 0.000 से 1.000 है।
- आरजीबी आउटपुट के लिए, यह तब
rgba()खत्म rgb()हो जाता है जब एक अल्फा चैनल के साथ एक रंग c0() और / या c1( ) से पारित किया गया था ।
- मामूली त्रुटि जाँच जोड़ी गई है। यह सही नहीं है। यह अभी भी क्रैश कर सकता है या जीब्रीश बना सकता है। लेकिन यह कुछ सामान पकड़ लेगा। मूल रूप से, यदि संरचना कुछ मायनों में गलत है या यदि प्रतिशत संख्या या दायरे से बाहर नहीं है, तो यह वापस आ जाएगा
null। एक उदाहरण: pSBC(0.5,"salt") == nullजहां यह सोचता #saltहै कि एक वैध रंग है। return null;इस सुविधा को हटाने के लिए समाप्त होने वाली चार पंक्तियों को हटा दें और इसे तेज़ और छोटा करें।
- लॉग सम्मिश्रण का उपयोग करता है। दर्रा
trueके लिए में lरैखिक सम्मिश्रण का उपयोग करने (4 पैरामीटर)।
कोड:
// 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)
}
उपयोग:
// 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 बहुत धीमा लिखता है और एक साधारण टू-लाइनर (IE के लिए बहुत सारे फ्लेवर में आता है। यह 3, 4, 6 या 8 अंकों का HEX कोड हो सकता है)। आपको कुछ सुविधाओं, कोई त्रुटि जाँच, कोई HEX2RGB और न ही RGB2HEX का त्याग करने की आवश्यकता होगी। साथ ही, आपको रंग सम्मिश्रण गणित के लिए एक विशिष्ट फ़ंक्शन (नीचे इसके फ़ंक्शन नाम के आधार पर) का चयन करना होगा, और यदि आप छायांकन या सम्मिश्रण चाहते हैं। ये फ़ंक्शन अल्फा चैनल का समर्थन करते हैं। और जब दोनों इनपुट रंगों में अल्फ़ाज़ होते हैं तो यह उन्हें ब्लेंड कर देगा। यदि केवल दो रंगों में से एक में एक अल्फा है, तो यह परिणामी रंग के साथ सीधे गुजरता है। नीचे दो लाइनर फ़ंक्शन हैं जो अविश्वसनीय रूप से तेज़ और छोटे हैं:
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:")");
}
अधिक जानकारी चाहते हैं? पर पूरा writeup पढ़ें GitHub ।
पीटी
(यदि किसी के पास अन्य सम्मिश्रण विधि के लिए गणित है, तो कृपया साझा करें।)