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

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

Adam Argyle

25 साल से ज़्यादा के लिए, sRGB (स्टैंडर्ड लाल हरा नीला) सिर्फ़ एक ही रंग है कलर स्पेस के साथ सीएसएस ग्रेडिएंट और कलर के लिए gaम्यूट ऑफ़र शामिल नहीं करता है, जैसे rgb(), hsl() और हेक्स. यह सबसे आम रंग है डिसप्ले में गेमट की क्षमता; एक कॉमन डिनोमिनेटर (हर) है. हम आगे बढ़ गए हैं में रंग तय करने की आदत हो गई है.

जैसे-जैसे डिसप्ले में कई तरह के रंग दिखाने की क्षमता बढ़ती है, सीएसएस को . मौजूदा रंग प्रारूप विस्तृत रंग सीमाओं के लिए कोई भाषा नहीं है.

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

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

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

खास जानकारी

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

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

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

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

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

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

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

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

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

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

ह्यूमन विज़ुअल गैमट

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

बाहरी आकार वह है जिसे हम मनुष्यों के रूप में देख सकते हैं और आंतरिक त्रिभुज rgb() फ़ंक्शन की रेंज, यानी sRGB में कलर स्पेस.

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

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

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

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

लेवल 4 के स्पेसिफ़िकेशन में 12 के बारे में बताया गया है नए कलर स्पेस का इस्तेमाल करें. ये चार रंगाें के अलावा हैं पहले उपलब्ध स्पेस:

• हेक्स
• आरजीबी
• HSL
• HWB

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

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

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

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

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

सीएसएस के रंग 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% / 50%);

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

HSL

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

.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 गेमट कलर स्पेस, HWB है (रंग, सफ़ेदता, कालापन). लेखक किसी रंग को चुन सकते हैं और उसे सफ़ेद या काले रंग में मिला सकते हैं ताकि वे मनमुताबिक रंग ढूंढ सकें.

.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 वाले हमारे लेख पढ़ें.

• सीएसएस का रिलेटिव कलर सिंटैक्स
• सीएसएस का कलर मिक्स

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

• W3C से CSS कलर मॉड्यूल लेवल 4

• W3C से CSS कलर मॉड्यूल लेवल 5

• सीएसएस में एलसीएच कलर: क्या, क्यों, और कैसे?

• क्या लैब से बेहतर है? गैमट रिडक्शन: सीआईई लैब और OKLab

• वेब पर ज़्यादा शानदार रंगों की ओर

• ओखएसवी और ओखस्ल: रंग चुनने के लिए दो नए कलर स्पेस

• Chromium में बेहतर रंगों की ओर (PDF)

• एलसीएच, सबसे अच्छा कलर स्पेस है!

• सुलभता वाले कलर सिस्टम डिज़ाइन करना

• स्पेस में रंग भरें, हैना वेलर का बनाया हुआ

• Display-P3 के साथ सीएसएस में वाइड गैमट कलर

• सीआईई 1931 कलर स्पेस

• सीएसएस में कलर फ़ॉर्मैट

• बार्तोज़ चिएकानोव्स्की के बनाए स्पेसेज़ को रंग देना

और टूल:

• एफ़सी163.github.io/color3d/
• गेमट विज़ुअलाइज़ेशन
• विविड ग्रेडिएंट जनरेटर