रंग परिवर्तक

रंग परिवर्तक एक मुफ्त टूल है, जो HEX, HEX alpha, RGB, RGBA, HSV, HSL या HSLA में दिए गए रंग को कई समान रंग प्रारूपों में बदलता है।

मैं किन रंग प्रारूपों को बदल सकता हूं?

तुम HEX, HEX alpha, RGB, RGBA, HSV, HSL या HSLA में रंग दर्ज करके हर समर्थित प्रारूप में उसका संबंधित मान देख सकते हो। यह तब उपयोगी है, जब कोई डिजाइन स्पेसिफिकेशन, स्टाइलशीट या तीसरे पक्ष का API उसी रंग को अलग प्रारूप में दिखाता है।

• HEX में लाल, हरे और नीले चैनल हेक्साडेसिमल जोड़ियों से दर्शाए जाते हैं। इसका सामान्य रूप #RRGGBB है।
• HEX Alpha में अपारदर्शिता का एक अतिरिक्त चैनल होता है। आधुनिक CSS नोटेशन में यह आम तौर पर #RRGGBBAA के रूप में लिखा जाता है।
• RGB में लाल, हरे और नीले चैनल के मान इस्तेमाल होते हैं, जिनकी सामान्य सीमा 0 से 255 होती है।
• RGBA में RGB के साथ alpha पारदर्शिता जोड़ी जाती है।
• HSV रंगत, संतृप्ति और मान को दर्शाता है। इसका उपयोग रंग चयनकर्ताओं में आम है, लेकिन यह कोई मानक CSS रंग फंक्शन नहीं है।
• HSL रंगत, संतृप्ति और हल्केपन को दर्शाता है। CSS सीधे HSL का समर्थन करता है।
• HSLA में HSL के साथ alpha मान शामिल होता है।

RGB और HSL अलग-अलग रंग नहीं हैं, बल्कि एक ही रंग का गणितीय रूप से वर्णन करने के अलग तरीके हैं। रूपांतरण से रंग का प्रारूप बदला जा सकता है और गंतव्य प्रारूप की क्षमता के अनुसार मूल रंग को यथासंभव वैसा ही रखा जाता है।

रंग परिवर्तक का इस्तेमाल कैसे करूं?

स्वीकृत प्रारूपों में से किसी एक का पूरा रंग मान Color फील्ड में दर्ज करो। फिर आउटपुट फील्ड में बने मानों को पढ़ो या कॉपी करो।

1. स्रोत मान को बिल्कुल उसी तरह कॉपी करो। जहां लागू हो, उसके शुरुआती hash, कॉमा, ब्रैकेट, प्रतिशत चिह्न या alpha घटक को भी शामिल रखो।
2. इसे Color फील्ड में डालो।
3. HEX, HEX Alpha, RGB, RGBA, HSV, HSL और HSLA के नीचे दिखाए गए समान मान देखो।
4. समर्थित रंग प्रारूपों में से वह प्रारूप चुनो जिसे गंतव्य स्वीकार करता हो। CSS नियम के लिए HEX, RGB, RGBA, HSL और HSLA आम विकल्प हैं। HSV का इस्तेमाल अक्सर संपादन इंटरफेस और रंग संबंधी गणनाओं में होता है।

रूपांतरण सर्वर पर होता है। तुम्हारा इनपुट HTTPS के जरिए सर्वर तक जाता है और उसे स्टोर नहीं किया जाता। वैसे तो किसी एक रंग का संवेदनशील होना दुर्लभ है, फिर भी किसी ऑनलाइन सेवा पर भेजने से पहले सोच लो कि कहीं अप्रकाशित पैलेट या डिजाइन टोकन का सेट गोपनीय तो नहीं है।

RGB, HSL और उनसे संबंधित सिंटैक्स में स्पेस और विराम चिह्न भी मायने रखते हैं, जबकि प्रतिशत चिह्न प्रतिशत वाले मानों को अलग पहचान देते हैं। केवल कोई संख्या, खाली मान या मनमाना टेक्स्ट किसी रंग की पहचान नहीं करता। इन संख्यात्मक प्रारूपों में उच्चारण चिह्न वाले या गैर-लैटिन टेक्स्ट का भी कोई निर्धारित अर्थ नहीं है।

