सीएसएस 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() का इस्तेमाल करके, कलर स्पेस के इफ़ेक्ट के बारे में सीखना, ग्रेडिएंट बनाने के लिए बेहतरीन जानकारी है. कलर 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 दोनों अच्छे नतीजे देते हैं, जबकि एसआरजीबी और ओलैबी असंतृप्त रंग दिखाते हैं.
अगर आपको एक जैसा और आसान कॉन्टेंट चाहिए, तो oklab का इस्तेमाल करें. यहां दिए गए डेमो में, नीला और काला, एचएसएल, और एचडब्ल्यूबी को मिलाकर एचएसएल और एचडब्ल्यूबी रंग बहुत वाइब्रेंट और रंग शिफ़्ट हुए हैं. वहीं, एसआरजीबी और ओक्लाब की मदद से गहरे नीले रंग दिखते हैं.
color-mix() प्लेग्राउंड के साथ पांच मिनट बिताएं और अलग-अलग रंगों
और स्पेस को आज़माएं, और आपको हर स्पेस के फ़ायदे दिखने लगेंगे. साथ ही, हम उम्मीद करते हैं कि हमें कलर स्पेस के बारे में ज़्यादा दिशा-निर्देश मिलेंगे, क्योंकि हम सभी अपने यूज़र इंटरफ़ेस में उसे अपनी क्षमता के हिसाब से अडजस्ट करते हैं.
रंग वाले इंटरपोलेशन का तरीका बदलना
अगर आपने बेलनाकार कलर स्पेस मिलाना चुना है, खास तौर पर h ह्यू चैनल वाला कोई भी कलर स्पेस जो ऐंगल को स्वीकार करता हो, तो यह बताया जा सकता है कि इंटरपोलेशन shorter, longer, decreasing, और increasing होगा या नहीं. अगर आपको और जानना है, तो इस एचडी कलर गाइड में अच्छे से बताया गया है.
यहां नीले और सफ़ेद रंग के मिक्स का एक जैसा उदाहरण दिया गया है, लेकिन इस बार, यह सिर्फ़ बेलनाकार स्पेस में है. इसमें अलग-अलग रंगों वाले इंटरपोलेशन तरीके हैं.
यहां एक और कोडपेन दिया गया है, जिसे मैंने रंग वाले इंटरपोलेशन को विज़ुअलाइज़ करने में मदद करने के लिए बनाया था. खास तौर पर, यह ग्रेडिएंट ग्रेडिएंट के लिए. मेरा मानना है कि इससे आपको यह समझने में मदद मिलेगी कि जब 'रंग' के बारे में बताया गया है, तो कलर स्पेस किस तरह मिक्स नतीजे देते हैं, इसे एक स्टडी करके देखें!
अलग-अलग रंग के सिंटैक्स के साथ मिलाना
अब तक हमने रंग नाम वाले सीएसएस, जैसे कि 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 घटाकर सेट किया जाता है.
आखिरी नियम थोड़ा कम साफ़ है. तब क्या होगा अगर दोनों रंगों के लिए प्रतिशत दिए गए हों और उनका योग 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 में कुछ ऐसा दिखेगा:
आप सभी का स्वागत है!