इस पेज का अनुवाद Cloud Translation API से किया गया है.

हाई डेफ़िनिशन सीएसएस की कलर गाइड

CSS Color 4, वेब पर वाइड गैमट कलर टूल और सुविधाएं उपलब्ध कराता है: ज़्यादा रंग, बदलाव करने के फ़ंक्शन, और बेहतर ग्रेडिएंट.

Adam Argyle

25 साल से ज़्यादा समय से, सीएसएस ग्रेडिएंट और रंगों के लिए sRGB (स्टैंडर्ड रेड ग्रीन ब्लू) ही एकमात्र रंग गैमट रहा है. इसमें rgb(), hsl(), और हेक्स जैसे कलर स्पेस भी शामिल हैं. यह डिसप्ले में सबसे आम रंग gamut की सुविधा है. हम अब इसमें रंगों को तय करने का तरीका जानते हैं.

सबसे ज़्यादा इस्तेमाल होने वाले कलर फ़ॉर्मैट, उनके इस्तेमाल के प्रतिशत के हिसाब से. — https://almanac.httparchive.org/en/2022/css#colors

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

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

Chrome में CSS के कलर 4 गैमट और कलर स्पेस काम करते हैं. सीएसएस अब एचडी (हाई डेफ़िनिशन) डिसप्ले के साथ काम कर सकती है. इसमें एचडी गैमट से रंगों को तय किया जा सकता है. साथ ही, इसमें खास रंगों के साथ कलर स्पेस भी उपलब्ध कराए जा सकते हैं.

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

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

खास जानकारी

जिन ब्राउज़र पर यह सुविधा काम करती है उनमें 50% ज़्यादा रंग चुनने का विकल्प होता है. अगर आपको लगता है कि 16 करोड़ रंग बहुत ज़्यादा हैं, तो कुछ नए स्पेस में कितने रंग दिख सकते हैं, यह देखें. साथ ही, उन सभी ग्रेडिएंट के बारे में भी सोचें जो बिट-डेप्थ कम होने की वजह से बैंड हो गए थे. अब उन्हें भी ठीक कर दिया गया है.

ज़्यादा रंगों के अलावा, यकीनन डिसप्ले में सबसे शानदार रंगों को शामिल किया जा सकता है. नए कलर स्पेस, कलर सिस्टम को मैनेज करने और बनाने के लिए खास टूल और तरीके उपलब्ध कराते हैं. उदाहरण के लिए, अब पहले हमारे पास HSL और उसका "लाइटनेस" चैनल था, जो कि वेब डेवलपर के लिए सबसे अच्छा था. अब सीएसएस में, हमारे पास LCH का "perceptual lightness" है.

रंग की दो टेबल, अगल-बगल हैं. पहली टेबल में, एचएसएल रंगों का रेनबो दिखाया गया है. इसमें करीब 10 रंग हैं. इसके बगल में, ग्रेस्केल रंग हैं, जो एचएसएल रंगों की हल्की-गहरी दिखाते हैं. दूसरी टेबल में LCH रेनबो दिखाया गया है, जो बहुत कम चमकीला है. हालांकि, इसके बगल में मौजूद ग्रेस्केल रंग एक जैसे हैं.
इससे पता चलता है कि किस तरह एलसीएच की कॉन्सटेंट लाइटनेस वैल्यू सेहत के लिए अच्छी है, जबकि एचएसएल में ऐसा नहीं है. — कोडपेन पर आपकी झलक देखें

इसके अलावा, ग्रेडिएंट और मिक्सिंग में कुछ अपग्रेड किए गए हैं: कलर स्पेस के साथ काम करने की सुविधा, ह्यू इंटरपोलेशन के विकल्प, और कम बैंडिंग.

नीचे दी गई इमेज में, मिक्सिंग से जुड़े कुछ अपग्रेड दिखाए गए हैं.