बदले गए रंग मानों को कैसे समझूं?

हर परिणाम को उसी रंग का दूसरा नोटेशन समझो और चैनल की सीमाओं, प्रतिशतों तथा alpha पारदर्शिता पर खास ध्यान दो। कौन-सा फील्ड कॉपी करना है, यह इस बात पर निर्भर करता है कि रंग प्राप्त करने वाला सिस्टम किस नोटेशन का समर्थन करता है।

छह अंकों वाले HEX में पहली जोड़ी लाल, दूसरी हरे और तीसरी नीले रंग को दर्शाती है। उदाहरण के लिए, #336699 में हेक्साडेसिमल चैनल मान 33, 66 और 99 हैं, जो दशमलव RGB मानों 51, 102 और 153 के बराबर हैं।

रंगत को आम तौर पर रंग चक्र के चारों ओर एक कोण के रूप में व्यक्त किया जाता है। संतृप्ति और हल्कापन या मान प्रायः प्रतिशत में होते हैं। HSL का हल्कापन और HSV का मान अलग-अलग गणनाएं हैं, इसलिए उनके प्रतिशतों की तुलना ऐसे नहीं करनी चाहिए जैसे वे एक ही गुण को माप रहे हों।

Alpha अपारदर्शिता बताता है। पूरी तरह अपारदर्शी रंग के लिए alpha समर्थित प्रारूप जरूरी नहीं है, लेकिन अर्ध-पारदर्शी रंग के लिए इसकी जरूरत होती है। अगर RGBA या HSLA रंग को साधारण RGB, HSL या छह अंकों वाले HEX में कॉपी किया जाता है, तो उस गंतव्य नोटेशन में alpha चैनल दर्ज करने की कोई जगह नहीं होती।

इस परिवर्तक को विस्तृत त्रुटि संदेश देने वाले सिंटैक्स वैलिडेटर के रूप में प्रलेखित नहीं किया गया है। गलत इनपुट में ठीक किस वर्ण पर समस्या है, यह पहचानने के लिए इस पर निर्भर न रहो। रंग सिंटैक्स की आम गलतियों में HEX से hash गायब होना, ब्रैकेट का जोड़ा पूरा न होना, प्रतिशत चिह्न छूट जाना, alpha मान का अपेक्षित सीमा से बाहर होना या HSL और RGB चैनल के नियमों को मिला देना शामिल है।

रंग रूपांतरण के उदाहरण

यह छोटा-सा उदाहरण दिखाता है कि HEX, RGB, HSL और HSV आपस में कैसे संबंधित हैं। शुद्ध लाल रंग को इन समान रूपों में लिखा जा सकता है।

• HEX इनपुट #ff0000
• समान RGB मान rgb(255, 0, 0)
• समान HSL मान hsl(0, 100%, 50%)
• समान HSV मान hsv(0, 100%, 100%)

कम संतृप्त रंग के उदाहरण में, #336699 का समान RGB मान rgb(51, 102, 153) है। इसका HSL रूप hsl(210, 50%, 40%) है, जबकि इसके HSV रूप में रंगत 210 डिग्री, संतृप्ति लगभग 66.7% और मान 60% है। कोई इंटरफेस दशमलव मानों को राउंड कर सकता है या स्पेसिंग बदल सकता है, लेकिन इससे व्यावहारिक अर्थ नहीं बदलता।

पारदर्शिता का उदाहरण भी सीधा है। rgba(255, 0, 0, 0.5) और hsla(0, 100%, 50%, 0.5), दोनों आधी अपारदर्शिता वाले लाल रंग को दर्शाते हैं। आठ अंकों वाले सामान्य CSS HEX नियम के अनुसार, इसका संबंधित मान #ff000080 है, जिसमें 80 क्वांटाइज किया हुआ alpha बाइट है।

रंग को दूसरे प्रारूप में बदलना कब उपयोगी है?

रंग रूपांतरण तब उपयोगी है, जब रंग प्राप्त करने वाले ऐप्लिकेशन को दूसरा नोटेशन चाहिए या किसी दूसरे रूप में डीबग करना आसान हो जाता है। आम उदाहरणों में Figma के मान को CSS कस्टम प्रॉपर्टी में बदलना, Chrome DevTools में मिले RGBA मान की जांच करना, API पेलोड के लिए रंग फील्ड तैयार करना या डिप्लॉयमेंट से पहले तीसरे पक्ष की थीम का डेटा जांचना शामिल है।

