रंग

सीएसएस पॉडकास्ट - 006: कलर पार्ट एक

रंग किसी भी वेबसाइट का एक अहम हिस्सा होता है. सीएसएस में, रंग के टाइप, फ़ंक्शन, और ट्रीटमेंट के कई विकल्प होते हैं.

किस रंग का इस्तेमाल करना है, यह तय करने का तरीका क्या है? आप रंगों को सेमी-पारदर्शी कैसे बनाते हैं? इस लेख में, आपको ऐसे विकल्पों के बारे में जानकारी मिलेगी जिनसे अपने प्रोजेक्ट और टीम के लिए सही फ़ैसले लेने में मदद मिल सकती है.

सीएसएस में अलग-अलग तरह का डेटा होता है, जैसे कि स्ट्रिंग और संख्याएं. रंग इनमें से एक तरह का है और दूसरे टाइप का इस्तेमाल करता है, जैसे कि अपनी खुद की परिभाषाओं के लिए संख्या.

अंकों में रंग

इस बात की बहुत संभावना है कि सीएसएस में रंगों का आपका पहला एक्सपोज़र संख्यात्मक रंगों के ज़रिए हो. हम रंग की संख्यात्मक वैल्यू के साथ कुछ अलग-अलग फ़ॉर्म में काम कर सकते हैं.

हेक्स रंग

h1 {
  color: #b71540;
}

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

हेक्साडेसिमल रेंज 0-9 और A-F हैं. जब इन्हें छह अंकों के क्रम में इस्तेमाल किया जाता है, तब इन्हें आरजीबी की संख्या वाली रेंज में बदल दिया जाता है. रेंज 0 से 255 के बीच होती है. यह रेंज लाल, हरे, और नीले रंग के चैनलों से जुड़ी होती है.

संख्या वाले किसी रंग के साथ ऐल्फ़ा वैल्यू भी तय की जा सकती है. ऐल्फ़ा वैल्यू, पारदर्शिता का प्रतिशत है. हेक्स कोड में, छह अंकों के क्रम में दो और अंक जोड़े जाते हैं. इससे आठ अंकों का क्रम बन जाता है. उदाहरण के लिए, काले रंग के हेक्स कोड को सेट करने के लिए #000000 लिखें. 50% पारदर्शिता जोड़ने के लिए, इसे #00000080 में बदलें.

हेक्स स्केल 0-9 और A-F है, इसलिए हो सकता है कि पारदर्शिता की वैल्यू, आपकी उम्मीद के मुताबिक न हों. यहां ब्लैक हेक्स कोड, #000000 में जोड़ी जाने वाली कुछ कुंजी और सामान्य वैल्यू दी गई हैं:

  • 0% ऐल्फ़ा—जो पूरी तरह से पारदर्शी है—00 है: #00000000
  • 50% ऐल्फ़ा 80 है: #00000080
  • 75% ऐल्फ़ा BF है: #000000BF

दो अंकों के हेक्स को दशमलव में बदलने के लिए, पहला अंक लें और उसे 16 से गुणा करें (क्योंकि हेक्स आधार 16 है). इसके बाद, दूसरा अंक जोड़ें. 75% ऐल्फ़ा वर्शन के उदाहरण के तौर पर BF का इस्तेमाल करना:

  1. B, 11 के बराबर है, जब 16 को 176 से गुणा किया जाता है
  2. F, 15 के बराबर है
  3. 176 + 15 = 191
  4. ऐल्फ़ा वैल्यू, 255 का 191—75% है

आरजीबी (लाल, हरा, नीला)

h1 {
  color: rgb(183, 21, 64);
}

आरजीबी कलर को rgb() कलर फ़ंक्शन के साथ तय किया जाता है. इसके लिए, पैरामीटर के तौर पर संख्याओं या प्रतिशत का इस्तेमाल किया जाता है. संख्याएं 0-255 की सीमा के बीच होनी चाहिए और प्रतिशत 0-255 के बीच होना चाहिए. आरजीबी 0-255 स्केल पर काम करता है, इसलिए 255 का मतलब 100% और 0 से 0% होगा.

