रंग बीनने वाला

कोई भी रंग चुनें और उसका कोड तुरंत पाएँ

रंग कोड वेब डिज़ाइन, ग्राफ़िक डिज़ाइन और प्रोग्रामिंग में हर जगह मौजूद हैं। जब आप कोई ऐसा रंग देखते हैं जिसे इस्तेमाल करना या दोबारा बनाना चाहते हैं, तो आपको उसका कोड चाहिए होता है — चाहे वह CSS के लिए एक HEX वैल्यू हो, Photoshop के लिए RGB त्रिक हो, या प्रोग्रामेटिक रंग हेरफेर के लिए HSL स्पेसिफ़िकेशन हो। यह टूल आपके चुने हुए किसी भी रंग के लिए ये तीनों फ़ॉर्मेट एक साथ दे देता है।

तीन रंग कोड फ़ॉर्मेट

HEX (हेक्साडेसिमल): वेब डेवलपमेंट में सबसे ज़्यादा इस्तेमाल होने वाला फ़ॉर्मेट। हैश चिह्न के साथ 0-9 अंकों और A-F अक्षरों की छह अंकों वाली स्ट्रिंग। हर जोड़ा एक रंग चैनल दर्शाता है: #RRGGBB। उदाहरण के लिए, #FF5733 में अधिकतम लाल (FF = 255), मध्यम हरा (57 = 87), और कम नीला (33 = 51) है। HEX कोड को संक्षिप्त रूप में भी लिखा जा सकता है जब हर जोड़े के दोनों अक्षर एक जैसे हों: #FF5500 बनकर #F50 हो जाता है।

RGB (लाल, हरा, नीला): हर रंग चैनल को 0 (कुछ नहीं) से 255 (अधिकतम) के बीच एक पूर्णांक के रूप में बताता है। यह डिजिटल स्क्रीन का मूल फ़ॉर्मेट है, जो लाल, हरे और नीले रंग की रोशनी छोड़ती हैं। rgb(255, 87, 51) वही रंग है जो #FF5733 है। RGB वैल्यू CSS (rgb(r, g, b)), JavaScript, Python और ज़्यादातर इमेज एडिटिंग सॉफ़्टवेयर में इस्तेमाल होती हैं।

HSL (ह्यू, सैचुरेशन, लाइटनेस): एक ज़्यादा सहज, इंसानी समझ वाला फ़ॉर्मेट। ह्यू शुद्ध रंग है जो एक रंग-चक्र पर 0° से 360° के कोण के रूप में व्यक्त होता है: 0° = लाल, 120° = हरा, 240° = नीला। सैचुरेशन बताता है कि रंग कितना गहरा या फीका है (0% = ग्रे, 100% = पूरी तरह सैचुरेटेड)। लाइटनेस बताता है कि रंग कितना हल्का या गहरा है (0% = काला, 100% = सफ़ेद, 50% = "सामान्य" पूरी तरह सैचुरेटेड रंग)। रंगों को व्यवस्थित ढंग से समायोजित करने के लिए HSL शानदार है: टिंट बनाने के लिए लाइटनेस बढ़ाएँ, शेड बनाने के लिए घटाएँ।

पिकर इस्तेमाल कैसे करें

रंग के स्वॉच पर क्लिक या टैप करके अपने ब्राउज़र का नेटिव कलर पिकर खोलें, कोई रंग नज़र से चुनें या कोई जानी-पहचानी वैल्यू टाइप करें, और HEX, RGB और HSL — तीनों कोड तुरंत साथ में अपडेट हो जाते हैं, आप जिस भी टूल या कोड में काम कर रहे हों वहाँ कॉपी करने के लिए तैयार। चूँकि यह पिकर किसी कस्टम इंटरफ़ेस की बजाय ब्राउज़र के अपने बने-बनाए इंटरफ़ेस का इस्तेमाल करता है, यह बिल्कुल वैसा ही व्यवहार करता है जैसी आप उम्मीद करेंगे और हर डिवाइस पर भरोसे के साथ काम करता है।

कौन-सा फ़ॉर्मेट कब इस्तेमाल करें

CSS और वेब डिज़ाइन: HEX और RGB दोनों व्यापक रूप से सपोर्ट किए जाते हैं, लेकिन HSL को दिन-ब-दिन ज़्यादा पसंद किया जा रहा है क्योंकि इसे समायोजित करना बेहद सहज है। किसी रंग को 10% हल्का बनाना HSL में आसान है; RGB में, इसके लिए नए चैनल वैल्यू निकालने पड़ते हैं।

प्रिंट डिज़ाइन: प्रिंट आमतौर पर CMYK (सायन, मैजेंटा, यलो, की/ब्लैक) इस्तेमाल करता है, जिसे यह टूल कवर नहीं करता। डिजिटल-से-प्रिंट कन्वर्ज़न के लिए, Adobe Illustrator जैसा पेशेवर सॉफ़्टवेयर इस्तेमाल करें।

प्रोग्रामिंग: RGB ज़्यादातर ग्राफ़िक्स लाइब्रेरी का मूल फ़ॉर्मेट है। HSL तब काम आता है जब आप प्रोग्रामेटिक ढंग से रंग पैलेट बनाना चाहते हैं।