अगर मौजूदा रंग नोटेशन को गंतव्य पहले से स्वीकार करता है, तो आम तौर पर रूपांतरण की जरूरत नहीं होती। केवल मशीन द्वारा पढ़े जाने वाले CSS के लिए छह अंकों वाले HEX को RGB में बदलने से खास लाभ नहीं मिलता। बार-बार रूपांतरण करने पर HSL या HSV मानों में राउंडिंग आ सकती है। इसी तरह, जब सभी रंग पूरी तरह अपारदर्शी हों, तो alpha चैनल न जोड़ो।

अगर किसी ज्ञात मान को बदलने के बजाय देखकर रंग चुनना है, तो रंग चयनकर्ता अधिक सीधा टूल है। रंग रूपांतरण, कंट्रास्ट जांच, वर्णांधता सिमुलेशन या कलर प्रोफाइल प्रबंधन की जगह भी नहीं लेता। समान संख्यात्मक मान यह साबित नहीं करते कि सामने दिखने वाला टेक्स्ट WCAG की कंट्रास्ट आवश्यकताओं को पूरा करता है।

अक्सर पूछे जाने वाले सवाल

क्या इसमें CSS के नाम वाले रंग डाल सकता हूं?

नहीं। प्रलेखित स्वीकृत प्रारूप HEX, HEX alpha, RGB, RGBA, HSV, HSL और HSLA हैं। इसलिए red, rebeccapurple या transparent जैसे नाम समर्थित इनपुट की सूची में नहीं हैं। किसी नाम वाले रंग को दर्ज करने से पहले उसे संख्यात्मक CSS मान में बदलो।

क्या तीन अंकों वाला HEX मान डाल सकता हूं?

स्वीकृत इनपुट में HEX शामिल है, लेकिन समर्थित HEX लंबाइयां प्रलेखित नहीं हैं। भरोसेमंद इनपुट के लिए #369 जैसे संक्षिप्त रूप को #336699 में विस्तृत करो। यही नियम alpha वाले चार अंकों के संक्षिप्त रूप पर भी लागू होता है।

क्या केवल रंग मान के बजाय पूरी CSS घोषणा पेस्ट कर सकता हूं?

पूरी घोषणा के बजाय सिर्फ रंग मान दर्ज करो। उदाहरण के लिए, color: #336699; की जगह #336699 इस्तेमाल करो, क्योंकि प्रॉपर्टी का नाम और सेमीकोलन खुद रंग का हिस्सा नहीं हैं। JSON या कॉन्फिगरेशन फाइल से मान कॉपी करते समय उसके आसपास लगे उद्धरण चिह्न हटा दो।

क्या परिणाम में wide-gamut या कलर प्रोफाइल की जानकारी बनी रहेगी?

कोई wide-gamut प्रारूप या एम्बेडेड कलर प्रोफाइल समर्थित प्रारूपों में सूचीबद्ध नहीं है। Display P3, Lab, LCH और ICC प्रोफाइल डेटा में ऐसी जानकारी होती है, जिसे उपलब्ध HEX, RGB, HSL और HSV फील्ड व्यक्त नहीं कर सकते। जब प्रोफाइल को ध्यान में रखकर रूपांतरण करना हो, तो कलर-मैनेज्ड ऐप्लिकेशन इस्तेमाल करो।

बदले गए मानों में कभी-कभी दशमलव क्यों आते हैं?

स्रोत RGB चैनल पूर्णांक होने पर भी HSL और HSV की गणनाओं से प्रतिशत में भिन्नात्मक मान आ सकते हैं। इन आंकड़ों को राउंड करने पर बाद में वापस RGB में किए गए रूपांतरण में थोड़ा बदलाव हो सकता है। डिजाइन टोकन स्टोर करते समय उपलब्ध सटीकता बनाए रखो। केवल तभी राउंड करो, जब लक्ष्य प्रारूप या कोडिंग मानक में इसकी जरूरत हो।