मुख्य दो मिक्स, sRGB में और sRGB के रंगों में हैं. नीचे के दो मिक्स, डिसप्ले p3 में हैं. डिसप्ले p3 में ज़्यादा चमकीले रंग हैं और मिक्स के बीच में ब्लैक ऐंड व्हाइट दिखता है, वहीं sRGB में थोड़ा गाढ़ा दिखता है और बीच में मिक्स ब्लैक ऐंड व्हाइट नहीं.
https://codepen.io/web-dot-dev/pen/poZgXQb

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

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

कलर गैमट क्या है?

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

कलर गैमट की तुलना, त्रिभुज के आकार में एक साथ की जाती है.
sRGB सबसे छोटा और Rec2020 सबसे बड़ा है.

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

इस लेख में, इस्तेमाल किए जा चुके कलर गेम के बारे में बताया गया है. ज़्यादा रंग और नए स्पेस ऐक्सेस करना लेख में, सात नए गैमट के बारे में पढ़ा जा सकता है.

मानव की विज़ुअल गैमट

कलर गैमट की तुलना अक्सर मानव के विज़ुअल गैमट से की जाती है. यह वह रंग है जिसे हम मानते हैं कि मानव की आंख देख सकती है. एचवीएस को अक्सर क्रोमैटिकिटी डायग्राम के साथ दिखाया जाता है, जैसे कि यह:

घोड़े की नाल के आकार में, चमकदार ग्रेडिएंट का इस्तेमाल किया गया है. इसके बीच में एक खाली त्रिकोण है. — सोर्स: Wikipedia

सबसे बाहरी आकार वह है जिसे हम इंसान के तौर पर देख सकते हैं. वहीं, अंदर का त्रिकोण, rgb() फ़ंक्शन रेंज यानी sRGB कलर स्पेस है.

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

कलर स्पेस क्या है?

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

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

आरजीबी क्यूब को आधा काटकर खोला गया है और एचएसएल सिलेंडर को स्लाइस में काटा गया है. इन दोनों को एक साथ दिखाया गया है, ताकि यह पता चल सके कि हर स्पेस में रंगों को किसी आकार में कैसे पैक किया जाता है. — https://en.wikipedia.org/wiki/HSL_and_HSV

लेवल 4 की खास जानकारी में, रंगों को खोजने के लिए 12 नए कलर स्पेस जोड़े गए हैं. ये पहले उपलब्ध चार कलर स्पेस के अलावा हैं:

कलर गैमट और कलर स्पेस की खास जानकारी

कलर स्पेस, रंगों की मैपिंग होती है. इसमें कलर गैमट, रंगों की रेंज होती है. कलर गैम को सभी कणों के तौर पर और कलर स्पेस को कणों की उस रेंज को रखने के लिए बनाई गई बोतल के तौर पर देखें.

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

पर जाएं

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

कई रंगों के बिंदुओं से भरा क्यूब. — ऊपर, आरजीबी क्यूब कलर स्पेस में फ़िट होने वाले कणों का sRGB गैमट है इमेज का सोर्स

