ज़्यादा रंगों और नए स्पेस को ऐक्सेस करें

यह दस्तावेज़, हाई-डेफ़िनिशन सीएसएस की कलर गाइड का हिस्सा है.

सीएसएस कलर 4, सीएसएस और कलर के लिए कई नई सुविधाओं और टूल की जानकारी देता है. नीचे दिया गया कोडपेन सभी नए और पुराने कलर सिंटैक्स को एक साथ दिखाता है:

क्लासिक कलर स्पेस का रीकैप पढ़ें.

लेवल 4 स्पेसिफ़िकेशन में, रंगों को देखने के लिए 12 नए कलर स्पेस शामिल किए गए हैं. पहले इनमें बताए गए सात नए गैमट शामिल किए गए थे:

वेब के लिए नए कलर स्पेस का इस्तेमाल करें

नीचे दिए गए कलर स्पेस, एसआरजीबी की तुलना में बड़े गैमट को ऐक्सेस करने की सुविधा देते हैं. डिसप्ले-p3 कलर स्पेस में आरजीबी के मुकाबले दोगुना कलर मिलते हैं. वहीं, Rec2020 पर Display-p3 के मुकाबले करीब दोगुना रंग उपलब्ध हैं. इनमें कई रंग हैं!

अलग-अलग रंगों वाले पांच स्टैक किए गए ट्राईऐंगल, जो हर नए कलर स्पेस के साथ संबंध और साइज़ को दिखाने में मदद करते हैं.

color() फ़ंक्शन

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

  • 111
  • 111
  • 113
  • 15

सोर्स

नए color() फ़ंक्शन का इस्तेमाल, ऐसे किसी भी कलर स्पेस के लिए किया जा सकता है जो R, G, और B चैनलों वाले कलर के बारे में बताता है. color() सबसे पहले कलर स्पेस पैरामीटर लेता है. इसके बाद, आरजीबी के लिए चैनल वैल्यू की एक सीरीज़ और वैकल्पिक रूप से कुछ ऐल्फ़ा वर्शन लेता है.

आपको दिखेगा कि कई नए कलर स्पेस इस फ़ंक्शन का इस्तेमाल करते हैं, क्योंकि rgb, srgb, hsl, hwb वगैरह जैसे खास फ़ंक्शन को एक लंबी सूची में बदला जा रहा था. साथ ही, कलरस्पेस को पैरामीटर बनाने में आसानी थी.

फ़ायदे

  • आरजीबी चैनलों का इस्तेमाल करने वाले कलर स्पेस को ऐक्सेस करने के लिए सामान्य जगह.
  • इसे किसी भी बड़े गैमट आरजीबी आधारित कलर स्पेस तक बढ़ाया जा सकता है.

नुकसान

  • HSL, HWB, LCH, okLCH या okLAB के साथ काम नहीं करता
.valid-css-color-function-colors {
  --srgb: color(srgb 1 1 1);
  --srgb-linear: color(srgb-linear 100% 100% 100% / 50%);
  --display-p3: color(display-p3 1 1 1);
  --rec2020: color(rec2020 0 0 0);
  --a98-rgb: color(a98-rgb 1 1 1 / 25%);
  --prophoto: color(prophoto-rgb 0% 0% 0%);
  --xyz: color(xyz 1 1 1);
}

color() के ज़रिए sRGB

गैमट के साइज़ को विज़ुअलाइज़ करने के लिए, sRGB ट्राईऐंगल अकेला पूरी तरह से ओपेक है.

यह कलरस्पेस, rgb() जैसी सुविधाएं देता है. इसके अलावा, यह 0 से 1 के बीच दशमलव दिखाने की सुविधा भी देता है. इसका इस्तेमाल 0% से 100% के बीच किया जाता है.

फ़ायदे

  • इस कलर स्पेस की रेंज के साथ करीब सभी डिसप्ले काम करते हैं.
  • डिज़ाइन टूल से जुड़ी सहायता.

नुकसान

  • देखने के हिसाब से लीनियर नहीं है (जैसे कि lch())
  • कोई चौड़ा गैमट रंग नहीं.
  • ग्रेडिएंट अक्सर डेड ज़ोन से गुज़रते हैं.
.valid-css-srgb-colors {
  --percents: color(srgb 34% 58% 73%);
  --decimals: color(srgb .34 .58 .73);

  --percents-with-opacity: color(srgb 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb none none none);
  --empty-channels-black2: color(srgb);
}

color() {#linear-s रहेगा} के ज़रिए लीनियर sRGB

गैमट के साइज़ को विज़ुअलाइज़ करने के लिए, sRGB ट्राईऐंगल अकेला पूरी तरह से ओपेक है.

आरजीबी के बजाय यह लीनियर विकल्प, चैनल की इंटेंसिटी के अनुमान लगाता है.

फ़ायदे

  • आरजीबी चैनलों का सीधा ऐक्सेस, जो गेम इंजन या लाइट शो जैसे कामों के लिए आसान है.

नुकसान

  • ये कैमरे एक-दूसरे से मिलते-जुलते नहीं होते.
  • ब्लैक एंड व्हाइट किनारों पर भरे होते हैं.
.valid-css-srgb-linear-colors {
  --percents: color(srgb-linear 34% 58% 73%);
  --decimals: color(srgb-linear .34 .58 .73);

  --percents-with-opacity: color(srgb-linear 34% 58% 73% / 50%);
  --decimals-with-opacity: color(srgb-linear .34 .58 .73 / .5);

  /* empty */
  --empty-channels-black: color(srgb-linear none none none);
  --empty-channels-black2: color(srgb-linear);
}

ग्रेडिएंट पर बाद में विस्तार से चर्चा की जाती है, लेकिन उनके अंतर को समझाने के लिए srgb और linear-srgb ब्लैक से व्हाइट ग्रेडिएंट देखना सही होता है:

आसानी से तुलना करने के लिए, दो पंक्तियों में दो हॉरिज़ॉन्टल ग्रेडिएंट दिखाए गए हैं. एसआरजीबी का ग्रेडिएंट बिलकुल आसान है, जैसा कि हमने कई सालों से देखा है. हालांकि, sRGB-लीनियर ग्रेडिएंट पहले 5% में बहुत गहरे रंग का और आखिरी 10% लेवल पर बहुत हल्का होता है. इसलिए, बीच का हिस्सा लंबे समय तक बहुत हल्का स्लेटी रंग का होता है.

एलसीएच

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

  • 111
  • 111
  • 113
  • 15

सोर्स

LCH, आरजीबी गैमट के बाहर कलर ऐक्सेस करने के लिए सिंटैक्स उपलब्ध कराता है. यही पहली चीज़ है, जिससे डिसप्ले के लिए अलग-अलग रंग को तैयार करना बहुत आसान हो गया है. इसकी वजह यह है कि CIE स्पेस के रंग (lch, oklch, lab, oklab), इंसान के शरीर में दिखने वाले पूरी तरह से दिखने वाले कलर स्पेक्ट्रम को दिखा सकते हैं.

इस कलरस्पेस को इंसानी नज़रिए के आधार पर तैयार किया जाता है और इसमें किसी भी रंग वगैरह के बारे में बताने के लिए सिंटैक्स की सुविधा मिलती है. LCH चैनल हैं, लाइटनेस, क्रोमा, और कलर. ह्यू एक एंगल है, जैसे कि एचएसएल और एचडब्ल्यूबी में. रोशनी 0 और 100 के बीच एक वैल्यू होती है. यह लोगों को ध्यान में रखकर बनाया जाता है. क्रोमा, रंग को गहरा या फीका करने की तरह होता है. यह 0 से 230 तक हो सकता है. हालांकि, यह तकनीकी रूप से बिना किसी सीमा के होता है.

फ़ायदे

  • रंग में बदलाव के अनुमान, आम तौर पर लीनियर होने की वजह से होते हैं (oklch देखें).
  • जाने-पहचाने चैनलों का इस्तेमाल करता है.
  • इसमें अक्सर वाइब्रेंट ग्रेडिएंट होते हैं.

नुकसान

  • कई तरह के काम करना आसान है.
  • बहुत कम मामलों में, कलर शिफ़्ट को रोकने के लिए, ग्रेडिएंट में बीच में बदलाव करने वाले पॉइंट की ज़रूरत पड़ सकती है.
.valid-css-lch-colors {
  --percent-and-degrees: lch(58% 32 241deg);
  --just-the-degrees: lch(58 32 241deg);
  --minimal: lch(58 32 241);

  --percent-opacity: lch(58% 32 241 / 50%);
  --decimal-opacity: lch(58% 32 241 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lch(100 none none);
  --empty-channels-black: lch(none none none);
}

लैब

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

  • 111
  • 111
  • 113
  • 15

सोर्स

सीआईई गैमट को ऐक्सेस करने के लिए एक और कलर स्पेस बनाया गया है, जिसमें साफ़ तौर पर लीनियर लाइटनेस (L) डाइमेंशन को फिर से शामिल किया गया है. लैब में ए और बी, इंसान के कलर विज़न के खास ऐक्सिस को दिखाते हैं: लाल-हरा, और नीला-पीला. अगर A का कोई पॉज़िटिव मान दिया जाता है, तो उसमें लाल रंग जुड़ जाता है. वहीं, 0 से कम होने पर वह हरा जुड़ जाता है. जब B को कोई पॉज़िटिव नंबर दिया जाता है, तो उसमें पीला रंग जोड़ दिया जाता है. वहीं, नेगेटिव वैल्यू नीले रंग की तरफ़ होती हैं.

फ़ायदे

  • साफ़ तौर पर एक जैसा ग्रेडिएंट.
  • हाई डाइनैमिक रेंज.

नुकसान

  • रंग में बदलाव की संभावना.
  • वैल्यू पढ़ते समय, उन्हें लिखना या किसी रंग का अनुमान लगाना मुश्किल होता है.
.valid-css-lab-colors {
  --percent-and-degrees: lab(58% -16 -30);
  --minimal: lab(58 -16 -30);

  --percent-opacity: lab(58% -16 -30 / 50%);
  --decimal-opacity: lab(58% -16 -30 / .5);

  /* chromaless and hueless */
  --empty-channels-white: lab(100 none none);
  --empty-channels-black: lab(none none none);
}

ओक्लाहोमा

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

  • 111
  • 111
  • 113
  • 15.4

सोर्स

यह कलर स्पेस, एलसीएच के हिसाब से सही है. LCH की तरह, (L) अभी भी विज़ुअल के हिसाब से लीनियर लाइट, क्रोमा के लिए 'C' और 'ह्यू' के लिए H को दिखाता है.

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

फ़ायदे

  • नीले और बैंगनी रंगों के साथ काम करने में कोई अचरज नहीं.
  • साफ़ तौर पर एक-दूसरे की रोशनी में चमक.
  • जाने-पहचाने चैनलों का इस्तेमाल करता है.
  • हाई डाइनैमिक रेंज.
  • Evil Martions की ओर से, आधुनिक कलर पिकर है.

नुकसान

  • कई तरह के काम करना आसान है.
  • नया और काफ़ी हद तक एक्सप्लोर किया गया.
  • कुछ ही कलर पिकर.
.valid-css-oklch-colors {
  --percent-and-degrees: oklch(64% .1 233deg);
  --just-the-degrees: oklch(64 .1 233deg);
  --minimal: oklch(64 .1 233);

  --percent-opacity: oklch(64% .1 233 / 50%);
  --decimal-opacity: oklch(64% .1 233 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklch(100 none none);
  --empty-channels-black: oklch(none none none);
}

ओक्लाब

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

  • 111
  • 111
  • 113
  • 15.4

सोर्स

यह स्पेस, LAB के हिसाब से सुधार करने वाला है. इसका दावा इमेज प्रोसेसिंग की क्वालिटी के लिए ऑप्टिमाइज़ किए गए स्पेस के तौर पर किया जाता है. हमारे लिए, सीएसएस में इसका मतलब है ग्रेडिएंट और कलर फ़ंक्शन में बदलाव की क्वालिटी.

फ़ायदे

  • ऐनिमेशन और इंटरपोलेशन के लिए डिफ़ॉल्ट स्पेस.
  • साफ़ तौर पर एक-दूसरे की रोशनी में चमक.
  • LAB जैसी कोई ह्यू शिफ़्ट नहीं.
  • साफ़ तौर पर एक जैसा ग्रेडिएंट.

नुकसान

  • नया और काफ़ी हद तक एक्सप्लोर किया गया.
  • कुछ ही कलर पिकर.
.valid-css-oklab-colors {
  --percent-and-degrees: oklab(64% -.1 -.1);
  --minimal: oklab(64 -.1 -.1);

  --percent-opacity: oklab(64% -.1 -.1 / 50%);
  --decimal-opacity: oklab(64% -.1 -.1 / .5);

  /* chromaless and hueless */
  --empty-channels-white: oklab(100 none none);
  --empty-channels-black: oklab(none none none);
}

डिसप्ले P3

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

  • 111
  • 111
  • 113
  • 15

सोर्स

गैमट के साइज़ को विज़ुअलाइज़ करने के लिए, Display P3 ट्राईऐंगल सिर्फ़ एक पूरी तरह से ओपेक है. यह सबसे छोटे साइज़ से दूसरे की तरह लग रहा है.

डिसप्ले P3 गैमट और कलर स्पेस तब से लोकप्रिय हो गए हैं, जब Apple ने 2015 से इसे अपने iMac पर इस्तेमाल किया है. Apple ने 2016 से, सीएसएस के ज़रिए वेब पेजों में Display-p3 की सुविधा भी उपलब्ध कराई है. यह किसी भी दूसरे ब्राउज़र से पांच साल पहले काम करता था. अगर यह एसआरजीबी से आता है, तो स्टाइल को ज़्यादा डाइनैमिक रेंज पर ले जाने के दौरान, काम शुरू करने के लिए यह एक बेहतरीन कलर स्पेस है.

फ़ायदे

  • बेहतरीन सपोर्ट, जिसे एचडीआर डिसप्ले के लिए बेसलाइन माना जाता है.
  • sRGB की तुलना में 50% ज़्यादा रंग.
  • DevTools बेहतरीन कलर पिकर है.

नुकसान

  • आखिर में, यह Rec2020 और CIE के स्पेस को पार कर जाएगा.
.valid-css-display-p3-colors {
  --percents: color(display-p3 34% 58% 73%);
  --decimals: color(display-p3 .34 .58 .73);

  --percent-opacity: color(display-p3 34% 58% 73% / 50%);
  --decimal-opacity: color(display-p3 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(display-p3 none none none);
  --empty-channels-black2: color(display-p3);
}

Rec2020

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

  • 111
  • 111
  • 113
  • 15

सोर्स

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

Rec2020, UHDTV (अल्ट्रा-हाई-डेफ़िनिशन टेलिविज़न) पर ले जाने की कोशिश कर रहा है. इस वर्शन में 4K और 8K मीडिया में कई तरह के रंगों को इस्तेमाल किया जा सकता है. Rec2020 आरजीबी पर आधारित एक और तरह का गैमट है, जो Display-p3 से बड़ा है. हालांकि, लोग इसे Display P3 जितना आम तौर पर नहीं देखते.

फ़ायदे

  • अल्ट्रा एचडी कलर.

नुकसान

  • हालांकि, उपभोक्ताओं के बीच इतनी आम नहीं है (अभी तक).
  • यह आम तौर पर हैंडहेल्ड या टैबलेट में नहीं मिलता है.
.valid-css-rec2020-colors {
  --percents: color(rec2020 34% 58% 73%);
  --decimals: color(rec2020 .34 .58 .73);

  --percent-opacity: color(rec2020 34% 58% 73% / 50%);
  --decimal-opacity: color(rec2020 .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(rec2020 none none none);
  --empty-channels-black2: color(rec2020);
}

A98 आरजीबी {#a98-signin}

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

  • 111
  • 111
  • 113
  • 15

सोर्स

गैमट के साइज़ को विज़ुअलाइज़ करने के लिए, सिर्फ़ A98 ट्राईऐंगल पूरी तरह से ओपेक है. यह बीच वाले आकार में एक त्रिभुज की तरह दिखता है.

Adobe 1998 RGB का शॉर्ट वीडियो, Adobe ने A98 RGB को CMYK प्रिंटर से हासिल किए जा सकने वाले ज़्यादातर रंगों को दिखाने के लिए बनाया है. यह sRGB की तुलना में ज़्यादा रंग देता है, खास तौर पर हरे-पीले और हरे रंग में.

फ़ायदे

  • ये sRGB और Display P3 के कलर स्पेस से बड़े होते हैं.

नुकसान

  • ऐसी जगह नहीं है जहां डिजिटल डिज़ाइनर काम करते हों.
  • बहुत से लोग सीएमवाईके से पैलेट पोर्ट नहीं कर रहे हैं.
.valid-css-a98-rgb-colors {
  --percents: color(a98-rgb 34% 58% 73%);
  --decimals: color(a98-rgb .34 .58 .73);

  --percent-opacity: color(a98-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(a98-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(a98-rgb none none none);
  --empty-channels-black2: color(a98-rgb);
}

ProPhotos आरजीबी

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

  • 111
  • 111
  • 113
  • 15

सोर्स

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

Kodak का बनाया गया चौड़ा गैमट स्पेस, खास तौर पर उसमें बहुत सारे प्राइमरी कलर को शामिल करता है. साथ ही, रोशनी बदलने पर इसमें कम से कम ह्यू शिफ़्ट होते हैं. यह दावा करते हैं कि असल दुनिया की सतह के रंग 100% रंग को कवर करते हैं, जैसा कि 1980 में माइकल पॉइंटर ने बताया.

फ़ायदे

  • रोशनी कम करते समय, रंग में कम से कम बदलाव होता है.
  • वाइब्रेंट मुख्य रंग.

नुकसान

  • इसके करीब 13% रंग काल्पनिक हैं. इसका मतलब है कि ये रंग इंसानों की नज़रों में नहीं आते.
.valid-css-prophoto-rgb-colors {
  --percents: color(prophoto-rgb 34% 58% 73%);
  --decimals: color(prophoto-rgb .34 .58 .73);

  --percent-opacity: color(prophoto-rgb 34% 58% 73% / 50%);
  --decimal-opacity: color(prophoto-rgb .34 .58 .73 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(prophoto-rgb none none none);
  --empty-channels-black2: color(prophoto-rgb);
}

XYZ, XYZ-d50, XYZ-d65

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

  • 111
  • 111
  • 113
  • 15

सोर्स

CIE XYZ कलर स्पेस में वे सभी कलर शामिल होते हैं जो किसी व्यक्ति को औसत दृष्टि वाले व्यक्ति को दिखते हैं. इसलिए, दूसरे कलर स्पेस के लिए इसे स्टैंडर्ड रेफ़रंस के तौर पर इस्तेमाल किया जाता है. Y ल्यूमिनेंस है, जबकि X और Z, दिए गए Y ल्यूमिनेंस के अंदर संभावित क्रोमा हैं.

d50 और d65 के बीच का अंतर व्हाइट पॉइंट है, जहां d50 d50 व्हाइट पॉइंट का इस्तेमाल करता है और d65, d65 के व्हाइट पॉइंट का इस्तेमाल करता है.

मुख्य शब्द: व्हाइट पॉइंट किसी कलर स्पेस का एट्रिब्यूट है. यह वह जगह है जहां स्पेस के अंदर ट्रू व्हाइट मौजूद होता है. इलेक्ट्रॉनिक स्क्रीन के लिए, D65 सबसे ज़्यादा इस्तेमाल होने वाला व्हाइट पॉइंट है और कम से कम 6500 केल्विन का मतलब है. कलर कन्वर्ज़न में यह ज़रूरी है कि व्हाइट पॉइंट मैच करते हों, ताकि कलर टेंपरेचर (गहरापन या ठंडक) पर कोई असर न पड़े.

फ़ायदे

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

नुकसान

  • lch, oklch, lab, और oklab की तरह, ये विषय एक-दूसरे से अलग होते हैं.
.valid-css-xyz-colors {
  --percents: color(xyz 22% 26% 53%);
  --decimals: color(xyz .22 .26 .53);

  --percent-opacity: color(xyz .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz none none none);
  --empty-channels-black2: color(xyz);
}

.valid-css-xyz-d50-colors {
  --percents: color(xyz-d50 22% 26% 53%);
  --decimals: color(xyz-d50 .22 .26 .53);

  --percent-opacity: color(xyz-d50 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d50 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d50 none none none);
  --empty-channels-black2: color(xyz-d50);
}

.valid-css-xyz-d65-colors {
  --percents: color(xyz-d65 22% 26% 53%);
  --decimals: color(xyz-d65 .22 .26 .53);

  --percent-opacity: color(xyz-d65 .22 .26 .53 / 50%);
  --decimal-opacity: color(xyz-d65 .22 .26 .53 / .5);

  /* chromaless and hueless */
  --empty-channels-black: color(xyz-d65 none none none);
  --empty-channels-black2: color(xyz-d65);
}

पसंद के हिसाब से कलर स्पेस

सीएसएस कलर 5 स्पेसिफ़िकेशन में, ब्राउज़र को पसंद के मुताबिक कलर स्पेस सिखाने का पाथ भी है. यह एक आईसीसी प्रोफ़ाइल है जो ब्राउज़र को बताती है कि रंगों को कैसे ठीक किया जाए.

@color-profile --foo {
  src: url(path/to/custom.icc);
}

लोड होने के बाद, color() फ़ंक्शन से इस कस्टम प्रोफ़ाइल के रंगों को ऐक्सेस करें और इसके लिए चैनल मान तय करें.

.valid-css-color-from-a-custom-profile {
  background: color(--foo 1 0 0);
}

कलर इंटरपोलेशन

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

ग्रेडिएंट के साथ, इंटरपोलेशन एक आकार के साथ रंगों की सीरीज़ होती है. ऐनिमेशन के साथ, यह समय के साथ रंगों की एक शृंखला होती है.

@keyframes bg {
  0%, 100% {
    background: orange;
  }
  25% {
    background: magenta;
  }
  50% {
    background: lime;
  }
  75% {
    background: cyan;
  }
}

.circle {
  animation: bg 5s ease-in-out infinite;
}

ग्रेडिएंट के साथ, बीच में रंग एक साथ दिखाए जाते हैं:

कलर इंटरपोलेशन में नया क्या है

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

.classic-gradient-in-srgb {
  background: linear-gradient(to right, blue, white);
}

.new-gradient-in-hsl {
  background: linear-gradient(in hsl to right, blue, white);
}

फिर क्या होता है अगर एक स्पेस के रंग को पूरी तरह से अलग स्पेस में बदलें:

.gradient {
  /* oklab will be the common space */
  background: linear-gradient(to right, lch(29.6 131 301), hsl(330 100% 50%));
}

.lch {
  /* lch is specified */
  background: linear-gradient(in lch to right, lch(29.6 131 301), hsl(330 100% 50%));
}

आप सौभाग्य से, रंग 4 की जानकारी में ब्राउज़र के लिए निर्देश दिए गए हैं कि इन क्रॉस कलर स्पेस इंटरपोलेशन को कैसे मैनेज किया जाए. .gradient के लिए, ब्राउज़र अलग-अलग कलर स्पेस देखते हैं और डिफ़ॉल्ट कलर स्पेस oklab का इस्तेमाल करते हैं.

आपको लग सकता है कि ब्राउज़र lch को कलर स्पेस के तौर पर इस्तेमाल करेगा, क्योंकि यह पहला रंग है, लेकिन ऐसा नहीं करता. इसलिए, मैं दूसरी तुलना का ग्रेडिएंट दिखाता हूं .lch. .lch ग्रेडिएंट, lch कलर स्पेस का ग्रेडिएंट है.

16-बिट वाले रंगों की वजह से, कम बैंडिंग की सुविधा

इस रंग के काम करने से पहले, सभी चार चैनलों को दिखाने के लिए, सभी रंगों को एक 32-बिट पूर्णांक में सेव किया जाता था; लाल, हरा, नीला, और ऐल्फ़ा. यह हर चैनल के लिए 8-बिट और 2^ 24 संभावित रंग हैं (ऐल्फ़ा को अनदेखा करते हुए). 2 ^ 24 = 1,67,77,216, "लाखों रंग."

रंग के काम करने के बाद, चार 16-बिट फ़्लोटिंग पॉइंट वैल्यू होती हैं. हर चैनल का फ़्लोट एक साथ होता है. यह कुल डेटा का 64-बिट होता है, जिससे लाखों से भी ज़्यादा रंग आते हैं.

एचडी कलर में काम करने के लिए यह तरीका ज़रूरी है. इससे उन रंगों की जानकारी बढ़ जाती है जिन्हें सेव किया जा सकता है. इसका अच्छा असर यह है कि ग्रेडिएंट में ब्राउज़र के इस्तेमाल के लिए ज़्यादा रंग उपलब्ध हैं.

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

इसमें छह पैनल दिखाए जाते हैं, हर पैनल में अलग-अलग ग्रेडिएंट बैंडिंग होती है. साथ ही, कंप्रेस करने और गहराई की गहराई के बारे में थोड़ी जानकारी होती है.
इमेज सोर्स

कंट्रोल इंटरपोलेशन

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

linear-gradient(to right, #94e99c, #e06242)
हरे से लाल रंग की लाइन वाला सर्कुलर ग्रेडिएंट, जो सर्कल को पूरी करता है और सफ़ेद जगहों से गुज़रता है.
(मॉक डेमोंस्ट्रेशन)
एचएसएल सिलेंडर का टॉप-डाउन व्यू, जिसमें कलर स्टॉप के बीच में लाइन है

ऊपर दी गई ग्रेडिएंट लाइन, हरे रंग के बीच से सीधे लाल रंग तक जाती है. यह लाइन, कलर स्पेस के बीच से गुज़रती है. हालांकि, ऊपर बताई गई जानकारी शुरुआती जानकारी में मदद करने के लिए बहुत अच्छी है, लेकिन इसका मतलब यह नहीं है कि असल में क्या होता है. यहां दिए गए कोडपेन में ग्रेडिएंट दिया गया है. इसका बीच का हिस्सा साफ़ तौर पर सफ़ेद नहीं है, जैसा कि मॉक डेमोंस्ट्रेशन में दिखाया गया है.

हालांकि, ग्रेडिएंट के बीच वाले हिस्से की आवाज़ कम हो गई है. इसकी वजह यह है कि सबसे ज़्यादा चमकीले रंग, कलर स्पेस के आकार के किनारों पर होते हैं, न कि बीच में जहां से इंटरपोलेशन को पास किया गया. इसे आम तौर पर, "डेड ज़ोन" कहा जाता है. इसे ठीक करने या इसे ठीक करने के कुछ तरीके हैं.

प्रयोग में नहीं ज़ोन से बचने के लिए ज़्यादा ग्रेडिएंट स्टॉप तय करना

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

एरिक कैनेडी का बनाया हुआ एक ग्रेडिएंट टूल है, जो अतिरिक्त कलर स्टॉप को कैलकुलेट करता है. इससे आपको उन रंगीन जगहों से भी बचा जा सकता है जो रंगों की तरफ़ आकर्षित होती हैं. इसका इस्तेमाल करके, पहले उदाहरण से एक जैसे कलर पास करना, लेकिन कलर इंटरपोलेशन को एचएसएल में बदलना, यह ये नतीजे देता है:

linear-gradient(90deg, #94e99c, #99e789, #ace67d, #c4e472, #e2e366, #e2bf5a, #e1934e, #e06242);
एक सर्कुलर ग्रेडिएंट, जिसके बीच में एक लाइन घूमती हुई है. साथ ही, रास्ते में कई ग्रेडिएंट स्टॉप हैं, जो इसे बीच से दूर ले जाती हैं.
(मॉक डेमो)
एचएसएल सिलेंडर का टॉप डाउन व्यू, जिसकी घुमावदार लाइन में नौ रंगों के स्टॉप हैं

निर्देशों वाले स्टॉप पॉइंट के साथ, इंटरपोलेशन अब सीधी लाइन नहीं है. हालांकि, यह मृत ज़ोन के चारों ओर घूमता दिखता है, जिससे संतृप्ति को बनाए रखने में मदद मिलती है, जिससे ग्रेडिएंट और ज़्यादा चमकीला होता है.

हालांकि, यह टूल काफ़ी अच्छा काम कर रहा है, लेकिन क्या होगा अगर आप सीधे सीएसएस से इसी तरह का या ज़्यादा कंट्रोल कर सकें?

कलर इंटरपोलेशन को डायरेक्ट करना

कलर 4 में, ह्यू इंटरपोलेशन रणनीति को कंट्रोल करने की सुविधा जोड़ी गई है और यह खत्म हो चुके ज़ोन (:wink:) को ध्यान में रखते हुए एक नया तरीका है. कलर ऐंगल के बारे में सोचें और दो स्टॉप वाले ग्रेडिएंट पर विचार करें, जिससे सिर्फ़ ऐंगल बदलता हो. उदाहरण के लिए, ह्यू को 140deg से 240deg में शिफ़्ट करना.

छोटे बनाम लंबे रंग वाला इंटरपोलेशन

ग्रेडिएंट डिफ़ॉल्ट रूप से उस shorter रूट पर ले जाता है जिसे longer रूट लेने के लिए तय किया जाता है. ह्यू इंटरपोलेशन के विकल्प, ऐंगल रोटेशन को डायरेक्ट करते हैं, जैसे कि किसी व्यक्ति को दाएं के बजाय बाएं मुड़ने के लिए कहना (हे, छोटा भीम):

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

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

ह्यू इंटरपोलेशन को बढ़ाना बनाम कम होना

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

ऊपर दिए गए कोडपेन ने उम्मीद के मुताबिक नतीजे दिखाने के लिए ColorJS का इस्तेमाल किया. JavaScript लाइब्रेरी के बिना भी ऐसा ही इफ़ेक्ट पाने के लिए, इस सीएसएस को लिखा जाएगा:

.longer-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl longer hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

.decreasing-hue-interpolation-in-css {
  background: linear-gradient(
    to right in hsl decreasing hue,
    hsl(180deg 100% 75%),
    hsl(240deg 100% 75%)
  );
}

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

अलग-अलग कलर स्पेस के ग्रेडिएंट

हर कलर स्पेस के आकार और रंग अलग-अलग होते हैं. इनके नतीजे अलग-अलग होते हैं. नीचे दिए गए उदाहरणों में देखें कि हर कलर स्पेस, खास तौर पर नीले से सफ़ेद रंग में अलग-अलग तरह से कैसे काम करता है. ध्यान दें कि बीच में कितने बैंगनी हो जाते हैं; इसे इंटरपोलेशन के दौरान ह्यू शिफ़्ट कहा जाता है.

इन जगहों पर कुछ ग्रेडिएंट दूसरे की तुलना में ज़्यादा वाइब्रेंट होते हैं या डेड ज़ोन में कम यात्रा करते हैं. lab जैसे स्पेस, रंग को गहरा या फीका करने में मदद करते हैं. वहीं, hwb() जैसी जगहों में रंग लिखने के लिए, इंसानों के लिए ऑप्टिमाइज़ की गई जगहों पर इसका इस्तेमाल किया जाता है.

.hwb {
  background: linear-gradient(to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(to right, lab(30 59.4 -96), lab(80 -64 36.2));
}

ऊपर दिए गए डेमो से भले ही नतीजे बेहतर हों, लेकिन लैब के ज़रिए जानकारी एक जैसी दिखाई जाती है. लैब का सिंटैक्स पढ़ना आसान नहीं है, लेकिन आरजीबी या एचएसएल से आने वाले नेगेटिव नंबर बहुत अनजान होते हैं. अच्छी बात यह है कि हम जाने-पहचाने सिंटैक्स के लिए hwb का इस्तेमाल कर सकते हैं, लेकिन ग्रेडिएंट को पूरी तरह किसी दूसरे कलर स्पेस, जैसे कि oklab में, इंटरपोलेट करने के लिए कह सकते हैं.

.hwb {
  background: linear-gradient(in hwb to right, hwb(250 10% 10%), hwb(150 10% 10%));
}
.lab {
  background: linear-gradient(in oklab to right, hwb(250 10% 10%), hwb(150 10% 10%));
}

इस उदाहरण में hwb में एक जैसे कलर का इस्तेमाल किया गया है, लेकिन hwb या oklab के लिए इंटरपोलेशन के लिए कलर स्पेस तय किया गया है. hwb, हाई वाइब्रेशन, लेकिन हो सकता है बंद हो चुके ज़ोन या चमकदार स्पॉट के लिए एक बेहतरीन कलरस्पेस है (सबसे ऊपर दिए उदाहरण में हरा-नीला हॉट स्पॉट देखें). ओकेलैब ऐसे लीनियर ग्रेडिएंट के लिए बहुत अच्छा है जो संतृप्त रहते हैं. यह सुविधा बहुत मज़ेदार है, क्योंकि आप अलग-अलग अलग-अलग कलर स्पेस आज़मा सकते हैं और देख सकते हैं कि आपको कौनसा ग्रेडिएंट सबसे ज़्यादा पसंद है.

यहां एक कोडपन दिया गया है, जिसमें अलग-अलग तरह के ग्रेडिएंट और कलर स्पेस के साथ प्रयोग किया जा रहा है. काले से सफ़ेद रंग में जाना भी हर कलर स्पेस में अलग होता है!

गैमट क्लैम्पिंग

कई बार ऐसा भी होता है कि कोई रंग, गैमट के अलावा कुछ अलग करने को कह सकता है. इन रंग का इस्तेमाल करें:

rgb(300 255 255)

rgb कलर स्पेस में किसी कलर चैनल के लिए ज़्यादा से ज़्यादा 255 वैल्यू दी जा सकती है. हालांकि, यहां 300 में लाल रंग के लिए बताया गया था. इस दिन क्या होगा? गैमट क्लैम्पिंग.

क्लैम्पिंग तब होती है जब अतिरिक्त जानकारी को आसानी से निकाल दिया जाता है. कलर इंजन में 300, अंदरूनी तौर पर 255 हो जाता है. रंग को अब इसकी जगह के अंदर बांध दिया गया है.

कलर स्पेस चुनना

इन रंगों और इनके असर के बारे में जानने के बाद, बहुत से लोग बहुत ज़्यादा महसूस करते हैं और जानना चाहते हैं कि कौनसा "एक" चुनना चाहिए. अपनी पढ़ाई और अनुभव के हिसाब से, मुझे अपने सभी टास्क के लिए एक कलर स्पेस नहीं दिखता. हर एक चीज़ के कुछ ऐसे पल होते हैं, जब उनसे मनचाहा नतीजा मिलता है.

अगर कोई एक सबसे अच्छी जगह होती, तो ज़्यादा नए स्पेस नहीं शुरू होते.

हालांकि, मैं यह कह सकता हूं कि सीआईई स्पेस—lab, oklab, lch, और oklch—मेरे लिए शुरुआत से हैं. अगर मुझे अपनी उम्मीद के हिसाब से नतीजे नहीं मिलते, तो मैं दूसरी जगहों पर भी तैयार हो जाऊंगी. रंगों को मिक्स करने और ग्रेडिएंट बनाने के लिए, मैं oklab के डिफ़ॉल्ट विनिर्देशों के विकल्प से सहमत हूं. कलर सिस्टम और यूज़र इंटरफ़ेस के सभी रंगों के लिए, मुझे oklch पसंद है.

यहां कुछ लेख दिए गए हैं जिनमें लोगों ने इन नए कलर स्पेस और सुविधाओं को ध्यान में रखते हुए, कलर करने से जुड़ी अपनी अपडेट की हुई रणनीतियों को शेयर किया है. उदाहरण के लिए, आंद्रे सिटनिक oklch पर पूरी तरह से गए हैं, हो सकता है कि वे आपको भी ऐसा करने के लिए प्रेरित करें:

  1. सीएसएस में OKLCH: हमने आरजीबी और एचएसएल के बजाय ऐंड्रे सिटनिक का शॉर्ट वीडियो क्यों बनाया
  2. कलर फ़ॉर्मैट जोश डब्ल्यू॰ कोमाउ
  3. क्रिस कॉयर का OK, OKLCH

अगले चरण

अब जबकि आपने नए कलर स्पेस और टूल के बारे में जान लिया है, तो एचडी कलर में माइग्रेट करें.

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

गाइड से, रंग के संसाधन के बारे में और पढ़ें.