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

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

Adam Argyle
Adam Argyle

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

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

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

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

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

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

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

खास जानकारी

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

घोड़े के जूते का आकार, जो आकर्षक ग्रेडिएंट से भरा हुआ है जिसके बीच में एक खोखला त्रिभुज है.
सोर्स: Wikipedia

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

HEX

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

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

हेक्स कलरस्पेस, 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

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

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

आरजीबी कलर स्पेस से लाल, हरे, और नीले चैनलों को सीधे ऐक्सेस किया जा सकता है. यह 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

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

  • Chrome: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 12. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • फ़ायरफ़ॉक्स: 1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Safari: 3.1. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

खुद को मानवीय भाषा और उसके अनुसार कम्यूनिकेशन हो सकता है, एचएसएल (ह्यू सैचुरेशन और लाइटनेस) 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

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

  • Chrome: 101. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • एज: 101. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • Firefox: 96. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है
  • सफ़ारी: 15. अभी तक किसी भी व्यक्ति ने चेक इन नहीं किया है

सोर्स

इंसानी रंग की व्याख्या करने के तरीके के हिसाब से एक और 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 वाले हमारे लेख पढ़ें.

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

और टूल: