सफेद के साथ एक HSLA रंग मिलाएं और Chroma.js के साथ गैर-अल्फा HSL में परिवर्तित करें
मेरे पास कई, कई रंगों के साथ एक डिजाइन प्रणाली है। मैंने रंगों की एक तालिका बनाई है जहां सभी रंगों को हर दूसरे रंग के साथ मिलाया जाता है और प्रत्येक संयोजन का रंग विपरीत अनुपात (CCR) आउटपुट होता है। लक्ष्य दुर्गम रंग संयोजन को ध्वजांकित करना है।
मैं Chroma.js का उपयोग रंगों में हेरफेर करने और CCRs के उत्पादन के लिए कर रहा हूं। यह मेरे एचएसएल-परिभाषित रंगों के थोक के साथ शानदार ढंग से काम करता है।
परेशानी तब होती है जब मेरा डिज़ाइन सिस्टम एक अल्फा चैनल के साथ एक रंग का उपयोग करता है। यह निर्धारित करना कि एक या दोनों पारदर्शी होने पर सीसीआर के साथ रंगों की जोड़ी कैसा प्रदर्शन करती है। मैं सफेद रंग के साथ एक HSLA रंग को मिलाने या मिश्रण करने के लिए कुछ अलग चीजों की कोशिश कर रहा हूं और फिर उस पर कंट्रास्ट फ़ंक्शन को चलाता हूं। यहाँ मैं क्या कर रहा हूँ का एक टुकड़ा है:
// where either foreground or background has an alpha value present less than 1
var background = chroma.mix(background, '#fff', 1, 'lab').css();
var foreground = chroma.mix(foreground, background, 1, 'lab').css();
var ccr = chroma.contrast(foreground, background);
// lab gets the closest but not the same as the way CSS overlays colors
परिणाम इस ग्राफिक के साथ देखे जाते हैं जिन्हें मैंने एक साथ रखा है। बीच में एक ओवरले के साथ लेफ्ट दो रंग हैं। Adobe Illustrator में, मैंने टैन रंग और "सामान्य" मिश्रण मोड पर 25% पारदर्शिता का उपयोग किया। मैंने CSS में वही किया और फिर स्क्रीन-शोटेड किया, फिर फ़ोटोशॉप में परिणामी रंग मिश्रण को मापा। दाईं ओर Chroma रंग फ़ंक्शन के आउटपुट हैं:

Chroma.js में विकल्प समझने की कोशिश करने के बाद, मैं सोच रहा हूं कि मैं अपने परिणामों को ब्राउज़र आउटपुट के करीब लाने की कोशिश कर सकता हूं ताकि मेरे CCR परीक्षण सटीक होंगे। सबको शुक्रीया।
@GrahamRitchie से स्वीकृत उत्तर के लिए धन्यवाद, मेरी आउटपुट तालिका अब इस तरह दिखती है। छोटे "मिश्रित" लेबल उन रंगों को दिखाते हैं जो इन कार्यों द्वारा उत्पादित किए गए थे, जबकि मुख्य आउटपुट अभी भी एक दूसरे और पृष्ठभूमि पर पारदर्शी रंगों को परत करता है।

जवाब
मुझे नहीं पता कि आपके द्वारा बताए गए पुस्तकालय (Chroma.js) के साथ यह कैसे करना है, लेकिन उम्मीद है कि एक वेनिला जावास्क्रिप्ट फ़ंक्शन मदद करेगा।
कृपया ध्यान दें कि नीचे दिए गए फ़ंक्शन हमेशा सही ढंग से काम करने के लिए एक अपारदर्शी पृष्ठभूमि का रंग मानते हैं (इसलिए पृष्ठभूमि RGB और अग्रभूमि RGBA)।
यदि आपको 2 रंगों के साथ काम करने की आवश्यकता है, दोनों में अल्फा चैनल हैं, तो आप फ़ंक्शन को पहले बैकग्राउंड रंग पर (अग्रभूमि रंग के रूप में) सफेद पृष्ठभूमि के साथ चलाएंगे और फिर दोनों रंगों को संयोजित करेंगे।
फ़ंक्शन दो RGB रंगों को भी संयोजित करेगा, बस आपके RGB रंग को पास करते समय अल्फा चैनल को छोड़ दें ( convertToRGB({r,g,b}, {r,g,b})
)
function convertToRGB(frontRGBA, backgroundRGB){
var rtrn = {};
//allows the function to just accept a front colour and assume the background is a plain white.
backgroundRGB = backgroundRGB || {r:255,g:255,b:255};
//allows a RGB value to be passed in assuming full alpha channel.
frontRGBA.a = frontRGBA.a || 1;
//normalise the alpha channel across the foreground and background.
rtrn.r = ((1 - frontRGBA.a) * backgroundRGB.r) + (frontRGBA.a * frontRGBA.r);
rtrn.g = ((1 - frontRGBA.a) * backgroundRGB.g) + (frontRGBA.a * frontRGBA.g);
rtrn.b = ((1 - frontRGBA.a) * backgroundRGB.b) + (frontRGBA.a * frontRGBA.b);
//just check that we don't end up with a value greater than 255 for any channel.
rtrn.r = (rtrn.r > 255) ? 255 : rtrn.r;
rtrn.g = (rtrn.g > 255) ? 255 : rtrn.g;
rtrn.b = (rtrn.b > 255) ? 255 : rtrn.b;
return rtrn;
}
var backgroundRGB = {r:165,g:193,b:211};
var frontRGBA = {r:210,g:203,b:178,a:0.25};
//used for example
var rgb = convertToRGB(frontRGBA, backgroundRGB);
document.querySelector(".output").style.background = "rgb(" + rgb.r + "," + rgb.g + "," + rgb.b + ")";
document.querySelector(".output").innerHTML = "Output<br/>R:" + rgb.r + "<br/>G:" + rgb.g + "<br/>B:" + rgb.b;
.container div{
width: 200px;
height: 200px;
float: left;
}
.div1{
background: rgba(165,193,211,1);
}
.div2{
background: rgba(210,203,178,0.25);
}
<div class="container">
<div class="div1">Background<br/>R:165<br/>G:193<br/>B:211<br/>A:1</div>
<div class="output">Output</div>
<div class="div2">Foreground<br/>R:210<br/>G:203<br/>B:178<br/>A:0.25</div>
</div>