रंग

CSS पॉडकास्ट - 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. ऐल्फ़ा वैल्यू 191 है, जो 255 का 75% है

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

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

आरजीबी रंगों को rgb() कलर फ़ंक्शन की मदद से तय किया जाता है. इसके लिए, पैरामीटर के तौर पर संख्याओं या प्रतिशत का इस्तेमाल किया जाता है. संख्याएं 0 से 255 के बीच होनी चाहिए. साथ ही, प्रतिशत 0% से 100%‌ के बीच होने चाहिए. आरजीबी, 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)
rbga, rgba टाइप करने में हुई गलती है. साथ ही, 400, स्वीकार किए जाने वाले रंग की सीमा से ज़्यादा है. इसलिए, यह अमान्य है.
#0f08
🎉
#OOFZ2
यह हेक्स वैल्यू नहीं है. इसमें सिर्फ़ पांच अंक हैं और Z शामिल है, जिसकी वजह से यह अमान्य है.
rgb(255, 0, 0)
🎉
hsl(180deg 50% 50%)
🎉
hotpink
🎉

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

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

संसाधन