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

Adam Argyle

सीएसएस 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 ने बेहतरीन काम किया है रंग CSS विशिष्टता से आगे रहते हुए काम करते हैं. हालांकि, इस तरह के यह सीएसएस में रंगों को मिलाने का एक वास्तविक तरीका है. पास जाने के लिए आपको आंशिक गणित करना होगा रंग मान. यहां एक उदाहरण दिया गया है, जिसमें बताया गया है कि सीएसएस, मौजूदा समय में मिलाए जा रहे इस्तेमाल को कैसे सिम्युलेट कर सकती है:

HSL से पहले

.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 पर रंगों को फीका नहीं किया जाता है.

डेमो आज़माएं

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

डेमो आज़माएं

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 ब्लॉक में मौजूद होते हैं.

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

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

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

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

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

सभी को मिक्स करने के लिए शुभकामनाएं!