क्लासिक कलर स्पेस {#classic-color-spaces} की समीक्षा

CSS Color 4 में, सीएसएस और कलर के लिए कई नई सुविधाओं और टूल के बारे में बताया गया है. सबसे पहले, यह रीकैप कि इन नई सुविधाओं से पहले रंग कहां था.

साल 2000 से, वैल्यू के तौर पर रंग स्वीकार करने वाली किसी भी सीएसएस प्रॉपर्टी के लिए, इनका इस्तेमाल किया जा सकता है: हेक्साडेसिमल (हेक्स नंबर), rgb(), rgba(), hotpink जैसे नाम से या currentColor जैसे कीवर्ड के साथ.

साल 2010 के आस-पास, आपके ब्राउज़र के हिसाब से सीएसएस, hsl() रंगों का इस्तेमाल कर सकती थी. इसके बाद, साल 2017 में, ऐल्फ़ा के साथ हेक्स दिखने लगा. आखिर में, हाल ही में hwb() को ब्राउज़र में काम करने की सुविधा मिली है.

ये सभी क्लासिक कलर स्पेस, एक ही गैमट, sRGB में रंग को रेफ़र करते हैं.

HEX

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

हेक्स कलरस्पेस में, R, G, B, और A को हेक्साडेसिमल नंबर के साथ दिखाया जाता है. नीचे दिए गए कोड के उदाहरणों से पता चलता है कि इस सिंटैक्स से लाल, हरे, और नीले रंग के साथ-साथ ऑपैसिटी को कैसे तय किया जा सकता है.

.valid-css-hex-colors {
  /* classic */
  --3-digits: #49b;
  --6-digits: #4499bb;

  /* hex with opacity */
  --4-digits-opaque: #f9bf;
  --8-digits-opaque: #ff99bbff;
  --4-digits-with-opacity: #49b8;
  --8-digits-with-opacity: #4499bb88;
}

RGB

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

सोर्स

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

.valid-css-rgb-colors {
  --classic: rgb(64, 149, 191);
  --modern: rgb(64 149 191);
  --percents: rgb(25% 58% 75%);

  --classic-with-opacity-percent: rgba(64, 149, 191, 50%);
  --classic-with-opacity-decimal: rgba(64, 149, 191, .5);

  --modern-with-opacity-percent: rgb(64 149 191 / 50%);
  --modern-with-opacity-decimal: rgb(64 149 191 / .5);

  --percents-with-opacity-percent: rgb(25% 58% 75% / 50%);
  --percents-with-opacity-decimal: rgb(25% 58% 75% / .5);

  --empty-channels: rgb(none none none);
}

HSL

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

एचएसएल (ह्यू सैचुरेशन और लाइटनेस) एसआरजीबी गैमट में सभी रंगों को उपलब्ध कराता है. यह इंसानों की भाषा और बातचीत के हिसाब से सबसे पहले उपलब्ध रंगों में से एक है. इसलिए, आपको यह जानने की ज़रूरत नहीं है कि लाल, हरे, और नीले रंग किस तरह इंटरैक्ट करते हैं. आरजीबी की तरह, मूल रूप से इसमें भी सिंटैक्स में कॉमा का इस्तेमाल किया जाता था. हालांकि, अब कॉमा का इस्तेमाल करना ज़रूरी नहीं है.

.valid-css-hsl-colors {
  --classic: hsl(200deg, 50%, 50%);
  --modern: hsl(200 50% 50%);

  --classic-with-opacity-percent: hsla(200deg, 50%, 50%, 50%);
  --classic-with-opacity-decimal: hsla(200deg, 50%, 50%, .5);

  --modern-with-opacity-percent: hsl(200 50% 50% / 50%);
  --modern-with-opacity-decimal: hsl(200 50% 50% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hsl(none none 100%);
  --empty-channels-black: hsl(none none 0%);
}

HWB

ब्राउज़र के इस्तेमाल से जुड़ी सहायता

सोर्स

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

.valid-css-hwb-colors {
  --modern: hwb(200deg 25% 25%);
  --modern2: hwb(200 25% 25%);

  --modern-with-opacity-percent: hwb(200 25% 25% / 50%);
  --modern-with-opacity-decimal: hwb(200 25% 25% / .5);

  /* hueless and no saturation */
  --empty-channels-white: hwb(none 100% none);
  --empty-channels-black: hwb(none none 100%);
}

अगले चरण

नए कलर स्पेस, सिंटैक्स, और टूल के बारे में पढ़ें. इसके बाद, एचडी कलर पर माइग्रेट करने का तरीका जानें.

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

संसाधन

कलर लेवल 5 के हमारे अन्य लेख पढ़ें.

इसके अलावा, आपको वेब पर और कॉन्टेंट मिल सकता है:

और टूल: