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

एडम आर्गाइल

Twitter GitHub

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

ब्राउज़र सहायता

• 111
• 111
• 113
• 16.2

सोर्स

किसी रंग को गहरा, हल्का या फीका करने के लिए, डेवलपर ने 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() की मदद से कलर स्पेस के असर के बारे में जानना, ग्रेडिएंट बनाने के लिए बहुत अच्छा होता है. कलर 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 दोनों को मिला-जुला नतीजा मिलता है, जबकि sआरजीबी और oklab से असंतृप्त रंग मिलते हैं.

डेमो आज़माएं

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

डेमो आज़माएं

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

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

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

ध्यान दें: अगर कलर स्पेस बेलनाकार है, तो color-mix() के प्लेग्राउंड में एक और ड्रॉपडाउन जोड़ा जाएगा. मिक्स पर पड़ने वाले इफ़ेक्ट देखने के लिए, वहां जाकर इसे चलाया जा सकता है.

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

डेमो आज़माएं

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

चेतावनी: बिना बेलनाकार कलर स्पेस के लिए, ह्यू इंटरपोलेशन का तरीका देना color-mix() में सिंटैक्स की गड़बड़ी है.

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

अब तक हमने 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 ब्लॉक में शामिल होते हैं.

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

Ana Tudor का एक बेहतरीन डेमो है. इसमें स्टडी के लिए, ये कुछ उदाहरण दिए गए हैं:

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

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

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

आप सभी को एक साथ गाने का आनंद लें!