RGB से HEX कन्वर्टर

RGB रंग को तीन एडिटिव लाइट चैनलों — लाल, हरे और नीले — के रूप में दिखाता है, जिनमें से हर एक की इंटेंसिटी 0 से 255 तक होती है। यह मॉडल सीधे तौर पर डिजिटल डिस्प्ले के काम करने के तरीके से मेल खाता है: हर पिक्सेल लाल, हरे और नीले सब-पिक्सेल से बना होता है जिनकी ब्राइटनेस को अलग-अलग कंट्रोल किया जाता है। HEX नोटेशन इन्हीं तीन चैनलों को हेक्साडेसिमल में स्टोर करता है, जो एक बेस-16 नंबरिंग सिस्टम है; इसमें हर डिजिट 0 से 15 तक की वैल्यू को दिखाता है, जिसके लिए 0 से 9 तक के नंबर और A से F तक के कैरेक्टर इस्तेमाल किए जाते हैं। हर चैनल के लिए दो-डिजिट वाला हेक्स पेयर ठीक दो कैरेक्टर के साथ पूरी 0–255 रेंज को कवर करता है, जिससे छह-कैरेक्टर वाला HEX कोड किसी भी RGB रंग का एक कॉम्पैक्ट और बिना क्वालिटी खोए (lossless) दिखाने वाला तरीका बन जाता है।

जब भी ऐसा कोड, जो अंदरूनी तौर पर RGB में रंगों के साथ काम करता है, उसे CSS या डिज़ाइन टूलिंग के हिसाब से रंगों का आउटपुट देना होता है, तो RGB को HEX में बदलना एक ज़रूरी काम बन जाता है। JavaScript कैनवस ऑपरेशन, WebGL शेडर, कलर एनिमेशन लाइब्रेरी और इमेज प्रोसेसिंग पाइपलाइन सभी अंदरूनी तौर पर न्यूमेरिक चैनल वैल्यू के साथ काम करते हैं, लेकिन ज़्यादातर वेबपेज विज़ुअल आउटपुट को कंट्रोल करने वाली CSS प्रॉपर्टीज़ — जैसे background-color, border-color, color, box-shadow — HEX स्ट्रिंग को अपने मुख्य कलर फ़ॉर्मैट में से एक के तौर पर स्वीकार करती हैं। आउटपुट स्टेज पर अंदरूनी RGB रिप्रेजेंटेशन को HEX में बदलना, इन दोनों रिप्रेजेंटेशन के बीच तालमेल बिठाने का स्टैंडर्ड तरीका है।

कनवर्ज़न एल्गोरिदम हर इंटीजर चैनल को उसके दो-अंकों वाले हेक्साडेसिमल रूप में बदलता है। JavaScript में, यह `Math.round(channel).toString(16).padStart(2, "0")` होता है, और तीनों नतीजों को `#` प्रीफ़िक्स के साथ जोड़ा जाता है। राउंडिंग का स्टेप कलर कैलकुलेशन से मिलने वाली डेसिमल चैनल वैल्यू को संभालता है — जैसे दो रंगों के बीच इंटरपोलेशन, प्रतिशत के हिसाब से ब्राइटनेस एडजस्ट करना, या कैनवस डेटा से पिक्सेल सैंपल करना; इन सभी से फ्रैक्शनल चैनल वैल्यू मिल सकती हैं, जिन्हें HEX में बदलने से पहले सबसे करीबी इंटीजर में राउंड करना ज़रूरी होता है। इस राउंडिंग से राउंड-ट्रिप कनवर्ज़न (HEX → RGB → HEX) में थोड़ी सी एरर आती है, लेकिन यह एरर हमेशा 0–255 स्केल पर आधे स्टेप के अंदर होती है और इसे आँखों से देखा नहीं जा सकता।

डिज़ाइन डॉक्यूमेंटेशन और ब्रांड गाइडलाइन्स में, रंगों को सटीक रूप से बताने के लिए HEX सबसे ज़्यादा इस्तेमाल होने वाला फ़ॉर्मेट है, क्योंकि लगभग हर टूल और प्लेटफ़ॉर्म इसे पहचानता है। Figma, Sketch, Adobe Creative Cloud, Google Docs, Notion, GitHub और ज़्यादातर CSS फ़्रेमवर्क डिफ़ॉल्ट आउटपुट फ़ॉर्मेट के तौर पर HEX के साथ कलर पिकर दिखाते हैं। जब कोई डेवलपर ब्राउज़र DevTools या JavaScript कलर कैलकुलेशन से RGB वैल्यू कॉपी करता है और उसे बाकी पैलेट के साथ डॉक्यूमेंट करना चाहता है, तो HEX में बदलने से ऐसा फ़ॉर्मेट मिलता है जिसे डिज़ाइनर, दूसरे डेवलपर और क्लाइंट बिना किसी और बदलाव के सीधे इस्तेमाल कर सकते हैं।

RGB और HEX की एक अहम कमी यह है कि इनमें अल्फा चैनल नहीं होता। स्टैंडर्ड छह-अंकों वाला HEX सिर्फ़ पूरी तरह से अपारदर्शी (opaque) रंगों को दिखाता है। ट्रांसपेरेंसी के लिए या तो CSS rgba() नोटेशन (जो RGB में 0 से 1 तक का चौथा चैनल जोड़ता है) या मॉडर्न CSS में सपोर्टेड आठ-अंकों वाला HEX फ़ॉर्मैट (#RRGGBBAA) चाहिए होता है। अगर आपके रंग में अल्फा कॉम्पोनेंट है, तो उसे RGBA फ़ॉर्मैट में ही रखें या कन्वर्ट करने से पहले देख लें कि आपका टारगेट प्लेटफ़ॉर्म आठ-अंकों वाले HEX फ़ॉर्मैट को सपोर्ट करता है या नहीं। यह कन्वर्टर स्टैंडर्ड अपारदर्शी केस को हैंडल करता है; अल्फा-अवेयर कन्वर्ज़न के लिए, पक्का करें कि आगे का कोड पूरे RGBA स्पेसिफ़िकेशन को हैंडल करता हो।