जब स्क्रीन पर रंग बिखेरने की बात आती है, तो कोडिंग के साथ ऐसा करने के कुछ तरीके हैं। HEX, RGBA, और HSLA तीन सबसे अधिक उपयोग की जाने वाली कलर कोड सिस्टम हैं।
आप शायद पहले HEX कोड और RGB से मिल चुके हैं, लेकिन HSL, जो अधिक मानव-पठनीय होने के बावजूद, अभी तक आपके रडार पर नहीं हो सकता है। रंग लिखने का हर तरीका अलग-अलग स्थितियों में मायने रखता है, और आपको केवल प्रत्येक प्रकार की बुनियादी समझ चाहिए ताकि आप एक सूचित निर्णय ले सकें। यहां हम RGB, HEX और HSL के बीच के अंतर को समझाएंगे।
RGB (रेड, ग्रीन, ब्लू) क्या है
RGB वैल्यू से शुरू करना समझदारी है, क्योंकि लाल, हरा, और नीला वे तीन रंग हैं जिनका उपयोग स्क्रीन लगभग हर दूसरे रंग को उत्पन्न करने के लिए कर सकती हैं। यह "एडिटिव कलर मिक्सिंग" का उपयोग करके ऐसा करता है, लेकिन आपको RGB को समझने के लिए इसके विज्ञान में जाने की आवश्यकता नहीं है।
rgb(255, 0, 0) लाल है, क्योंकि R अधिकतम है। यदि आप G या B में से किसी को 255 पर सेट करते हैं, तो आपको पूर्ण हरा या पूर्ण नीला मिलेगा। उन सभी को एक साथ 255 पर सेट करें और आपको सफेद मिलेगा (सभी रंगों का योग), जबकि उन्हें शून्य करने पर काला मिलेगा। यदि आप एक चौथा मान जोड़ते हैं (अल्फा चैनल, 0 से 1 के बीच), तो आप पारदर्शिता भी प्राप्त कर सकते हैं: rgba(0, 0, 0, .5) आधे-पारदर्शी काले में अनुवादित होता है।
यह सरल है, हां, लेकिन वास्तव में इतना सहज नहीं है। RGB बैलेंस काफी बदल सकता है भले ही आप केवल एक रंग की छाया बदल रहे हों, जिससे किसी RGB जनरेटर (जिनमें से सौभाग्य से कई हैं) के बिना मनुष्यों के लिए मैन्युअल समायोजन करना बहुत मुश्किल हो जाता है।
हेक्साडेसिमल कलर कोड क्या हैं
हेक्स केवल RGB वैल्यू लिखने का एक अलग तरीका है। #6a79f7 (कॉर्नफ्लावर ब्लू) जैसी कोई चीज सीधे rgb(106, 121, 247) पर मैप होती है। 6a लाल है, 79 हरा है, और f7 नीला है।
सबसे पहले, आपको पता होना चाहिए कि हेक्स कलर सिस्टम में अक्षर "a-f" दस से पंद्रह तक की संख्याओं को दर्शाते हैं। दूसरा, यह हेक्साडेसिमल है, जिसका अर्थ है कि सब कुछ बेस 16 में है। बेस 10 में 21 2 * 10 + 1 है, लेकिन हेक्साडेसिमल में यह 2 * 16 + 1 होगा। बस पहली संख्या को 16 से गुणा करें और दूसरी संख्या जोड़ें - यह उतना ही आसान है! 6a = 6 * 16 + 10 या 106। 79 = 7 * 16 + 9 या 121।
गणित मजेदार है, लेकिन यह स्पष्ट रूप से हेक्साडेसिमल कोड को मनुष्यों के लिए RGB से भी अधिक दर्दनाक बनाता है, हालांकि उन्हें कॉपी-पेस्ट करना आसान है और उनमें यादगार अक्षर/संख्या संयोजन हो सकते हैं।
आप हेक्स कोड में पारदर्शिता भी जोड़ सकते हैं, शुरुआत में 255 के कुछ प्रतिशत के बराबर मान डालकर, जैसे: #806a79f7। हेक्साडेसिमल में 80 = 126, जो अधिकतम मान 255 के 50% के करीब है।
HSL (ह्यू, सैचुरेशन, लाइटनेस) क्या है
HSL को बहुत हद तक मानव पठनीयता के लिए डिजाइन किया गया था, और यह विशेष रूप से RGB विकल्प के रूप में लोकप्रियता प्राप्त कर रहा है। यह इस तरह काम करता है:
ह्यू का अर्थ रंग है, और यह आपको बताने के लिए कलर व्हील की डिग्री का उपयोग करता है कि आप किस रंग पर हैं। यदि आप कलर व्हील और इन मुख्य रंगों की स्थिति जानते हैं, तो आपको यह बताने में सक्षम होना चाहिए कि 45 नारंगी जैसा दिखेगा और 270 बैंगनी जैसा दिखेगा, बस इसके बारे में एक सेकंड के लिए सोचकर।
- 0 = लाल
- 60 = पीला
- 120 = हरा
- 180 = सियान
- 240 = नीला
- 300 = मैजेंटा
सैचुरेशन अनिवार्य रूप से यह है कि रंग कितना रंगीन है। 0% सैचुरेशन का अर्थ है कि रंग सिर्फ ग्रे का एक शेड होगा, जबकि 100% का अर्थ है कि यह पूरी ताकत से दिखाई देगा। यदि आप अपने रंग को म्यूट करना चाहते हैं या इसे थोड़ा अधिक पॉप बनाना चाहते हैं, तो आप बस इस मान को बदल सकते हैं।
लाइटनेस आपको बताता है कि रंग कितना गहरा या चमकीला है। 0% लाइटनेस का अर्थ है कि आपका रंग काला होगा, चाहे ह्यू या सैचुरेशन सेटिंग कुछ भी हो, और 100% लाइटनेस आपको सफेद देगी। जैसा कि आपने अनुमान लगाया होगा, 50% आपको सबसे सटीक रंग देता है।
उस जानकारी के साथ, आपको तुरंत यह बताने में सक्षम होना चाहिए कि hsl(0, 100%, 50%) का क्या अर्थ है। यह सिर्फ लाल है! एक गहरा, समृद्ध लाल चाहते हैं? 0, 70%, 40% आज़माएं। शायद आप वही चाहते हैं, लेकिन नीले में? बस 0 को 240 में बदलें और आपके पास यह है! इसमें पारदर्शिता भी है - यह RGB की तरह ही काम करता है: बस एक चौथा मान जोड़ें (0 और 1 के बीच), जैसे: hsla(240, 70%, 40%, .5)।
HSV/HSB और HSI
क्या? और कलर मॉडल? यह कब खत्म होगा? कंप्यूटर पर रंगों के साथ काम करने वाले अधिकांश लोगों के लिए, यह पहले ही खत्म हो चुका है। HEX, RGB, और HSL अब तक रंगों को नोट करने के सबसे आम तरीके हैं। यदि आप ऐसे क्षेत्र में हैं जिसमें बहुत सारी छवियां और रंग शामिल हैं, जैसे ग्राफिक डिजाइन या छवियों पर मशीन लर्निंग, तो आप इन अधिक गूढ़ कलर मॉडल में से किसी एक का उपयोग करने वाले लोगों से मिल सकते हैं, या यहां तक कि यहां सूचीबद्ध नहीं किए गए अन्य मॉडल भी।
HSB का अर्थ है "ह्यू सैचुरेशन ब्राइटनेस" और HSV का अर्थ है ह्यू सैचुरेशन वैल्यू। वे वास्तव में एक ही मॉडल के लिए सिर्फ अलग-अलग नाम हैं, और HSL से उनका सबसे बड़ा अंतर इस बात में है कि वे सैचुरेशन को कैसे परिभाषित करते हैं। HSI (ह्यू सैचुरेशन इंटेंसिटी) में HSB/HSV से कुछ मामूली अंतर हैं, लेकिन इसका व्यापक रूप से उपयोग नहीं किया जाता है, इसलिए संभावना है कि आप इसे जंगल में ज्यादा नहीं देखेंगे।
मुझे किस कलर मॉडल का उपयोग करना चाहिए?
आम तौर पर, एक कलर मॉडल चुनना एक मामूली डिजाइन निर्णय है, लेकिन अच्छी चीजें कई छोटे निर्णयों से बनती हैं। सामान्य तौर पर, हेक्स कोड कॉपी-पेस्ट को आसान बनाते हैं और उन स्थितियों में बहुत अच्छे होते हैं जहां मनुष्यों के शामिल होने की संभावना नहीं होती। RGB/RGBA पठनीयता के लिए अच्छा है और तब सबसे अच्छा उपयोग किया जाता है जब यह अच्छा होगा कि एक मानव कभी-कभी पारदर्शिता को ट्वीक कर सके। यदि किसी मानव को मैन्युअल रूप से रंग बदलने की आवश्यकता होगी, तो HSL/HSLA के साथ जाएं। इसके अलावा, यह बहुत हद तक वरीयता की बात है, हालांकि टीम HSL के लोग थोड़े अधिक स्मार्ट और बेहतर दिखने वाले होते हैं।
