रंग

CSS Podcast - 006: कलर का पहला हिस्सा

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

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

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

रंग चुनना

नाम वाले रंग

रंग चुनने का सबसे आसान तरीका यह है कि आप CSS में मौजूद 148 नाम वाले रंगों में से कोई एक चुनें. ये सामान्य अंग्रेज़ी के नाम होते हैं, जैसे कि purple, tomato, और goldenrod. वेब अल्मनैक के मुताबिक, सबसे लोकप्रिय नामों में black, white, red, blue, और gray शामिल हैं. हमारे पसंदीदा में goldenrod, aliceblue, और hotpink शामिल हैं.

अंकों के लिए रंग

नाम वाले रंगों का इस्तेमाल करना आसान हो सकता है. हालांकि, आपको ऐसे रंगों का इस्तेमाल करना पड़ सकता है जो उस सेट में उपलब्ध नहीं हैं. संख्या वाली वैल्यू के साथ रंगों को अलग-अलग तरीकों से तय किया जा सकता है.

रंगों के हेक्स कोड

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) लिखें.

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

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

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

सैचुरेशन से पता चलता है कि चुना गया रंग कितना चमकीला है. पूरी तरह से डीसैच्युरेट किया गया रंग (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) लिखें.

हाई डेफ़िनिशन वाले रंग

आरजीबी और एचएसएल, sRGB गैमट में रंगों को तय करते हैं. नए मॉनिटर, इन फ़ॉर्मैट में बताए गए रंगों के अलावा, sRGB गैमट के बाहर के कई रंगों के साथ काम करते हैं. सीएसएस के कई फ़ंक्शन की मदद से, ये रंग चुने जा सकते हैं.

color() फ़ंक्शन

h1 {
  color: color(srgb 0.9 0.2 0.4);
}

सीएसएस color() फ़ंक्शन की मदद से, किसी खास कलर स्पेस में रंग चुना जा सकता है. पहला आर्ग्युमेंट, इस्तेमाल किया जाने वाला कलर स्पेस है. इससे, नीचे दिए गए चैनलों के विकल्प तय होते हैं. rgb() की तरह, / के बाद 0 और 1 के बीच कोई संख्या या प्रतिशत सेट करके, अल्फा चैनल सेट किया जा सकता है.

उदाहरण के लिए, पिछले कोड स्निपेट में मौजूद गहरे लाल रंग को rgb(183 21 64) के तौर पर परिभाषित किया गया है. इसे प्रतिशत के तौर पर rgb(72% 8% 25%) के तौर पर परिभाषित किया जा सकता है. color(srgb .72 .08 .25) के साथ एक ही रंग तय करने के लिए, color() फ़ंक्शन का इस्तेमाल srgb कीवर्ड के साथ किया जा सकता है.

srgb, कलर स्पेस सेट करता है और हमें बताता है कि अगले तीन आर्ग्युमेंट, लाल, हरा, और नीला हैं. वैल्यू, 0 से 255 के बजाय 0 से 1 तक होती हैं.

rgb() की तरह ही, हम अल्फा को / और प्रतिशत या दशमलव के साथ सेट कर सकते हैं, जो 0 और 1 के बीच हो.

color() फ़ंक्शन के साथ कई कलर स्पेस का इस्तेमाल किया जा सकता है. हर कलर स्पेस के अलग-अलग फ़ायदे और इस्तेमाल के उदाहरण होते हैं.

Display P3

h1 {
  color: color(display-p3 0.9 0.2 0.4);
}

Display P3 गैमट में sRGB की तुलना में 50% ज़्यादा रंग होते हैं. color() फ़ंक्शन का इस्तेमाल करके, Display P3 कलर स्पेस की मदद से Display P3 गैमट में सभी रंगों को तय किया जा सकता है.

Display P3 में काले रंग को सेट करने के लिए, उसे color(display-p3 0 0 0) के तौर पर तय करें. color() फ़ंक्शन के लिए display-p3 कलर स्पेस तय करने के बाद, आपके पास तीन चैनल होते हैं: लाल, हरा, और नीला. ये color(srgb) की तरह ही होते हैं. हालांकि, चैनल वैल्यू, बड़े कलर स्पेस में निर्देशांक दिखाती हैं. इसलिए, एक ही चैनल वैल्यू का मतलब अलग-अलग होगा.

color(srgb 1 .5 0) एक ऑरेंज रंग है, जो color(display-p3 0.93596 0.52724 0.1983) के बराबर है. नारंगी रंग को sRGB स्पेस से color(display-p3 1 .5 0) में बदलकर, ज़्यादा चमकीला बनाया जा सकता है.

Oklab

Oklab को oklab() फ़ंक्शन की मदद से तय किया जाता है. इसमें लाइटनेस, a, और b चैनल होते हैं. यह स्मूद ग्रेडिएंट बनाने और रंग के ह्यू और लाइटनेस को बनाए रखते हुए, रंग के संतृप्ति को अडजस्ट करने के लिए मददगार है.

h1 {
  color: oklab(75% 0.1 0.1)
}

लाइटनेस चैनल, 0 से 1 या 0% से 100% तक जाता है. 0 के लाइटनेस लेवल वाले रंग हमेशा काले रंग के होंगे.

a चैनल, -0.4 से 0.4 या 0% से 100% पर जाता है. कम वैल्यू ज़्यादा हरे रंग की होती हैं और ज़्यादा वैल्यू ज़्यादा लाल रंग की होती हैं.

b चैनल, -0.4 से 0.4 या 0% से 100% पर जाता है. कम वैल्यू नीले रंग की होती हैं और ज़्यादा वैल्यू पीले रंग की होती हैं.

OkLCh

OkLCh, OKLab का पोलर या सिलिंड्रिकल फ़ॉर्म है. इसे लाइटनेस, क्रोमा, और ह्यू के चैनलों से तय किया जाता है. यह रंगों को एक जैसा करने के लिए, एक जैसी भावना के साथ अडजस्ट करने में मददगार है. इसका मतलब है कि ह्यू में बदलाव करने से, रंग के हल्के या गहरे होने पर कोई असर नहीं पड़ेगा.

h1 {
  color: oklch(80% 0.1 200)
}

आपने एचएसएल में लाइटनेस और ह्यू का इस्तेमाल किया है और क्रोमा, संतृप्ति जैसा ही है. oklch(0 0 0) का इस्तेमाल करके काले रंग को और oklch(1 0 0) का इस्तेमाल करके सफ़ेद रंग को सेट किया जा सकता है.

लाइटनेस चैनल, 0 से 1 या 0% से 100% तक जाता है. 0 के लाइटनेस लेवल वाले रंग हमेशा काले रंग के होंगे.

क्रोमा चैनल से यह तय होता है कि रंग कितना ज़्यादा चमकीला है—0 या 0% का मतलब है कि रंग में संतृप्ति नहीं है और ज़्यादा वैल्यू का मतलब है कि रंग ज़्यादा चमकीला है. 100% की वैल्यू, .4 की वैल्यू जैसी ही होती है. हालांकि, .4 के आस-पास की वैल्यू से, गैमट से बाहर निकलने में देर नहीं लगती.

ह्यू की वैल्यू, hsl() की तरह ही डिग्री में दी जाती है.

OkLCh, Display P3 जैसे गैमट से सीमित नहीं है. इसलिए, आपको यह पक्का करना होगा कि आप ऐसे रंग बना रहे हैं जिन्हें दिखाया जा सकता है. oklch(80% 50% 200) एक चमकीला नीला रंग है, जो संख्या के हिसाब से एक सही रंग जैसा दिखता है. हालांकि, यह Display P3 गैमट से बाहर है.

अन्य स्पेस

सीएसएस में रंगों को तय करने के कई तरीके हैं. हालांकि, आपको सभी तरीकों को सीखने की ज़रूरत नहीं है. rgb() और हेक्स फ़ॉर्मैट का इस्तेमाल, आम तौर पर डिज़ाइन टूल और मौजूदा कोड में किया जाता है. साथ ही, इनके बारे में जानना भी फ़ायदेमंद होता है. ऐसे फ़ॉर्मैट के बारे में जानना भी मददगार होता है जिसमें बदलाव किए जा सकते हैं. hsl या oklch वैल्यू को सीधे तौर पर बदला जा सकता है. इससे, आपको यह पता चलता है कि नतीजे में कौनसा रंग दिखेगा.

ज़्यादा जानने के लिए, ज़्यादा रंग और नए स्पेस ऐक्सेस करना लेख पढ़ें.

सिस्टम के आइटम के लिए रंग

बैंगनी या नीले जैसे नाम वाले रंगों के अलावा, खास कीवर्ड भी उपलब्ध हैं:

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

रंगों में बदलाव करना

हो सकता है कि आपके पास अपनी साइट पर इस्तेमाल करने के लिए रंगों का पैलेट हो. हालांकि, होवर स्टेटस, बॉर्डर, और यूज़र इंटरफ़ेस (यूआई) के अन्य एलिमेंट के लिए, आपको उन रंगों के वैरिएंट की ज़रूरत पड़ सकती है. हर रंग के लिए अलग-अलग वैल्यू दी जा सकती है. हालांकि, सीएसएस में इन वैरिएंट को बनाने के लिए, रंगों में बदलाव करने के तरीके भी दिए गए हैं.

color-mix()

दो रंगों को मिलाकर मिले नतीजे का इस्तेमाल करने के लिए, color-mix() तरीके का इस्तेमाल किया जा सकता है. इसका इस्तेमाल, किसी रंग को सफ़ेद या काले रंग के साथ मिलाकर, हल्का या गहरा वैरिएंट बनाने के लिए किया जाता है.

color-mix() का इस्तेमाल करने के लिए, आपको दो रंगों के बारे में बताना होगा. साथ ही, यह भी बताना होगा कि आपको उन्हें कैसे मिक्स करना है (इंटरपोलेशन का तरीका) और आपको हर रंग का कितना हिस्सा चाहिए.

जिन कलर स्पेस में ह्यू होता है उनके लिए, यह तय करने का विकल्प भी होता है कि आपको कलर व्हील में किस दिशा में जाना है. डिफ़ॉल्ट रूप से, shorter पाथ का इस्तेमाल किया जाता है. हालांकि, longer या increasing और decreasing को भी चुना जा सकता है.

कलर स्पेस और डायरेक्शन, इंटरपोलेशन का तरीका है.

आपके पास हर रंग की मात्रा भी डालने का विकल्प होता है.

रिलेटिव कलर सिंटैक्स

रिलेटिव कलर सिंटैक्स का इस्तेमाल करके, सीधे तौर पर किसी कलर के साथ काम किया जा सकता है. इससे, किसी भी कलर को लेकर नया कलर बनाने के लिए, उस पर कैलकुलेशन की जा सकती है.

h1 {
  color: oklch(from red l c h);
}

oklch() फ़ंक्शन का इस्तेमाल करने का मतलब है कि आपको लाइटनेस, क्रोमा, और ह्यू चैनलों के साथ काम करना होगा. कीवर्ड from के बाद, किसी भी सिंटैक्स में कोई भी रंग तय किया जा सकता है. इसके बाद, आपको हर चैनल की वैल्यू अक्षर के तौर पर मिलती है. ऐसा करने पर, यह लाल रंग में दिखेगा. इसके लिए, आपको कुछ भी करने की ज़रूरत नहीं है.

बदलाव करने के लिए, calc() फ़ंक्शन का इस्तेमाल करके चैनल की वैल्यू बदली जा सकती हैं या चैनल को पूरी तरह से बदला जा सकता है. यहां हम एक ही red रंग का इस्तेमाल करते हैं, लेकिन इसे oklch(62% 0.25 29) के साथ तय करते हैं.

h1 {
  color: oklch(from oklch(62% 0.25 29) calc(l / 2) c 180);
}

लाइटनेस चैनल 62% / 2 या 31% है. क्रोमा चैनल में कोई बदलाव नहीं हुआ है, इसलिए यह 0.25 है. ह्यू चैनल 180 है. इससे नया रंग oklch(31% 0.25 180) बन जाता है, जो एक नया गहरा हरा रंग है.

आम तौर पर, इनपुट कलर के तौर पर कस्टम प्रॉपर्टी का इस्तेमाल किया जाता है. इसकी मदद से, डाइनैमिक तौर पर रंग के वैरिएशन बनाए जा सकते हैं.

ऐसा किसी भी कलर फ़ंक्शन के साथ किया जा सकता है. हालांकि, ऐसा उन कलर फ़ंक्शन के साथ करना ज़्यादा फ़ायदेमंद होता है जिनमें ऐसे चैनल होते हैं जिनसे आपको किए जाने वाले बदलावों के बारे में पता चलता है. उदाहरण के लिए, अगर आपको किसी रंग की चमक को अडजस्ट करना है, तो oklch या hsl चुनें, क्योंकि सीधे चमक वाले चैनल को बदला जा सकता है.

h1 {
  color: oklch(from var(--primary-color) calc(l * 0.9) c h);
}

रिलेटिव कलर सिंटैक्स या आरसीएस का इस्तेमाल करके, अपनी साइट के लिए रंगों का पैलेट बनाया जा सकता है.

गैमट से बाहर के रंग

आपका कॉन्टेंट अलग-अलग स्क्रीन पर दिखाया जाएगा. हो सकता है कि इनमें से कुछ स्क्रीन पर वाइड गैमट कलर काम करते हों और कुछ पर नहीं. अगर आपने कोई ऐसा रंग चुना है जो स्क्रीन पर काम नहीं करता, तो स्क्रीन पर दिखने वाला मिलता-जुलता रंग ढूंढने के लिए, स्क्रीन पर दिखने वाले रंगों के पैलेट को मैप करने की प्रोसेस शुरू की जाएगी. अगर आपको उन मामलों में खास रंग तय करने हैं, तो color-gamut मीडिया क्वेरी का इस्तेमाल किया जा सकता है.

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

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

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

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

देखें कि आपको क्या समझ आया

रंगों के बारे में अपनी जानकारी को टेस्ट करना

संसाधन

• एचएसएल के साथ ऐंगल का इस्तेमाल करने का तरीका दिखाने वाला आसान डेमो
• रंगों के बारे में पूरी जानकारी देने वाली गाइड
• वाइड गैमट कलर के बारे में पूरी जानकारी देने वाली गाइड
• [वीडियो] हेक्स कोड पढ़ने का तरीका बताने वाला वीडियो
• हेक्साडेसिमल कोड कैसे काम करते हैं