आरजीबी में काले रंग को सेट करने के लिए, इसे rgb(0 0 0) के तौर पर सेट करें. यह शून्य लाल, शून्य हरा और शून्य नीला है. काले रंग को rgb(0%, 0%, 0%) के तौर पर भी बताया जा सकता है. सफ़ेद रंग इसके ठीक उलट होता है: rgb(255, 255, 255) या rgb(100%, 100%, 100%).

rgb() में किसी एक ऐल्फ़ा को दो में से किसी एक तरीके से सेट किया जाता है. लाल, हरे, और नीले पैरामीटर के बाद / जोड़ें या rgba() फ़ंक्शन का इस्तेमाल करें. ऐल्फ़ा को 0 और 1 के बीच के किसी प्रतिशत या दशमलव में तय किया जा सकता है. उदाहरण के लिए, आधुनिक ब्राउज़र में 50% ऐल्फ़ा ब्लैक सेट करने के लिए, यह लिखें: rgb(0 0 0 / 50%) या rgb(0 0 0 / 0.5). ज़्यादा मदद पाने के लिए, rgba() फ़ंक्शन का इस्तेमाल करके, यह लिखें: rgba(0, 0, 0, 50%) या rgba(0, 0, 0, 0.5).

एचएसएल (ह्यू, सैचुरेशन, लाइटनेस)

h1 {
  color: hsl(344, 79%, 40%);
}

एचएसएल का मतलब है ह्यू, सैचुरेशन, और लाइटनेस. ह्यू कलर व्हील पर मौजूद वैल्यू के बारे में बताता है, 0 से 360 डिग्री तक. यह लाल से शुरू होता है (0 और 360 दोनों). 180 या 50% का कलर नीली रेंज में होगा. हमें दिखने वाले रंग की शुरुआत इसी से होती है.

कलर व्हील, जिसमें 60 डिग्री की बढ़ोतरी में डिग्री की वैल्यू के लिए लेबल होते हैं. इससे, एंगल की हर वैल्यू से मिलने वाले विज़ुअल से मदद मिलती है

चुना गया रंग कितना चमकीला है, इसे सैचुरेशन कहते हैं. पूरी तरह से फीका रंग (0% सेचुरेशन के साथ) ग्रेस्केल दिखेगा. आखिर में, हल्कापन वह पैरामीटर है जो जोड़ी गई रोशनी के स्केल को सफ़ेद से काले रंग में बताता है. 100% की रोशनी आपको हमेशा सफ़ेद रंग का देगी.

hsl() रंग फ़ंक्शन का इस्तेमाल करके, hsl(0 0% 0%) या hsl(0deg 0% 0%) लिखकर ट्रू ब्लैक को लिखा जा सकता है. इसकी वजह यह है कि कलर व्हील पर ह्यू पैरामीटर डिग्री 0-360 तय करता है, वहीं अगर संख्या टाइप का इस्तेमाल किया जाता है. आपके पास ऐंगल टाइप भी इस्तेमाल करने का विकल्प है, जो (0deg) या (0turn) है. संतृप्ति और लाइटनेस, दोनों को प्रतिशत में तय किया जाता है.

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

ऐल्फ़ा को hsl() में उसी तरह तय किया जाता है जिस तरह rgb() में रंग, संतृप्ति, और रोशनी के पैरामीटर के बाद / जोड़ा जाता है या hsla() फ़ंक्शन का इस्तेमाल किया जाता है. ऐल्फ़ा को 0 और 1 के बीच के किसी प्रतिशत या दशमलव में तय किया जा सकता है. उदाहरण के लिए, 50% ऐल्फ़ा ब्लैक सेट करने के लिए, इस्तेमाल करें: hsl(0 0% 0% / 50%) या hsl(0 0% 0% / 0.5). hsla() फ़ंक्शन का इस्तेमाल करके, लिखें: hsla(0, 0%, 0%, 50%) या hsla(0, 0%, 0%, 0.5).

