CSS Color 4 वेब के लिए कई तरह के गैमट कलर टूल और सुविधाएं उपलब्ध कराता है: ज़्यादा रंग, बदलाव करने वाले फ़ंक्शन, और बेहतर ग्रेडिएंट.
25 साल से भी ज़्यादा से, sRGB
(स्टैंडर्ड लाल हरा नीला) ही सीएसएस ग्रेडिएंट और कलर के लिए
गैमट ही है. इसमें rgb(), hsl() और हेक्स जैसे कलर स्पेस ऑफ़र किए जाते हैं. यह सभी डिसप्ले में कलर गैमट की
सबसे आम क्षमता है. हम इसमें रंग तय करने की आदत डाल चुके हैं.
डिसप्ले में कई तरह के रंग दिखाने की सुविधा ज़्यादा कारगर होने पर, सीएसएस को इन रेंज में से रंग के बारे में बताने के लिए एक तरीके की ज़रूरत होती है. मौजूदा कलर फ़ॉर्मैट में चौड़ी कलर रेंज के लिए कोई भाषा नहीं है.
अगर सीएसएस कभी अपडेट नहीं की जाती, तो वह हमेशा के लिए 90 के दशक की कलर रेंज में बनी रहेगी. इसकी वजह यह है कि उसे इमेज और वीडियो में मौजूद कई तरह के कई तरह के ऑफ़र से कभी भी मिलान नहीं करना पड़ेगा. ट्रैप किया गया, यानी सिर्फ़ इंसानों की आंख के देखे जाने वाले 30% रंग दिखाए जाते हैं. एस्केप करने में हमारी मदद करने के लिए, सीएसएस कलर लेवल 4 का धन्यवाद. इसे मुख्य रूप से, Lea Verou और क्रिस लिली ने लिखा है.
Chrome में CSS Color 4 गैमट और कलर स्पेसेज़ का इस्तेमाल किया जा सकता है. सीएसएस अब एचडी (हाई डेफ़िनिशन) डिसप्ले पर काम कर सकती है. इसमें एचडी श्रेणी से किसी भी रंग के बारे में बताया गया है. साथ ही, सीएसएस में विशेषज्ञता के साथ कलर स्पेस भी दिए गए हैं.
इसे खुद आज़माएं
इस गाइड के तीन हिस्से हैं. यह याद रखने के लिए आगे पढ़ें कि रंग कहां-कहां हैं. इसके बाद, पढ़ें कि रंग कैसा चल रहा है और आने वाले समय में, एचडी कलर पर माइग्रेट करके कलर को कैसे मैनेज किया जा सकता है.
खास जानकारी
समर्थित ब्राउज़र में, चुनने के लिए 50% ज़्यादा रंग होते हैं. अगर आपको लगता है कि 1.6 करोड़ रंग बहुत सुंदर लगते हैं, तो तब तक इंतज़ार करें, जब तक आप यह न देख लें कि इन नई जगहों में कितने रंग आ सकते हैं. साथ ही, उन सभी ग्रेडिएंट के बारे में सोचें जो बैंड किए गए हैं, क्योंकि इसमें बिट-डेप्थ की संख्या काफ़ी नहीं थी, इसलिए भी इसे ठीक कर दिया गया है.
ज़्यादा रंगों के अलावा, डिसप्ले में जितने चमकदार रंग इस्तेमाल किए जा सकते हैं, नए कलर स्पेस से कलर सिस्टम मैनेज करने और बनाने के यूनीक टूल और तरीके मिलते हैं. उदाहरण के लिए, इससे पहले हमारे पास एचएसएल और उसका "लाइटनेस" चैनल हुआ करता था, जो कि सबसे अच्छे वेब डेवलपर के लिए था. अब सीएसएस में, हमारे पास एलसीएच की "पर्सेप्टिव लाइटनेस" है.
इसके अलावा, ग्रेडिएंट और मिक्सिंग को कुछ अपग्रेड भी मिलते हैं: कलर स्पेस सपोर्ट, ह्यू इंटरपोलेशन विकल्प, और कम बैंडिंग.
नीचे दी गई इमेज में, आपस में जुड़े हुए कुछ अपग्रेड दिखाए गए हैं.
https://codepen.io/web-dot-dev/pen/poZgXQb
रंग और वेब की समस्या यह है कि सीएसएस हाई डेफ़िनिशन तैयार नहीं है और ज़्यादातर लोगों के पॉकेट, लैप या दीवारों पर माउंट किए गए डिसप्ले वाइड गैमट, हाई डेफ़िनिशन रंग के लिए तैयार होते हैं. डिसप्ले की रंग क्षमता सीएसएस की तुलना में तेज़ी से बढ़ी है. अब सीएसएस ही इसका इस्तेमाल कर सकती है.
इसमें "ज़्यादा रंग" के अलावा और भी बहुत कुछ है. इन दस्तावेज़ों के खत्म होने तक, आपको ज़्यादा रंग तय करने, ग्रेडिएंट बढ़ाने, और हर टास्क के लिए सबसे अच्छे कलर स्पेस और कलर गैमट चुनने का विकल्प मिलेगा.
कलर गैमट क्या होता है?
गैमट किसी चीज़ के आकार को दिखाता है. "लाखों रंग" वाक्यांश में डिसप्ले के अलग-अलग तरह या रंगों की रेंज के बारे में बताया जाता है. नीचे दी गई इमेज में, तीन गैमट की तुलना की गई है और साइज़ जितना बड़ा होगा, उतने ही ज़्यादा रंग पेश किए गए हैं.
कलर गैमट का भी कोई नाम हो सकता है. जैसे, बास्केटबॉल बनाम बेसबॉल या वेंट कॉफ़ी कप बनाम ग्रैंडे; साइज़ का नाम लोगों के कम्यूनिकेट करने में मदद करता है. कलर गैमट के इन नामों को सीखने से, आपको रंगों की रेंज समझने और समझने में आसानी होगी.
इस लेख में पिछले कलर गैमट की समीक्षा की गई है. ज़्यादा रंगों और नए स्पेस ऐक्सेस करें सेक्शन में, सात नए गैमट के बारे में पढ़ा जा सकता है.
इंसानी विज़ुअल गैमट
अलग-अलग कलर गैमट की तुलना अक्सर इंसानों के विज़ुअल गैमट से की जाती है. हमें लगता है कि इंसान की आंखों को जो भी रंग दिखता है उसे वह ही देख सकता है. एचवीएस को अक्सर क्रोमेटिकिटी डायग्राम के साथ दिखाया जाता है, जैसे:
सबसे बाहरी आकार को इंसान के तौर पर देखा जा सकता है. सबसे अंदरूनी त्रिभुज, rgb() फ़ंक्शन रेंज यानी एसआरजीबी कलर स्पेस है.
जैसा कि आपने ऊपर त्रिभुजों को देखा, हम गैम साइज़ की तुलना करते हैं, तो क्या आपको नीचे त्रिभुज मिलेंगे. यह रंग श्रेणी के बारे में संवाद करने और उनकी तुलना करने का उद्योग का तरीका है.
कलर स्पेस क्या होता है?
कलर स्पेस एक तरह से बनाए जाते हैं, जिनसे आकार और रंगों को ऐक्सेस करने का एक तरीका तय होता है. कई साधारण 3D आकार हैं, जैसे कि क्यूब या सिलिंडर. रंग की इस व्यवस्था से तय होता है कि कौनसे रंग एक-दूसरे के बगल में हैं और इंटरपोलेट करने वाले रंग कैसे काम करेंगे.
आरजीबी एक आयताकार कलर स्पेस की तरह होता है, जहां तीन ऐक्सिस पर निर्देशांक जोड़कर रंगों को ऐक्सेस किया जाता है. एचएसएल एक सिलिंड्रिकल कलर स्पेस है, जहां रंगों को दो ऐक्सिस पर कलर ऐंगल और निर्देशांकों से ऐक्सेस किया जाता है
लेवल 4 के स्पेसिफ़िकेशन में, रंगों को खोजने के लिए 12 नए कलर स्पेस उपलब्ध कराए गए हैं. ये पहले से उपलब्ध चार कलर स्पेस के अलावा हैं:
कलर गैमट और कलर स्पेस की खास जानकारी
कलर स्पेस, रंगों को मैप करने का मतलब है, जिसमें कलर गैमट, रंगों की एक रेंज होती है. कलर गैमट को कणों की कुल संख्या और कलर स्पेस को एक बोतल की तरह मानें, जो उन कणों की रेंज को होल्ड करने के लिए बनाई गई हो.
यह रहा एलेक्सी आर्डोव का इंटरैक्टिव विज़ुअल. इसमें कलर स्पेस दिखाए गए हैं. इस डेमो में इन्हें पॉइंट करें, खींचें, और ज़ूम करें. अन्य स्पेस का विज़ुअलाइज़ेशन देखने के लिए कलर स्पेस बदलें.
- कई तरह के कलर के बारे में बताने के लिए कलर गैमट का इस्तेमाल करें, जैसे कि कम रेंज या छोटा गैमट बनाम हाई रेंज या वाइड गैमट.
- रंग की व्यवस्था करने, रंग के बारे में बताने, रंग में बदलाव करने, और रंग से इंटरपोलेट करने के लिए इस्तेमाल होने वाले सिंटैक्स के बारे में बताने के लिए, कलर स्पेस इस्तेमाल करें.
क्लासिक कलर स्पेस {#classic-color-spaces} की समीक्षा
सीएसएस कलर 4, सीएसएस और कलर के लिए कई नई सुविधाओं और टूल की जानकारी देता है. सबसे पहले, इन नई सुविधाओं से पहले इस बात का रीकैप कि रंग किन जगहों पर था.
2000 के दशक से ही, ऐसी सभी सीएसएस प्रॉपर्टी के लिए इनका इस्तेमाल किया जा सकता है जो रंग को वैल्यू के तौर पर स्वीकार करती हैं: हेक्साडेसिमल (हेक्स नंबर), rgb(), rgba(), hotpink जैसे नाम से या currentColor जैसे कीवर्ड के साथ.
साल 2010 के आस-पास, आपके ब्राउज़र के आधार पर, सीएसएस hsl() रंगों का इस्तेमाल कर सकती है. इसके बाद, 2017 में
ऐल्फ़ा वाला हेक्स कोड दिखाई दिया. आखिर में, हाल ही में
hwb() को ब्राउज़र पर
मदद मिलने लगी है.
ये सभी क्लासिक कलर स्पेस एक ही गैम, एसआरजीबी में कलर का रेफ़रंस देते हैं.
हेक्स
हेक्स कलरस्पेस, 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
एचएसएल (ह्यू सेचुरेशन और लाइटनेस), एसआरजीबी गैमट में सभी कलर उपलब्ध कराता है. इससे, आपके दिमाग को लाल, हरे, और नीले रंग के इंटरैक्शन की जानकारी नहीं मिलती. आरजीबी की तरह, शुरुआत में इसमें भी सिंटैक्स में कॉमा होता था. हालांकि, अब इसे आगे बढ़ाने के लिए कॉमा की ज़रूरत नहीं होती.
.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%);
}
एचडब्ल्यूबी
एक और एसआरजीबी कलर स्पेस है, जो इंसान के रंग के बारे में बताता है. वह है एचडब्ल्यूबी (रंग, सफ़ेद, कालापन). लेखक अपनी पसंद का रंग ढूंढने के लिए, सफ़ेद या काले रंग में कोई रंग चुन सकते हैं.
.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%);
}
अगले चरण
नए कलर स्पेस, सिंटैक्स, और टूल के बारे में पढ़ें. इसके बाद, एचडी कलर में माइग्रेट करने का तरीका जानें.
वेब पर बिना एसआरजीबी वाले कलर स्पेस शुरुआती दौर में हैं, लेकिन हम समय के साथ डिज़ाइनर और डेवलपर के इस्तेमाल में बढ़ोतरी देखेंगे. उदाहरण के लिए, किसी डिज़ाइन सिस्टम को बनाने के लिए किस कलर स्पेस की जानकारी होना, क्रिएटर्स के टूलबेल्ट में शामिल होने के लिए एक मज़बूत टूल है. हर कलर स्पेस खास सुविधाएं देता है. साथ ही, इसे सीएसएस की खास बातों में जोड़े जाने की वजह भी बताई गई है. इन्हें छोटे फ़ॉर्मैट में शुरू करना और ज़रूरत के मुताबिक जोड़ना ठीक रहता है.
रिसॉर्स
रंग स्तर 5 के हमारे और लेख पढ़ें.
साथ ही, आपको पूरे वेब पर ज़्यादा जानकारी मिल सकती है:
- W3C से सीएसएस कलर मॉड्यूल लेवल 4
W3C से सीएसएस कलर मॉड्यूल लेवल 5
और टूल: