रंग

सीएसएस पॉडकास्ट - 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% से 100% के बीच होना चाहिए. आरजीबी 0-255 स्केल पर काम करता है, इसलिए, 255 वैल्यू 100% के बराबर होगी और 0 से 0% के बराबर होगी.

RGB में काला सेट करने के लिए, इसे 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%) लिखकर भी एक काले रंग के कपड़े को परिभाषित करते हैं. इसकी वजह यह है कि hue पैरामीटर कलर व्हील पर डिग्री तय करता है, अगर नंबर टाइप का इस्तेमाल किया जाता है, तो वह 0-360 है. आप चाहें, तो ऐंगल टाइप का इस्तेमाल करें, जो (0deg) या (0turn) है. रंग को गहरा या फीका करने और हल्के रंग दोनों को प्रतिशत में दिखाया जाता है.

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

ऐल्फ़ा की जानकारी 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. ग्रेडिएंट इमेज का एक ऐसा टाइप है जिसे सीएसएस में प्रोग्राम के हिसाब से तय किया जा सकता है. ग्रेडिएंट, कलर फ़ॉर्मैट के किसी भी कॉम्बिनेशन में दो या उससे ज़्यादा कलर स्वीकार करता है, जैसे कि हेक्स, आरजीबी या hsl.

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

देखें कि आपको कितना समझ आया है

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

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

rbga(400 0 1)
rbga, आरजीबीटीए में टाइप करने की गलती है और 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 वैल्यू है.

संसाधन