CSS Color 4 वेब के लिए कई तरह के अलग-अलग रंग वाले टूल और सुविधाएं उपलब्ध कराता है: ज़्यादा रंग, बदलाव करने वाले फ़ंक्शन, और बेहतर ग्रेडिएंट.
25 साल से भी ज़्यादा से, sRGB
(स्टैंडर्ड लाल हरा नीला) ही सीएसएस ग्रेडिएंट और कलर के लिए
गैमट ही है. इसमें rgb(), hsl() और हेक्स जैसे कलर स्पेस ऑफ़र किए जाते हैं. यह सभी डिसप्ले में कलर गैमट की
सबसे आम क्षमता है. हम इस श्रेणी में रंग तय करने के बहुत आदी हो चुके हैं.
डिसप्ले में कई तरह के रंग दिखाने की सुविधा ज़्यादा कारगर होने पर, सीएसएस को इन रेंज में से रंग के बारे में बताने के लिए एक तरीके की ज़रूरत होती है. मौजूदा कलर फ़ॉर्मैट में चौड़ी कलर रेंज के लिए कोई भाषा नहीं है.
अगर सीएसएस कभी अपडेट नहीं की जाती, तो वह हमेशा के लिए 90 के दशक की कलर रेंज में बनी रहेगी. इसकी वजह यह है कि उसे इमेज और वीडियो में मौजूद कई तरह के कई तरह के ऑफ़र से कभी भी मिलान नहीं करना पड़ेगा. ट्रैप, जिसमें इंसानों की आंख के सिर्फ़ 30% रंग देखे जा सकते हैं. इस जाल से बचने में हमारी मदद करने के लिए, सीएसएस कलर लेवल 4 का धन्यवाद. इसे मुख्य रूप से ली वेरू और क्रिस लिली ने लिखा है.
Chrome 111 से, CSS Color 4
गैमट और कलर स्पेस के लिए सहायता उपलब्ध है. यह सुविधा, Safari में शामिल होने के लिए भी काम करती है, जिसे 2016 से display-p3 के लिए इस्तेमाल किया जा रहा था. सीएसएस अब एचडी (हाई डेफ़िनिशन) डिसप्ले पर काम कर सकती है, जिसमें एचडी गैमट से रंग तय होते हैं. साथ ही, विशेषज्ञताओं के साथ कलर स्पेस भी दिए जा सकते हैं. इस गाइड में बताया गया है कि रंगों की इस नई दुनिया का फ़ायदा कैसे लिया जा सकता है.
इसे खुद आज़माएं
कुछ अन्य ब्राउज़र में, 50% ज़्यादा रंगों का इस्तेमाल किया जा सकता है. आपको लगा कि 1.6 करोड़ रंग बहुत अच्छे लग रहे हैं. तब तक इंतज़ार करें, जब तक आप यह न देख लें कि इन नई जगहों में कितने रंग आ सकते हैं. साथ ही, उन सभी ग्रेडिएंट के बारे में सोचें जो बैंड किए गए हैं, क्योंकि इसमें बिट-डेप्थ की संख्या काफ़ी नहीं थी, इसलिए भी इसे ठीक कर दिया गया है.
ज़्यादा रंगों के साथ, बेशक सबसे चमकीले रंग, डिसप्ले में इस्तेमाल किए जा सकते हैं. नए कलर स्पेस से, कलर सिस्टम मैनेज करने और बनाने के यूनीक टूल और तरीके मिलते हैं. उदाहरण के लिए, इससे पहले हमारे पास एचएसएल और उसका "लाइटनेस" चैनल हुआ करता था, जो कि सबसे अच्छे वेब डेवलपर के लिए था. अब सीएसएस में, हमारे पास एलसीएच की "पर्सेप्टिव लाइटनेस" है.
इसके अलावा, ग्रेडिएंट और मिक्सिंग को कुछ अपग्रेड भी मिलते हैं: कलर स्पेस सपोर्ट, ह्यू इंटरपोलेशन विकल्प, और कम बैंडिंग. नीचे दी गई इमेज में, रीमिक्स करने वाले कुछ अपग्रेड दिखाए गए हैं. सबसे ऊपर के दो कलर मिक्स एसआरजीबी में हैं. नीचे के दो कलर मिक्स, डिसप्ले p3 में हैं. डिसप्ले p3 का रंग ज़्यादा चटक होता है और मिक्स वर्शन के बीच में पूरा ब्लैक एंड व्हाइट दिखता है. जहां sRGB थोड़ा फीका दिखता है और बीच में मौजूद मिक्स ब्लैक या व्हाइट नतीजे नहीं देते.
https://codepen.io/web-dot-dev/pen/poZgXQb
इस गाइड में बताया गया है कि रंगों का इस्तेमाल कहां किया गया है और इसका इस्तेमाल कहां किया जा रहा है. इसमें यह भी बताया गया है कि सीएसएस किस तरह यह सुविधा चालू करेगी और रंग को मैनेज करने में वेब डेवलपर की मदद करेगी.
खास जानकारी
रंग और वेब की समस्या यह है कि सीएसएस हाई डेफ़िनिशन तैयार नहीं है और ज़्यादातर लोगों के पॉकेट, लैप या दीवारों पर माउंट किए गए डिसप्ले वाइड गैमट, हाई डेफ़िनिशन रंग के लिए तैयार होते हैं. डिसप्ले की रंग क्षमता सीएसएस की तुलना में तेज़ी से बढ़ी है. अब सीएसएस ही इसका इस्तेमाल कर सकती है.
इसमें "ज़्यादा रंग" के अलावा और भी बहुत कुछ है. इस लेख के आखिर में, आपके पास ज़्यादा रंग तय करने, ग्रेडिएंट बढ़ाने, और हर टास्क के लिए सबसे सही कलर स्पेस और कलर गैमट चुनने का विकल्प होगा.
कलर गैमट क्या होता है?
गैमट किसी चीज़ के आकार को दिखाता है. "लाखों रंग" वाक्यांश में डिसप्ले के अलग-अलग तरह या रंगों की रेंज के बारे में बताया जाता है. नीचे दी गई इमेज में, तीन गैमट की तुलना की गई है और साइज़ जितना बड़ा होगा, उतने ही ज़्यादा रंग पेश किए गए हैं.
कलर गैमट का भी कोई नाम हो सकता है. जैसे, बास्केटबॉल बनाम बेसबॉल या वेंट कॉफ़ी कप बनाम ग्रैंडे; साइज़ का नाम लोगों के कम्यूनिकेट करने में मदद करता है. कलर गैमट के इन नामों को सीखने से, आपको रंगों की रेंज समझने और समझने में आसानी होगी.
इस लेख में आपको सात ऐसे नए गैमट के बारे में बताया जाएगा जिनकी रेंज sRGB से ज़्यादा है. साथ ही, उनकी अलग-अलग सुविधाओं के बारे में भी बताया जाएगा, ताकि आप चुन सकें कि किसका इस्तेमाल करना है:
इंसानी विज़ुअल गैमट
अलग-अलग कलर गैमट की तुलना अक्सर इंसान के विज़ुअल गैमट से की जाती है. एचवीएस को अक्सर क्रोमेटिकिटी डायग्राम के साथ दिखाया जाता है, जैसे:
सबसे बाहरी आकार को इंसान के तौर पर देखा जा सकता है. सबसे अंदरूनी त्रिभुज, rgb() फ़ंक्शन रेंज यानी एसआरजीबी कलर स्पेस है.
जैसा कि आपने ऊपर त्रिभुजों को देखा, हम गैम साइज़ की तुलना करते हैं, तो क्या आपको नीचे त्रिभुज मिलेंगे. यह रंग श्रेणी के बारे में संवाद करने और उनकी तुलना करने का उद्योग का तरीका है.
कलर स्पेस क्या होता है?
कलर स्पेस एक तरह से बनाए जाते हैं, जिनसे आकार और रंगों को ऐक्सेस करने का एक तरीका तय होता है. कई साधारण 3D आकार हैं, जैसे कि क्यूब या सिलिंडर. रंग की इस व्यवस्था से तय होता है कि कौनसे रंग एक-दूसरे के बगल में हैं और इंटरपोलेट करने वाले रंग कैसे काम करेंगे.
आरजीबी एक आयताकार कलर स्पेस की तरह होता है, जहां तीन ऐक्सिस पर निर्देशांक जोड़कर रंगों को ऐक्सेस किया जाता है. एचएसएल एक सिलिंड्रिकल कलर स्पेस है, जहां रंगों को दो ऐक्सिस पर कलर ऐंगल और निर्देशांकों से ऐक्सेस किया जाता है
लेवल 4 के स्पेसिफ़िकेशन में, रंग को खोजने के लिए 12 नए कलर स्पेस दिए गए हैं. इन्हें पहले शेयर किए गए सात नए गैमट में से देखा जा सकता है:
- एसआरजीबी लीनियर
- एलसीएच
- okLCH
- लैब
- okLAB
- डिसप्ले p3
- Rec2020
- a98 आरजीबी
- ProPhotos के आरजीबी
- XYZ
- XYZ d50
- XYZ d65
ये पहले से उपलब्ध चार कलर स्पेस के अतिरिक्त हैं:
कलर गैमट और कलर स्पेस की खास जानकारी
कलर स्पेस, रंगों को मैप करने का मतलब है, जिसमें कलर गैमट, रंगों की एक रेंज होती है. कलर गैमट को कणों की कुल संख्या और कलर स्पेस को एक बोतल की तरह मानें, जो उन कणों की रेंज को होल्ड करने के लिए बनाई गई हो.
यह रहा एलेक्सी आर्डोव का इंटरैक्टिव विज़ुअल. इसमें कलर स्पेस दिखाए गए हैं. इस डेमो में इन्हें पॉइंट करें, खींचें, और ज़ूम करें. अन्य स्पेस का विज़ुअलाइज़ेशन देखने के लिए कलर स्पेस बदलें.
- कई तरह के कलर के बारे में बताने के लिए कलर गैमट का इस्तेमाल करें, जैसे कि कम रेंज या छोटा गैमट बनाम हाई रेंज या वाइड गैमट.
- रंग की व्यवस्था करने, रंग के बारे में बताने, रंग में बदलाव करने, और रंग से इंटरपोलेट करने के लिए इस्तेमाल होने वाले सिंटैक्स के बारे में बताने के लिए, कलर स्पेस इस्तेमाल करें.
ज़्यादा रंगों, नए स्पेस, और डीबग नतीजों को ऐक्सेस करने का तरीका
सीएसएस कलर 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%);
}
वेब के लिए नए कलर स्पेस का इस्तेमाल करें
नीचे दिए गए कलर स्पेस, एसआरजीबी की तुलना में बड़े गैमट को ऐक्सेस करने की सुविधा देते हैं. डिसप्ले-p3 कलर स्पेस में आरजीबी के मुकाबले दोगुना कलर मिलते हैं. वहीं, Rec2020 पर Display-p3 के मुकाबले करीब दोगुना रंग उपलब्ध हैं. इनमें कई रंग हैं!
color() फ़ंक्शन
नए 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
यह कलरस्पेस, 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() के ज़रिए लीनियर 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 ब्लैक से व्हाइट ग्रेडिएंट देखना सही होता है:
एलसीएच
आरजीबी गैमट के बाहर कलर को ऐक्सेस करने के लिए सिंटैक्स की जानकारी देने वाली पोस्ट का पहला स्पेस! यह डिस्प्ले के लिए कई तरह के रंगों को आसानी से बनाने का पहला तरीका भी है. इसकी वजह यह है कि सीआईई स्पेस का कोई भी रंग (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);
}
लैब
सीआईई गैमट को ऐक्सेस करने के लिए एक और कलर स्पेस बनाया गया है, जिसमें साफ़ तौर पर लीनियर लाइटनेस (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);
}
ओक्लाहोमा
यह कलर स्पेस, एलसीएच के हिसाब से सही है. 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);
}
ओक्लाब
यह स्पेस, 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
डिसप्ले 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
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 आरजीबी
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 आरजीबी
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
CIE XYZ कलर स्पेस में वे सभी कलर शामिल होते हैं जो किसी व्यक्ति को औसत दृष्टि वाले व्यक्ति को दिखते हैं. इसलिए, दूसरे कलर स्पेस के लिए इसे स्टैंडर्ड रेफ़रंस के तौर पर इस्तेमाल किया जाता है. Y ल्यूमिनेंस है, जबकि X और Z, दिए गए Y ल्यूमिनेंस के अंदर संभावित क्रोमा हैं.
d50 और d65 के बीच का अंतर व्हाइट पॉइंट है, जहां d50 d50 व्हाइट पॉइंट का इस्तेमाल करता है और d65, d65 के व्हाइट पॉइंट का इस्तेमाल करता है.
फ़ायदे
- लीनियर लाइट ऐक्सेस में, आसानी से इस्तेमाल किए जा सकने वाले उदाहरण शामिल हैं.
- फ़िज़िकल कलर मिक्सिंग के लिए बेहतरीन.
नुकसान
- 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);
}
क्या आपको Codepen डेमो नहीं दिख रहा है?
फिर क्या होता है अगर एक स्पेस के रंग को पूरी तरह से अलग स्पेस में बदलें:
.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%));
}
क्या आपको Codepen डेमो नहीं दिख रहा है?
आप सौभाग्य से, रंग 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%)
);
}
ह्यू इंटरपोलेशन को बंद करने के लिए, यहां एक मज़ेदार प्लेग्राउंड है, जहां दो कलर स्टॉप के बीच कलर को बदला जा सकता है. साथ ही, रंग के इंटरपोलेशन के विकल्प का असर देखा जा सकता है. साथ ही, यह भी देखा जा सकता है कि कलर स्पेस, ग्रेडिएंट नतीजों में कैसे बदलाव करते हैं. इफ़ेक्ट बहुत अलग हो सकते हैं. इसे चार नई ट्रिक के तौर पर, हाल ही में आपके कलर टूलबेल्ट में शामिल किया गया है.
अलग-अलग कलर स्पेस के ग्रेडिएंट
हर कलर स्पेस के आकार और रंग को खास बनाने से उसका अलग तरह का ग्रेडिएंट होता है. नीचे दिए गए उदाहरण देखें, खास तौर पर "नीले से सफ़ेद" पर. देखें कि हर कलर स्पेस इसे अलग तरह से कैसे संभालता है. ध्यान दें कि बीच में कितने बैंगनी रंग वाले हैं, जिसे इंटरपोलेशन के दौरान "ह्यू शिफ़्ट" कहा जाता है.
क्या आपको Codepen डेमो नहीं दिख रहा है?
कोडपेन के कई उदाहरणों में से सिर्फ़ एक इमेज दिखाई गई है. इन्हें खुद देखने के लिए Canary या Safari Tech Preview को आज़माना काम का है.
इन जगहों पर कुछ ग्रेडिएंट, दूसरों की तुलना में ज़्यादा चमकदार होंगे या डेड ज़ोन में कम यात्रा करेंगे.
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%));
}
क्या आपको Codepen डेमो नहीं दिख रहा है?
इस उदाहरण में hwb में एक जैसे कलर का इस्तेमाल किया गया है, लेकिन hwb या oklab के लिए इंटरपोलेशन के लिए कलर स्पेस तय किया गया है. hwb, हाई वाइब्रेशन, लेकिन हो सकता है बंद हो चुके ज़ोन या चमकदार स्पॉट के लिए एक बेहतरीन कलरस्पेस है (सबसे ऊपर दिए उदाहरण में हरा-नीला हॉट स्पॉट देखें). ओकेलैब ऐसे लीनियर ग्रेडिएंट के लिए बहुत अच्छा है जो संतृप्त रहते हैं. यह सुविधा बहुत मज़ेदार है, क्योंकि आप अलग-अलग
अलग-अलग कलर स्पेस आज़मा सकते हैं और देख सकते हैं कि आपको कौनसा ग्रेडिएंट सबसे ज़्यादा पसंद है.
यहां एक कोडपन दिया गया है, जिसमें अलग-अलग तरह के ग्रेडिएंट और कलर स्पेस के साथ प्रयोग किया जा रहा है. काले से सफ़ेद रंग में जाना भी हर कलर स्पेस में अलग होता है!
क्या आपको Codepen डेमो नहीं दिख रहा है?
गैमट क्लैम्पिंग
कई बार ऐसा भी होता है कि कोई रंग, गैमट के अलावा कुछ अलग करने को कह सकता है. इन रंग का इस्तेमाल करें:
rgb(300 255 255)
rgb कलर स्पेस में किसी कलर चैनल के लिए ज़्यादा से ज़्यादा 255 वैल्यू दी जा सकती है. हालांकि, यहां
300 में लाल रंग के लिए बताया गया था. इस दिन क्या होगा? गैमट क्लैम्पिंग.
क्लैम्पिंग तब होती है जब अतिरिक्त जानकारी को आसानी से निकाल दिया जाता है. 300, कलर इंजन में अंदरूनी तौर पर 255
हो जाएगा. रंग को अब इसकी जगह के अंदर बांध दिया गया है.
कलर स्पेस चुनना
इन रंगों और इनके असर के बारे में जानने के बाद, बहुत से लोग बहुत ज़्यादा महसूस करते हैं और जानना चाहते हैं कि कौनसा "एक" चुनना चाहिए. अपनी पढ़ाई और अनुभव के हिसाब से, मुझे अपने सभी टास्क के लिए एक कलर स्पेस नहीं दिखता. हर एक चीज़ के कुछ ऐसे पल होते हैं, जब उनसे मनचाहा नतीजा मिलता है.
अगर कोई एक सबसे अच्छी जगह होती, तो ज़्यादा नए स्पेस नहीं शुरू होते.
हालांकि, मैं यह कह सकता हूं कि सीआईई स्पेस—lab, oklab, lch, और oklch—मेरे लिए शुरुआत से हैं. अगर मुझे अपनी उम्मीद के हिसाब से नतीजे नहीं मिलते, तो मैं दूसरी जगहों पर भी
तैयार हो जाऊंगी. रंगों को मिक्स करने और ग्रेडिएंट बनाने के लिए, मैं oklab के डिफ़ॉल्ट विनिर्देशों के विकल्प से सहमत हूं. कलर सिस्टम और यूज़र इंटरफ़ेस के सभी रंगों के लिए, मुझे
oklch पसंद है.
यहां कुछ लेख दिए गए हैं जिनमें लोगों ने इन नए कलर स्पेस और सुविधाओं
को ध्यान में रखते हुए, कलर करने से जुड़ी अपनी अपडेट की हुई रणनीतियों को शेयर किया है. उदाहरण के लिए, आंद्रे सिटनिक
oklch पर पूरी तरह से गए हैं, हो सकता है कि वे आपको भी ऐसा करने के लिए प्रेरित करें:
- सीएसएस में OKLCH: हमने आरजीबी और एचएसएल के बजाय ऐंड्रे सिटनिक का शॉर्ट वीडियो क्यों बनाया
- कलर फ़ॉर्मैट जोश डब्ल्यू॰ कोमाउ
- क्रिस कॉयर का OK, OKLCH
एचडी सीएसएस के रंग पर माइग्रेट करना
आपके वेब प्रोजेक्ट के रंग को पूरे गैमट डिसप्ले के साथ काम करने के लिए अपडेट करने की दो मुख्य रणनीतियां हैं:
खुशनुमा डिग्रेडेशन
नए कलर स्पेस का इस्तेमाल करें और ब्राउज़र और ऑपरेटिंग सिस्टम को यह पता लगाने दें कि डिसप्ले की क्षमताओं के आधार पर कौनसा रंग दिखाना है.प्रोग्रेसिव एन्हैंसमेंट
उपयोगकर्ता के ब्राउज़र की क्षमताओं का आकलन करने के लिए,@supportsऔर@mediaका इस्तेमाल करें. शर्तें पूरी होने पर, सभी के लिए गैमट कलर उपलब्ध कराएं.
अगर ब्राउज़र को display-p3 रंग नहीं समझ आता, तो:
color: red;
color: color(display-p3 1 0 0);
अगर ब्राउज़र को display-p3 रंग समझ में आता है, तो:
color: red;
color: color(display-p3 1 0 0);
दोनों के अपने फ़ायदे और नुकसान हैं. यहां इसके फ़ायदों और नुकसान की सूची दी गई है:
खुशनुमा गिरावट
- फ़ायदे
- सबसे आसान रास्ता.
- अगर वाइड गैमट डिसप्ले नहीं है, तो ब्राउज़र मैप या sRGB को क्लैंप कर देगा, इसलिए इसकी ज़िम्मेदारी ब्राउज़र की ही होगी.
- नुकसान
- ब्राउज़र, क्लैंप या गैमट मैप को उस रंग में बदल सकता है जो आपको पसंद न हो.
- शायद ब्राउज़र रंग का अनुरोध न समझ पाए और पूरी तरह से काम न कर सके. हालांकि, दो बार रंग तय करके इसे कम किया जा सकता है. इससे कैस्केड उस रंग पर वापस आ जाता है जिसे वह समझ पाता है.
प्रोग्रेसिव एन्हैंसमेंट
- फ़ायदे
- रंग की क्वालिटी को मैनेज करके, ज़्यादा कंट्रोल मिलता है.
- मौजूदा कलर पर कोई असर न डालने वाली अतिरिक्त रणनीति.
- नुकसान
- आपको दो अलग-अलग कलर सिंटैक्स मैनेज करने होंगे.
- आपको दो अलग-अलग कलर गैमट मैनेज करने होंगे.
गैमट और कलर स्पेस की सुविधा की जांच की जा रही है
ब्राउज़र कई तरह की सुविधाओं के लिए सहायता की जांच करने देता है. साथ ही, सीएसएस और JavaScript से कलर सिंटैक्स की सुविधा भी देता है. लोगों ने जो रंग उपलब्ध कराए हैं उनकी सटीक जानकारी उपलब्ध नहीं कराई गई है. एक सामान्य जवाब दिया जाता है, ताकि उपयोगकर्ता की निजता बनी रहे. हालांकि, कलर स्पेस की सटीक सहायता दी जाती है, क्योंकि यह उपयोगकर्ता के हार्डवेयर की क्षमता के बारे में नहीं है, जैसे कि गैमट.
कलर गैमट से जुड़ी सहायता क्वेरी
नीचे दिए गए कोड के उदाहरणों में देखा जा सकता है कि वेबसाइट पर आने वाले उपयोगकर्ता के डिस्प्ले में कौन-कौनसे रंग मौजूद हैं.
सीएसएस से जांच की जा रही है
सहायता के लिए सबसे कम खास सवाल,
dynamic-range
मीडिया क्वेरी है:
@media (dynamic-range: high) {
/* safe to use HD colors */
}
अनुमानित या ज़्यादा जानकारी के लिए,
color-gamut
मीडिया क्वेरी का इस्तेमाल किया जा सकता है:
@media (color-gamut: srgb) {
/* safe to use srgb colors */
}
@media (color-gamut: p3) {
/* safe to use p3 colors */
}
@media (color-gamut: rec2020) {
/* safe to use rec2020 colors */
}
सहायता की जांच करने के लिए, दो अतिरिक्त मीडिया क्वेरी हैं:
JavaScript से जांच की जा रही है
JavaScript के लिए, window.matchMedia() फ़ंक्शन को कॉल करके आकलन करने के लिए मीडिया क्वेरी को पास किया जा सकता है.
const hasHighDynamicRange = window
.matchMedia('(dynamic-range: high)')
.matches;
console.log(hasHighDynamicRange); // true || false
const hasP3Color = window
.matchMedia('(color-gamut: p3)')
.matches;
console.log(hasP3Color); // true || false
ऊपर दिए गए पैटर्न को बाकी मीडिया क्वेरी के लिए कॉपी किया जा सकता है.
कलर स्पेस से जुड़ी सहायता क्वेरी
नीचे दिए गए कोड के उदाहरण, वेबसाइट पर आने वाले उपयोगकर्ता के ब्राउज़र की जांच करते हैं. साथ ही, उन कलर स्पेस की जांच भी करते हैं जिनके साथ काम करना है.
सीएसएस से जांच की जा रही है
किसी कलर स्पेस से जुड़ी सहायता पाने के लिए, @supports क्वेरी का इस्तेमाल किया जा सकता है:
@supports (background: rgb(0 0 0)) {
/* rgb color space supported */
}
@supports (background: color(display-p3 0 0 0)) {
/* display-p3 color space supported */
}
@supports (background: oklch(0 0 0)) {
/* oklch color space supported */
}
JavaScript से जांच की जा रही है
JavaScript के लिए, CSS.supports() फ़ंक्शन को कॉल करके, प्रॉपर्टी और वैल्यू पेयर को पास किया जा सकता है. इससे यह पता चलता है कि ब्राउज़र समझ पाता है या नहीं.
CSS.supports('background: rgb(0 0 0)')
CSS.supports('background: color(display-p3 0 0 0)')
CSS.supports('background: oklch(0 0 0)')
हार्डवेयर और पार्स करने की जांच एक साथ करें
रंग की इन नई सुविधाओं को लागू करने के लिए हर ब्राउज़र की इंतज़ार करते समय, हार्डवेयर क्षमता और रंग पार्स करने की क्षमता, दोनों को जांचना बेहतर होगा. रंगों को हाई डेफ़िनिशन में बदलने के लिए, मैं अक्सर इसका इस्तेमाल करता हूं:
:root {
--neon-red: rgb(100% 0 0);
--neon-blue: rgb(0 0 100%);
}
/* is the display HD? */
@media (dynamic-range: high) {
/* does this browser understand display-p3? */
@supports (color: color(display-p3 0 0 0)) {
/* safe to use display-p3 colors */
--neon-red: color(display-p3 1 0 0);
--neon-blue: color(display-p3 0 0 1);
}
}
Chrome DevTools की मदद से कलर डीबग करना
Chrome DevTools को अपडेट किया गया है. इसमें नए टूल भी मौजूद हैं, जिनकी मदद से डेवलपर को एचडी कलर बनाने, उसे बदलने, और डीबग करने में मदद मिलती है.
कलर पिकर अपडेट किया गया
कलर पिकर, अब सभी नए कलर स्पेस के साथ काम करता है. लेखकों को चैनल की वैल्यू के हिसाब से, उनसे इंटरैक्ट करने की अनुमति देना.
गैमट सीमाएं
एक गैमट बाउंड्री लाइन भी जोड़ी गई है, जो एसआरजीबी और Display-p3 गैमट के बीच एक लाइन बनाती है. यह साफ़ तौर पर बताना कि चुना गया रंग किस गैमट में है.
इससे लेखकों को एचडी और नॉन-एचडी रंगों के बीच अंतर करने में मदद मिलती है.
यह color() फ़ंक्शन और नए कलर स्पेस के साथ काम करते समय
खास तौर पर मददगार होती है, क्योंकि ये नॉन-एचडी और एचडी, दोनों तरह के रंगों को बनाने में सक्षम हैं. अगर आपको यह देखना है कि आपका रंग कौनसा है, तो कलर पिकर पॉप-अप करें और देखें!
रंगों को बदला जा रहा है
DevTools कई सालों से, hsl, hwb, आरजीबी, और हेक्स जैसे काम करने वाले फ़ॉर्मैट के बीच रंगों को बदल रहा है. यह कन्वर्ज़न करने के लिए,
स्टाइल पैनल में स्क्वेयर कलर स्वैच पर shift + click. नए कलर टूल से सिर्फ़ कन्वर्ज़न नहीं मिलते, बल्कि एक पॉप-अप मिलता है. यहां लेखक अपनी पसंद का कन्वर्ज़न देख सकते हैं और उसे चुन सकते हैं.
कन्वर्ज़न करते समय, यह जानना ज़रूरी है कि स्पेस में फ़िट करने के लिए कन्वर्ज़न को क्लिप किया गया था या नहीं. DevTools में अब बदले गए रंग के लिए चेतावनी का एक आइकॉन है, जो आपको इस क्लिपिंग के बारे में चेतावनी देता है.
हाल ही में की गई सूचना में, DevTools में सीएसएस को डीबग करने की ज़्यादा सुविधा के बारे में जानें.
नतीजा
वेब पर बिना एसआरजीबी वाली कलर स्पेस अभी शुरुआती दौर में हैं. हालांकि, मुझे लगता है कि समय के साथ डिज़ाइनर और डेवलपर इसका इस्तेमाल बढ़ा सकेंगे. उदाहरण के लिए, किसी डिज़ाइन सिस्टम को बनाने के लिए किस कलर स्पेस की जानकारी होना, क्रिएटर्स के टूलबेल्ट में शामिल होने के लिए एक मज़बूत टूल है. हर कलर स्पेस खास सुविधाएं देता है. साथ ही, इसे सीएसएस की खास बातों में जोड़े जाने की वजह भी बताई गई है. इन्हें छोटे फ़ॉर्मैट में शुरू करना और ज़रूरत के मुताबिक जोड़ना ठीक रहता है.
रंगों वाले इन नए खिलौनों के साथ खेलने का आनंद लें! ज़्यादा वाइब्रेंस, एक जैसे बदलाव और इंटरपोलेशन और कुल मिलाकर आपके उपयोगकर्ताओं को ज़्यादा रंगीन अनुभव मिलता है.
आपकी मदद के लिए कुछ और लेख
- https://lea.verou.me/2020/04/lch-colors-in-css-what-why-and-how/
- https://www.w3.org/Graphics/Color/Workshop/slides/lilley/lilley.html
- https://darker.ink/writings/Towards-richer-colors-on-the-Web
- https://bottosson.github.io/posts/colorpicker/
- https://www.w3.org/Graphics/Color/Workshop/slides/Erias.pdf
- https://atmos.style/blog/lch-color-space
- https://stripe.com/blog/accessible-color-systems
- https://cran.r-project.org/web/packages/colordistance/vignettes/color-spaces.html
- https://afc163.github.io/color3d/
- https://github.com/nschloe/colorio#gamut-visualization
- https://www.learnui.design/tools/gradient-generator.html
- https://webkit.org/blog/10042/wide-gamut-color-in-css-with-display-p3/
- https://www.w3.org/TR/css-color-4/
- https://www.w3.org/TR/css-color-5/
- https://en.wikipedia.org/wiki/CIE_1931_color_space
- https://www.joshwcomeau.com/css/color-formats/
- https://ciechanow.ski/color-spaces/