सीएसएस कलर-मिक्स()

Adam Argyle

सीएसएस color-mix() फ़ंक्शन की मदद से, सीएसएस से ही रंगों को मिक्स किया जा सकता है. इसके लिए, काम करने वाले किसी भी कलर स्पेस का इस्तेमाल किया जा सकता है.

color-mix() से पहले, डेवलपर किसी रंग को गहरा, हल्का या रंगहीन करने के लिए, सीएसएस प्रीप्रोसेसर या कलर चैनल पर calc() का इस्तेमाल करते थे.

.color-mixing-with-sass {
  /* Sass: equally mix red with white */
  --red-white-mix: color.mix(red, white);
}

Sass ने कलर सीएसएस स्पेसिफ़िकेशन से आगे रहने के लिए बेहतरीन काम किया है. हालांकि, सीएसएस में रंगों को मिक्स करने का कोई असल तरीका नहीं था. इसके लिए, आपको रंग की वैल्यू का हिसाब लगाना होगा. यहां एक छोटा उदाहरण दिया गया है, जिसमें बताया गया है कि सीएसएस, मिक्सिंग को कैसे सिम्युलेट कर सकती है:

.color-mixing-with-vanilla-css-before {
  --lightness: 50%;
  --red: hsl(0 50% var(--lightness));

  /* add "white" to red
     by adding 25% to the lightness channel
  */
  --lightred: hsl(0 50% calc(var(--lightness) + 25%);
}

color-mix() की मदद से, सीएसएस में रंगों को मिक्स किया जा सकता है. डेवलपर यह चुन सकते हैं कि उन्हें कौनसे कलर स्पेस को मिक्स करना है और मिक्स में हर रंग कितना गहरा होना चाहिए.

.color-mixing-after {
  /* equally mix red with white */
  --red-white-mix: color-mix(in oklab, red, white);

  /* equally mix red with white in srgb */
  --red-white-mix-srgb: color-mix(in srgb, red, white);
}

हमें यही चाहिए. लचीलापन, बेहतर परफ़ॉर्मेंस, और पूरी सुविधाओं वाले एपीआई. अच्छा लगा.

सीएसएस में रंगों को मिक्स करना

सीएसएस, कई कलर स्पेस और कलर गैमट वर्ल्ड में मौजूद है. इस वजह से, मिक्सिंग के लिए कलर स्पेस तय करना ज़रूरी है. इसके अलावा, अलग-अलग कलर स्पेस, मिक्स के नतीजों को काफ़ी हद तक बदल सकते हैं. इसलिए, कलर स्पेस के असर को जानने से आपको अपनी ज़रूरत के मुताबिक नतीजे पाने में मदद मिलेगी.

इंटरैक्टिव तरीके से जानकारी पाने के लिए, इस color-mix() टूल का इस्तेमाल करें: - हर कलर स्पेस के असर के बारे में जानें. - सिलिंडर वाले कलर स्पेस (lch, oklch, hsl, और hwb) में रंगों को मिक्स करते समय, ह्यू इंटरपोलेशन के असर को एक्सप्लोर करें. - सबसे ऊपर मौजूद दो कलर बॉक्स में से किसी एक पर क्लिक करके, मिक्स किए जा रहे रंगों को बदलें. - मिक्सिंग रेशियो बदलने के लिए, स्लाइडर का इस्तेमाल करें. - जनरेट किया गया color-mix() सीएसएस कोड सबसे नीचे उपलब्ध है.

अलग-अलग कलर स्पेस में मिक्स करना

रंगों को मिलाने (और ग्रेडिएंट) के लिए, डिफ़ॉल्ट कलर स्पेस oklab है. इससे लगातार नतीजे मिलते हैं. अपनी ज़रूरत के हिसाब से मिक्स को बेहतर बनाने के लिए, अन्य कलर स्पेस भी तय किए जा सकते हैं.

उदाहरण के लिए, black और white लें. जिस कलर स्पेस में वे मिक्स होते हैं उससे ज़्यादा फ़र्क़ नहीं पड़ेगा, है न? गलत.

color-mix(in srgb, black, white);
color-mix(in srgb-linear, black, white);
color-mix(in lch, black, white);
color-mix(in oklch, black, white);
color-mix(in lab, black, white);
color-mix(in oklab, black, white);
color-mix(in xyz, black, white);

इससे काफ़ी फ़र्क़ पड़ता है!

एक और उदाहरण के लिए, blue और white को देखें. मैंने इसे खास तौर पर इसलिए चुना, क्योंकि यह एक ऐसा मामला है जहां कलर स्पेस का आकार, नतीजों पर असर डाल सकता है. इस मामले में, सफ़ेद से नीले रंग में बदलते समय, ज़्यादातर कलर स्पेस बैंगनी रंग के हो जाते हैं. इससे यह भी पता चलता है कि oklab, रंगों को मिलाने के लिए कितना भरोसेमंद कलर स्पेस है. यह सफ़ेद और नीले रंग को मिलाने पर, ज़्यादातर लोगों की उम्मीद के मुताबिक रंग देता है. इसमें बैंगनी रंग नहीं होता.

color-mix(in srgb, blue, white);
color-mix(in srgb-linear, blue, white);
color-mix(in lch, blue, white);
color-mix(in oklch, blue, white);
color-mix(in lab, blue, white);
color-mix(in oklab, blue, white);
color-mix(in xyz, blue, white);

color-mix() के साथ कलर स्पेस के असर को समझना, ग्रेडिएंट बनाने के लिए भी बहुत ज़रूरी है. Color 4 सिंटैक्स में, ग्रेडिएंट को कलर स्पेस के बारे में बताने की सुविधा भी मिलती है. इसमें ग्रेडिएंट, किसी स्पेस के हिस्से में मिक्स किए गए रंगों को दिखाता है.

.black-to-white-gradient-in-each-space {
  --srgb: linear-gradient(to right in srgb, black, white);
  --srgb-linear: linear-gradient(to right in srgb-linear, black, white);
  --lab: linear-gradient(to right in lab, black, white);
  --oklab: linear-gradient(to right in oklab, black, white);
  --lch: linear-gradient(to right in lch, black, white);
  --oklch: linear-gradient(to right in oklch, black, white);
  --hsl: linear-gradient(to right in hsl, black, white);
  --hwb: linear-gradient(to right in hwb, black, white);
  --xyz: linear-gradient(to right in xyz, black, white);
  --xyz-d50: linear-gradient(to right in xyz-d50, black, white);
  --xzy-d65: linear-gradient(to right in xyz-d65, black, white);
}

अगर आपको लगता है कि कोई कलर स्पेस "सबसे अच्छा" है, तो ऐसा नहीं है. इसलिए, आपके पास इतने सारे विकल्प हैं! अगर कोई एक कलर स्पेस "सबसे अच्छा" होता, तो नए कलर स्पेस भी नहीं बनाए जाते (oklch और oklab देखें). हर कलर स्पेस का इस्तेमाल, अलग-अलग तरह के कॉन्टेंट के लिए किया जा सकता है.

उदाहरण के लिए, अगर आपको वाइब्रेंट मिक्स रिज़ल्ट चाहिए, तो hsl या hwb का इस्तेमाल करें. यहां दिए गए डेमो में, दो चमकीले रंगों (मजेंटा और लाइम) को एक साथ मिलाया गया है. hsl और hwb, दोनों से चमकीला रंग मिलता है. वहीं, srgb और oklab से अनसैचुरेटेड रंग मिलते हैं.

अगर आपको एक जैसा और हल्का रंग चाहिए, तो oklab का इस्तेमाल करें. नीचे दिए गए डेमो में, नीले और काले रंग को मिलाया गया है. इसमें hsl और hwb, ज़्यादा चटकीले और रंग बदले हुए रंग बनाते हैं. वहीं, srgb और oklab, गहरे नीले रंग बनाते हैं.

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

ह्यू इंटरपोलेशन के तरीके में बदलाव करना

अगर आपने सिलिंड्रिकल कलर स्पेस में मिक्स करने का विकल्प चुना है, तो आपके पास यह तय करने का विकल्प होता है कि इंटरपोलेशन shorter, longer, decreasing, और increasing के हिसाब से हो. सिलिंड्रिकल कलर स्पेस में, h ह्यू चैनल होता है, जो ऐंगल को स्वीकार करता है. अगर आपको इस बारे में ज़्यादा जानना है, तो एचडी कलर गाइड पढ़ें. इसमें इस बारे में अच्छी तरह से बताया गया है.

यहां नीले और सफ़ेद रंग के मिक्स का वही उदाहरण दिया गया है. हालांकि, इस बार यह सिर्फ़ बेलनाकार जगहों पर है. साथ ही, इसमें रंग के इंटरपोलेशन के अलग-अलग तरीकों का इस्तेमाल किया गया है.

यहां एक और Codepen है, जिसे मैंने ह्यू इंटरपोलेशन को विज़ुअलाइज़ करने के लिए बनाया है. हालांकि, यह खास तौर पर ग्रेडिएंट के लिए है. हमें लगता है कि इससे आपको यह समझने में मदद मिलेगी कि रंग के हर कलर स्पेस में, रंग के इंटरपोलेशन के लिए तय किए गए नियमों के हिसाब से मिक्सिंग का नतीजा कैसे मिलता है. हालांकि, इसे एक बार देख लें!

अलग-अलग कलर सिंटैक्स का इस्तेमाल करना

अब तक हमने सीएसएस के नाम वाले रंगों को मिलाया है. जैसे, blue और white. सीएसएस कलर मिक्सिंग की सुविधा, दो अलग-अलग कलर स्पेस के रंगों को मिलाने के लिए तैयार है. यह एक और वजह है कि रंगों को मिलाने के लिए कलर स्पेस तय करना ज़रूरी है. इससे दो रंगों के एक ही स्पेस में न होने पर, उनके लिए एक कॉमन स्पेस सेट हो जाता है.

color-mix(in oklch, hsl(200deg 50% 50%), color(display-p3 .5 0 .5));

पिछले उदाहरण में, hsl और display-p3 को oklch में बदला जाएगा और फिर मिक्स किया जाएगा. बहुत बढ़िया और आसान है.

मिक्सिंग रेशियो में बदलाव करना

ऐसा बहुत कम होता है कि हर बार रंग मिलाते समय, आपको हर रंग की बराबर मात्रा चाहिए हो, जैसा कि अब तक के ज़्यादातर उदाहरणों में दिखाया गया है. अच्छी बात यह है कि एक सिंटैक्स है, जिससे यह तय किया जा सकता है कि मिक्स किए गए रंग में हर रंग कितना दिखना चाहिए.

इस विषय के बारे में जानने के लिए, यहां ऐसे मिक्स का सैंपल दिया गया है जो एक जैसे हैं और स्पेसिफ़िकेशन के मुताबिक हैं:

.ratios-syntax-examples {
  /* omit the percentage for equal mixes */
  color: color-mix(in lch, purple, plum);
  color: color-mix(in lch, plum, purple);

  /* percentage can go on either side of the color */
  color: color-mix(in lch, purple 50%, plum 50%);
  color: color-mix(in lch, 50% purple, 50% plum);

  /* percentage on just one color? other color gets the remainder */
  color: color-mix(in lch, purple 50%, plum);
  color: color-mix(in lch, purple, plum 50%);

  /* percentages > 100% are equally clamped */
  color: color-mix(in lch, purple 80%, plum 80%);
  /* above mix is clamped to this */
  color: color-mix(in lch, purple 50%, plum 50%);
}

मुझे लगता है कि इन उदाहरणों से, एज केस को अच्छी तरह से समझा जा सकता है. उदाहरणों के पहले सेट से पता चलता है कि 50% की वैल्यू देना ज़रूरी नहीं है. हालांकि, इसे विकल्प के तौर पर दिया जा सकता है. आखिरी उदाहरण में एक दिलचस्प मामला दिखाया गया है. इसमें अनुपात को जोड़ने पर, वह 100% से ज़्यादा हो जाता है. हालांकि, उन्हें बराबर-बराबर बांटकर कुल 100% कर दिया जाता है.

यह भी ध्यान दें कि अगर सिर्फ़ एक रंग के लिए रेशियो तय किया जाता है, तो दूसरे रंग का रेशियो 100% में से घटाकर निकाला जाता है. इस व्यवहार को समझाने के लिए, यहां कुछ और उदाहरण दिए गए हैं.

color-mix(in lch, purple 40%, plum) /* plum assigned 60% */
color-mix(in lch, purple, 60% plum) /* purple assigned 40% */
color-mix(in lch, purple 40%, plum 60%) /* no auto assignments */

इन उदाहरणों में दो नियमों के बारे में बताया गया है: 1. जब अनुपात 100% से ज़्यादा हो जाता है, तो उसे क्लैंप करके बराबर बांट दिया जाता है. 1. सिर्फ़ एक अनुपात दिए जाने पर, दूसरे रंग को उस अनुपात से 100 घटाकर सेट किया जाता है.

आखिरी नियम थोड़ा कम साफ़ है; अगर दोनों रंगों के लिए प्रतिशत दिए गए हैं और उनका योग 100% नहीं होता है, तो क्या होगा?

color-mix(in lch, purple 20%, plum 20%)

color-mix() और 40% को मिलाकर, पारदर्शिता मिलती है. अगर अनुपात 100% नहीं होता है, तो मिलने वाला मिक्स अपारदर्शी नहीं होगा. दोनों में से कोई भी रंग पूरी तरह से नहीं मिलेगा.

color-mix() को नेस्ट करना

सीएसएस की तरह ही, नेस्टिंग को अच्छी तरह से और उम्मीद के मुताबिक मैनेज किया जाता है. इनर फ़ंक्शन पहले रिज़ॉल्व होंगे और अपनी वैल्यू को पैरंट कॉन्टेक्स्ट में दिखाएंगे.

color-mix(in lch, purple 40%, color-mix(plum, white))

मनचाहा नतीजा पाने के लिए, जितने चाहें उतने फ़ंक्शन नेस्ट करें.

हल्के और गहरे रंग वाली कलर स्कीम बनाना

आइए, color-mix() की मदद से कलर स्कीम बनाएं!

एक बेसिक कलर स्कीम

यहां दी गई सीएसएस में, ब्रैंड के हेक्स कोड के आधार पर हल्के और गहरे रंग वाली थीम बनाई गई हैं. हल्के रंग वाली थीम में, गहरे नीले रंग के दो टेक्स्ट कलर और बहुत हल्के सफ़ेद रंग का बैकग्राउंड कलर होता है. इसके बाद, गहरे रंग वाली मीडिया क्वेरी में, कस्टम प्रॉपर्टी को नए रंग असाइन किए जाते हैं, ताकि बैकग्राउंड गहरे रंग का और टेक्स्ट हल्के रंग का हो.

:root {
  /* a base brand color */
  --brand: #0af;

  /* very dark brand blue */
  --text1: color-mix(in oklab, var(--brand) 25%, black);
  --text2: color-mix(in oklab, var(--brand) 40%, black);

  /* very bright brand white */
  --surface1: color-mix(in oklab, var(--brand) 5%, white);
}

@media (prefers-color-scheme: dark) {
  :root {
    --text1: color-mix(in oklab, var(--brand) 15%, white);
    --text2: color-mix(in oklab, var(--brand) 40%, white);
    --surface1: color-mix(in oklab, var(--brand) 5%, black);
  }
}

ब्रैंड के रंग में सफ़ेद या काला रंग मिलाकर, ये सभी रंग बनाए जाते हैं.

इंटरमीडिएट कलर स्कीम

इसमें हल्के और गहरे रंग वाली थीम के अलावा, अन्य थीम भी जोड़ी जा सकती हैं. यहाँ दिए गए डेमो में, रेडियो ग्रुप में किए गए बदलावों से एचटीएमएल टैग [color-scheme="auto"] पर मौजूद एट्रिब्यूट अपडेट हो जाता है. इसके बाद, सिलेक्टर किसी रंग की थीम को शर्तों के हिसाब से लागू कर पाते हैं.

इस इंटरमीडिएट डेमो में, रंग वाली थीम की तकनीक भी दिखाई गई है. इसमें थीम के सभी रंग :root में दिए गए हैं. इससे, सभी को एक साथ देखना और ज़रूरत पड़ने पर उनमें बदलाव करना आसान हो जाता है. स्टाइलशीट में बाद में, वैरिएबल का इस्तेमाल उसी तरह किया जा सकता है जिस तरह उन्हें तय किया गया है. इससे, रंगों में बदलाव करने के लिए स्टाइलशीट में ढूंढने की ज़रूरत नहीं पड़ती, क्योंकि वे सभी शुरुआती :root ब्लॉक में मौजूद होते हैं.

इस्तेमाल के ज़्यादा दिलचस्प उदाहरण

ऐना ट्यूडर ने कुछ उदाहरणों के साथ एक बेहतरीन डेमो दिया है, जिससे इस बारे में ज़्यादा जानकारी मिलती है:

DevTools की मदद से color-mix() को डीबग करना

Chrome DevTools, color-mix() के साथ बेहतरीन तरीके से काम करता है. यह सिंटैक्स को पहचानता है और उसे हाइलाइट करता है. साथ ही, स्टाइल पैन में स्टाइल के ठीक बगल में मिक्स की झलक दिखाता है. इससे आपको दूसरे रंग चुनने की सुविधा मिलती है.

DevTools में यह कुछ इस तरह दिखेगा:

म्यूज़िक मिक्स करने का आनंद लें!