रंग सिद्धांत की बुनियादी बातें

रंगों को समझने से आप इस टूल का ज़्यादा असरदार ढंग से इस्तेमाल कर पाते हैं:

पूरक रंग (Complementary): ह्यू व्हील पर एक-दूसरे के विपरीत (180° की दूरी पर) मौजूद रंग सबसे ज़्यादा कंट्रास्ट बनाते हैं। लाल (0°) और सायन (180°)।

समान (Analogous) रंग: ह्यू व्हील पर आस-पास (30-60° की दूरी पर) मौजूद रंग सामंजस्यपूर्ण, कम-कंट्रास्ट वाले पैलेट बनाते हैं।

त्रयी (Triadic) रंग: 120° की बराबर दूरी पर मौजूद तीन रंग जीवंत, संतुलित योजनाएँ बनाते हैं।

टिंट और शेड: टिंट (हल्के वर्ज़न) बनाने के लिए HSL लाइटनेस को 50% से ऊपर बढ़ाएँ। शेड (गहरे वर्ज़न) के लिए इसे 50% से नीचे घटाएँ।

एक्सेसिबिलिटी और कंट्रास्ट

वेब एक्सेसिबिलिटी स्टैंडर्ड टेक्स्ट और बैकग्राउंड रंग के बीच पर्याप्त कंट्रास्ट माँगते हैं। WCAG 2.1 दिशानिर्देश सामान्य टेक्स्ट के लिए कम-से-कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 का न्यूनतम कंट्रास्ट अनुपात तय करते हैं। इस पिकर से मिले रंग कोड को किसी ख़ास कंट्रास्ट चेकर में इस्तेमाल करके एक्सेसिबिलिटी जाँच सकते हैं।

डिज़ाइन के लिए रंग सामंजस्य

ऊपर बताए गए बुनियादी जोड़ों से आगे, डिज़ाइन के काम में कुछ और मेल अक्सर सामने आते हैं। मोनोक्रोमैटिक योजना एक ही ह्यू के अलग-अलग शेड, टिंट और टोन इस्तेमाल करती है, जो ह्यू और सैचुरेशन को स्थिर रखते हुए सिर्फ़ HSL लाइटनेस बदलकर बनाई जाती है — बिना किसी रंग-टकराव के जोखिम के एक जुड़ा हुआ पैलेट बनाने का एक भरोसेमंद तरीक़ा। स्प्लिट-कॉम्प्लीमेंट्री योजना एक बुनियादी रंग के साथ उसके पूरक रंग के आसपास वाले दो रंग लेती है, जिससे सीधे पूरक जोड़े जितना ही ज़्यादातर विज़ुअल कंट्रास्ट मिलता है, लेकिन एक नरम, ज़्यादा बारीक़ एहसास के साथ।

वेब एक्सेसिबिलिटी और रंग कंट्रास्ट

Web Content Accessibility Guidelines पढ़ने लायक़ टेक्स्ट के लिए कंट्रास्ट अनुपात की ज़रूरतें तय करती हैं: AA स्टैंडर्ड सामान्य टेक्स्ट के लिए कम-से-कम 4.5:1 और बड़े टेक्स्ट (18pt या उससे बड़ा, या 14pt बोल्ड) के लिए 3:1 माँगता है, जबकि ज़्यादा सख़्त AAA स्टैंडर्ड क्रमशः 7:1 और 4.5:1 माँगता है। टेक्स्ट और बैकग्राउंड के बीच ज़्यादा कंट्रास्ट कमज़ोर नज़र वाले किसी भी व्यक्ति के लिए मायने रखता है, और ख़ासकर लगभग 8% पुरुषों और 0.5% महिलाओं के लिए जिन्हें किसी न किसी रूप में रंग-दृष्टि की कमी होती है, जिनके लिए कुछ रंग जोड़े जो ज़्यादातर लोगों को अलग-अलग दिखते हैं, लगभग एक जैसे दिख सकते हैं।

CSS के नामित रंग

CSS में 147 नामित रंग तय किए गए हैं जिन्हें हेक्स या RGB वैल्यू की जगह सीधे इस्तेमाल किया जा सकता है, red, blue और black जैसे सीधे नामों से लेकर cornflowerblue, papayawhip, और rebeccapurple जैसे ज़्यादा अनोखे नामों तक — आख़िरी वाला नाम 2014 में CSS डेवलपर Eric Meyer की बेटी Rebecca Meyer की याद में रखा गया था। इस टूल से कोई रंग चुनकर उसे सबसे नज़दीकी नामित CSS रंग से तुलना करना यह जल्दी देखने का एक तरीक़ा है कि आपके मन में मौजूद शेड के लिए पहले से ही कोई स्टैंडर्ड नाम मौजूद है या नहीं।

प्राइवेट और तुरंत

कलर पिकर पूरी तरह आपके ब्राउज़र में नेटिव ब्राउज़र कलर इनपुट इस्तेमाल करके चलता है, इसलिए नतीजे तुरंत दिखते हैं और आपका चुना कोई भी रंग कभी किसी सर्वर पर नहीं भेजा जाता, न लॉग किया जाता है और न साझा किया जाता है।