css - अस्पष्टता के साथ "समकक्ष" रंग ढूँढना




css3 colors (3)

मान लें कि मेरे पास एक पृष्ठभूमि रंग है जिसमें "रिबन" एक और ठोस रंग में चल रहा है। अब, मैं कुछ विवरणों को मिश्रण करने के लिए रिबन को आंशिक रूप से पारदर्शी होना चाहता हूं, लेकिन फिर भी रिबन को पृष्ठभूमि पर "समान रंग" रखें।

क्या किसी दिए गए अस्पष्टता / अल्फा <100% रिबन रंग के लिए, आसानी से निर्धारित करने का कोई तरीका है, आरजीबी मूल्यों को पृष्ठभूमि पर 100% अस्पष्टता के साथ अपने रंग के समान होना चाहिए?

यहाँ एक तस्वीर है। पृष्ठभूमि rgb(72, 28, 97) , रिबन rgb(45, 34, 70) । मैं रिबन के लिए एक rgba(r, g, b, a) चाहता हूं ताकि यह इस ठोस रंग के समान दिखाई दे।


@Phrogz 'उत्तर से:

r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1

इसलिए:

r3 - r2 = (r1-r2)*a1
g3 - g2 = (g1-g2)*a1
b3 - b2 = (b1-b2)*a1

इसलिए:

r1 = (r3 - r2) / a1 + r2
g1 = (g3 - g2) / a1 + g2
b1 = (b3 - b2) / a1 + b2

ध्यान दें कि आप a1 का कोई भी मूल्य चुन सकते हैं, और यह r1 b1 , जी b1 , और b1 के अनुरूप मानों को प्राप्त करेगा। उदाहरण के लिए, 1 का अल्फा चुनना आपको बताता है कि आपको RGB1 = RGB3 की आवश्यकता है, लेकिन 0 का अल्फा चुनना कोई समाधान नहीं देता है (जाहिर है)।


कलर ब्लेंडिंग प्रति चैनल सिर्फ एक रैखिक इंटरपोलेशन है, है ना? तो गणित बहुत आसान है। यदि आपके पास आरजीबी 2 पर आरजीबीए 1 है, तो प्रभावी दृश्य परिणाम आरजीबी 3 होगा:

r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1

... जहां अल्फा चैनल 0.0 से 1.0 तक है।

स्वच्छता जांच: यदि अल्फा 0 है, तो आरजीबी 3 आरजीबी 2 जैसा ही है? हाँ। यदि अल्फा 1 है, तो आरजीबी 3 आरजीबी 1 जैसा ही है? हाँ।

यदि आपने केवल पृष्ठभूमि रंग और अंतिम रंग को बंद कर दिया है, तो बड़ी संख्या में आरजीबीए रंग (अनंत, फ़्लोटिंग-पॉइंट स्पेस में) हैं जो आवश्यकताओं को पूरा कर सकते हैं। तो आपको या तो बार का रंग या अस्पष्टता स्तर चुनना होगा, और दूसरे के मूल्य का पता लगाना होगा।

अल्फा पर आधारित रंग उठाओ

यदि आप आरजीबी 3 (अंतिम वांछित रंग), आरजीबी 2 (पृष्ठभूमि रंग), और ए 1 (आप कितनी अस्पष्टता चाहते हैं) जानते हैं, और आप केवल आरजीबी 1 की तलाश में हैं, तो हम समीकरणों को फिर से व्यवस्थित कर सकते हैं:

r1 = (r3 - r2 + r2*a1)/a1
g1 = (g3 - g2 + g2*a1)/a1
b1 = (b3 - b2 + b2*a1)/a1

कुछ रंग संयोजन हैं जो सैद्धांतिक रूप से संभव हैं, लेकिन मानक आरजीबीए रेंज को असंभव समझा जाता है। उदाहरण के लिए, यदि पृष्ठभूमि शुद्ध काला है, वांछित अनुमानित रंग शुद्ध सफेद है, और वांछित अल्फा 1% है, तो आपको इसकी आवश्यकता होगी:

r1 = g1 = b1 = 255/0.01 = 25500

... किसी भी उपलब्ध से एक सुपर उज्ज्वल सफेद 100 × चमकदार।

रंगों पर आधारित अल्फा उठा रहा है

यदि आप आरजीबी 3 (अंतिम वांछित रंग), आरजीबी 2 (पृष्ठभूमि रंग), और आरजीबी 1 (वह रंग जो आप चाहते हैं कि आप अस्पष्टता को बदलना चाहते हैं), और आप केवल ए 1 की तलाश में हैं, तो हम फिर से व्यवस्थित कर सकते हैं इस प्रकार समीकरण:

a1 = (r3-r2) / (r1-r2)
a1 = (g3-g2) / (g1-g2)
a1 = (b3-b2) / (b1-b2)

यदि ये अलग-अलग मान देते हैं, तो आप इसे बिल्कुल मेल नहीं कर सकते हैं, लेकिन आप जितना संभव हो उतना करीब पाने के लिए जोर दे सकते हैं। उदाहरण के लिए, दुनिया में कोई अस्पष्टता नहीं है जो आपको नीले रंग के लिए लाल रंग में हरे रंग की डाल देगी।


फोगज़ और एफेमर के महान उत्तरों के लिए धन्यवाद, यहां एक SASS फ़ंक्शन है जो स्वचालित रूप से सर्वश्रेष्ठ समकक्ष आरजीबीए रंग की गणना करता है।

आप इसे वांछित रंग और मौजूदा पृष्ठभूमि के साथ बुलाते हैं, और यह सबसे अच्छा (अर्थात् सबसे पारदर्शी) समकक्ष आरजीबीए रंग की गणना करेगा जो वांछित परिणाम प्रत्येक आरजीबी घटक के ± 1/256 (गोलाकार त्रुटियों के कारण) के भीतर देता है:

@function alphaize($desired-color, $background-color) {

    $r1: red($background-color);
    $g1: green($background-color);
    $b1: blue($background-color);

    $r2: red($desired-color);
    $g2: green($desired-color);
    $b2: blue($desired-color);

    $alpha: 0;
    $r: -1;
    $g: -1;
    $b: -1;

    @while $alpha < 1 and ($r < 0 or $g < 0 or $b < 0
                           or $r > 255 or $g > 255 or $b > 255) {
        $alpha: $alpha + 1/256;
        $inv: 1 / $alpha;
        $r: $r2 * $inv + $r1 * (1 - $inv);
        $g: $g2 * $inv + $g1 * (1 - $inv);
        $b: $b2 * $inv + $b1 * (1 - $inv);
    }

    @return rgba($r, $g, $b, $alpha);
}

मैंने अभी कई संयोजनों (सभी बूटस्वाच थीम) के खिलाफ इसका परीक्षण किया है और यह अंधेरे-प्रकाश और हल्के-अंधेरे परिणामों दोनों के लिए एक इलाज करता है।

पीएस: यदि आपको परिणामी रंग में ± 1/256 परिशुद्धता से बेहतर की आवश्यकता है, तो आपको यह जानने की आवश्यकता होगी कि आरजीबीए रंगों को मिश्रित करते समय किस प्रकार के गोलाकार एल्गोरिदम ब्राउज़र लागू होते हैं (मुझे नहीं पता कि यह मानकीकृत है या नहीं) और उपयुक्त मौजूदा @while स्थिति, ताकि यह वांछित परिशुद्धता प्राप्त होने तक $alpha बढ़ता रहता है।





colors