रंगीन कीवर्ड

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

स्टैंडर्ड रंगों के अलावा, कुछ खास कीवर्ड भी उपलब्ध हैं:

  • transparent पूरी तरह से पारदर्शी रंग है. यह background-color की शुरुआती वैल्यू भी होती है
  • currentColor, color प्रॉपर्टी की डाइनैमिक वैल्यू है, जो कॉन्टेक्स्ट के हिसाब से कैलकुलेट की जाती है. अगर आपके टेक्स्ट का रंग red है और फिर border-color को currentColor पर सेट किया जाता है, तो वह भी लाल रंग का होगा. आपने जिस एलिमेंट पर currentColor को तय किया है, अगर उसमें color के लिए कोई वैल्यू तय नहीं की गई है, तो currentColor की गणना कैस्केड से की जाएगी

सीएसएस के नियमों में रंग का इस्तेमाल कहां करें

अगर कोई सीएसएस प्रॉपर्टी, <color> डेटा टाइप को वैल्यू के तौर पर स्वीकार करती है, तो वह रंग की जानकारी देने के ऊपर दिए गए किसी भी तरीके को स्वीकार करेगी. टेक्स्ट को स्टाइल देने के लिए, color, text-shadow, और text-decoration-color प्रॉपर्टी का इस्तेमाल करें. ये सभी प्रॉपर्टी, वैल्यू के हिस्से के तौर पर रंग को वैल्यू या रंग के तौर पर स्वीकार करती हैं.

बैकग्राउंड के लिए, रंग को background या background-color की वैल्यू के तौर पर सेट किया जा सकता है. ग्रेडिएंट में रंगों का इस्तेमाल भी किया जा सकता है, जैसे कि linear-gradient. ग्रेडिएंट एक तरह की इमेज होती है, जिसे सीएसएस में प्रोग्राम के हिसाब से तय किया जा सकता है. ग्रेडिएंट, रंग फ़ॉर्मैट के किसी भी कॉम्बिनेशन में दो या उससे ज़्यादा रंग स्वीकार करता है. जैसे, हेक्स, आरजीबी या एचएसएल.

आखिर में, border-color और outline-color ने आपके बॉक्स पर बॉर्डर और आउटलाइन का रंग सेट किया. box-shadow प्रॉपर्टी, एक वैल्यू के तौर पर रंग भी स्वीकार करती है.

आपने जो सीखा है उसकी जांच करें

रंगों के बारे में अपनी जानकारी को परखें

इनमें से कौनसे रंग मान्य हैं?

rbga(400 0 1)
आरबीए, आरजीबीए में टाइपिंग की एक गलती है और 400 किसी भी तरह से स्वीकार किए जाने से बड़ा है. इसलिए, यह अमान्य हो जाता है.
#0f08
🎉
#OOFZ2
यह कोई हेक्स वैल्यू नहीं है. इसमें सिर्फ़ पांच संख्याएं हैं और Z शामिल है. इससे अमान्य वैल्यू बनती है.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

अमान्य hsl रंग का पता लगाएं.

hsl(5, 0%, 90%)
यह एक मान्य hsl वैल्यू है.
hsl(.5turn 40% 60%)
यह एक मान्य hsl वैल्यू है.
hsl(0, 0, 0)
🎉 आपने पाया कि दूसरी और तीसरी वैल्यू, प्रतिशत में होनी चाहिए.
hsl(2rad 50% 50%)
यह एक मान्य hsl वैल्यू है.
hsl(0 0% 0% / 20%)
यह एक मान्य hsl वैल्यू है.

रिसॉर्स