HEX से RGB कनवर्टर
HEX रंग कोड को तुरंत RGB मानों में बदलें। यह टूल वेब डेवलपमेंट, UI डिज़ाइन, थीम सिस्टम और उन सभी कार्यों में उपयोगी है जहाँ तेज़ और सटीक रंग रूपांतरण की ज़रूरत होती है।
HEX या RGB में कोई मान दर्ज करें, कनवर्टर अपने आप अपडेट हो जाएगा। यह दोनों दिशाओं में काम करता है, इसलिए किसी भी फ़ील्ड को बदलने पर तुरंत सही परिणाम मिलता है।
आप इनबिल्ट कलर पिकर का उपयोग करके भी रंग चुन सकते हैं — रंग बदलते ही HEX और RGB फ़ील्ड अपने आप अपडेट हो जाते हैं।
HEX रंग क्या है?
HEX रंग एक छह-अंकों का मान होता है, जो हेक्साडेसिमल (बेस-16) संख्या प्रणाली में लिखा जाता है और #RRGGBB फ़ॉर्मैट में होता है। हर जोड़ी (RR, GG, BB) क्रमशः लाल, हरे और नीले रंग की तीव्रता को दर्शाती है, जिसका मान 00 (कोई तीव्रता नहीं) से FF (अधिकतम तीव्रता) तक होता है।
व्यवहार में, HEX रंग RGB मानों को एन्कोड करने का एक और तरीका है। ब्राउज़र HEX स्ट्रिंग को पढ़ते हैं, उसे तीन भागों में बाँटते हैं और हर भाग को हेक्साडेसिमल से डेसिमल में बदलकर rgb(r, g, b) बनाते हैं। इसी कारण HEX एक छोटा और डेवलपर-फ्रेंडली फ़ॉर्मैट है, जिसका उपयोग CSS, डिज़ाइन टूल्स और फ्रंटएंड डेवलपमेंट में किया जाता है।
उदाहरण के लिए, #FF8800 में लाल चैनल का मान सबसे अधिक (FF) होता है, हरा मध्यम स्तर पर (88) होता है, और नीला 00 होता है। यह सीधा मैपिंग HEX को वेब पर रंग निर्दिष्ट करने के लिए एक भरोसेमंद फ़ॉर्मैट बनाती है।
RGB रंग क्या है?
RGB एक रंग मॉडल है, जिसमें रंग लाल, हरा और नीला प्रकाश के संयोजन से बनाए जाते हैं। हर चैनल का मान 0 से 255 के बीच होता है, जहाँ 0 का अर्थ है कोई तीव्रता नहीं और 255 का अर्थ है अधिकतम तीव्रता।
इन तीन मानों के संयोजन से स्क्रीन पर दिखने वाले सभी रंग बनते हैं। उदाहरण के लिए, rgb(255, 0, 0) शुद्ध लाल, rgb(0, 255, 0) शुद्ध हरा और rgb(0, 0, 255) शुद्ध नीला दर्शाता है।
RGB मॉनिटर, टीवी, मोबाइल डिस्प्ले, ग्राफ़िक सॉफ़्टवेयर और वेब तकनीकों में उपयोग होने वाला मूल रंग मॉडल है। यह सीधे इस बात से जुड़ा होता है कि स्क्रीन प्रकाश कैसे उत्सर्जित करती है, इसलिए डिजिटल रंगों के लिए यह सबसे अधिक इस्तेमाल किया जाने वाला फ़ॉर्मैट है।
HEX से RGB का फ़ॉर्मूला
#RRGGBB → rgb(r, g, b)
r = hex_to_dec(RR)
g = hex_to_dec(GG)
b = hex_to_dec(BB)
// सहायक:
hex_to_dec(AB) = (मान(A) * 16) + मान(B)नीचे वह सटीक फ़ॉर्मूला दिया गया है, जिसका उपयोग HEX रंग को मैन्युअली RGB घटकों में बदलने के लिए किया जाता है। हर दो-अक्षरों वाले भाग (RR, GG, BB) को एक सरल हेक्साडेसिमल-से-डेसिमल फ़ंक्शन से प्रोसेस किया जाता है।
// #4FA3C2 का उदाहरण
RR = "4F" → hex_to_dec(4F) = (4 * 16) + 15 = 79
GG = "A3" → hex_to_dec(A3) = (10 * 16) + 3 = 163
BB = "C2" → hex_to_dec(C2) = (12 * 16) + 2 = 194
rgb(79, 163, 194)यदि आपको हेक्साडेसिमल मानों (0–F) या संख्या प्रणालियों की दोबारा जानकारी चाहिए, तो नंबर सिस्टम गाइड देखें।
HEX से RGB रूपांतरण कैसे काम करता है (स्टेप-बाय-स्टेप)
HEX रंग छह अक्षरों के मान होते हैं, जिन्हें तीन जोड़ियों में बाँटा जाता है। हर जोड़ी लाल, हरे या नीले रंग की तीव्रता दर्शाती है। HEX को RGB में बदलने के लिए, इन जोड़ियों को 16-बेस से 10-बेस में बदला जाता है।
#1A2B3C
↓ ↓ ↓
[1A, 2B, 3C] -> rgb(26, 43, 60)नीचे #1A2B3C रंग के लिए पूरा स्टेप-बाय-स्टेप विवरण दिया गया है:
- स्टेप 1 — HEX मान को विभाजित करें:
[1A] [2B] [3C] - स्टेप 2 — हर जोड़ी को HEX से डेसिमल में बदलें:
हर जोड़ी एक 16-बेस संख्या होती है। डेसिमल में बदलने के लिए, पहले अक्षर को 16 से गुणा करें और दूसरे अक्षर का मान जोड़ें। HEX में A–F का मान 10–15 होता है।
1A = (1 * 16) + 10 = 26 2B = (2 * 16) + 11 = 43 3C = (3 * 16) + 12 = 60(A = 10, B = 11, C = 12)
- स्टेप 3 — परिणामों को RGB रंग में संयोजित करें:
rgb(26, 43, 60)
यह तरीका किसी भी HEX रंग के लिए काम करता है: मान को बाँटें, हर जोड़ी को बदलें और RGB ट्रिपलेट बनाएँ।
कब HEX उपयोग करें और कब RGB
CSS में रंग निर्धारित करने के लिए HEX और RGB दोनों मान्य हैं, लेकिन हर फ़ॉर्मैट कुछ खास परिस्थितियों में बेहतर होता है। सही फ़ॉर्मैट का चयन पढ़ने में आसानी, सटीकता और उपयोग के प्रकार पर निर्भर करता है।
HEX कब उपयोग करें
- संक्षिप्त और पढ़ने में आसान: HEX मान छोटे होते हैं और जल्दी समझ में आ जाते हैं, इसलिए डिज़ाइन सिस्टम और स्टाइल गाइड में सुविधाजनक होते हैं।
- सॉलिड रंगों के लिए: जहाँ अल्फ़ा ट्रांसपेरेंसी की ज़रूरत न हो, वहाँ स्थिर UI रंगों के लिए उपयुक्त।
- डिज़ाइन टूल्स में प्रचलित: अधिकांश डिज़ाइन सॉफ़्टवेयर डिफ़ॉल्ट रूप से HEX का उपयोग करते हैं, जिससे डिज़ाइन और कोड में一致ता रहती है।
- कॉपी और शेयर करना आसान: HEX मान छोटे पहचानकर्ता होते हैं, जिन्हें अलग-अलग टूल्स या प्लेटफ़ॉर्म पर साझा करना आसान होता है।
RGB कब उपयोग करें
- रंग चैनलों पर बेहतर नियंत्रण: RGB में लाल, हरे और नीले चैनल साफ़ दिखते हैं, जो JavaScript या CSS में डायनेमिक बदलाव के लिए उपयोगी है।
- ग्रेडिएंट और उन्नत प्रभाव: कई CSS फ़ीचर (जैसे
rgb()औरrgba()) संख्यात्मक चैनल मानों के साथ बेहतर काम करते हैं। - ट्रांसपेरेंसी सपोर्ट: RGB को RGBA में बढ़ाया जा सकता है, जिससे अपारदर्शिता पर सटीक नियंत्रण मिलता है, जो सामान्य HEX में संभव नहीं है।
- एनिमेशन के लिए उपयुक्त: संख्यात्मक चैनल मान ट्रांज़िशन और कीफ़्रेम में आसानी से इंटरपोलेट होते हैं।
सारांश
स्थिर UI तत्वों के लिए साफ़ और छोटे रंग कोड चाहिए हों तो HEX उपयोग करें। ट्रांसपेरेंसी, डायनेमिक बदलाव या सटीक चैनल नियंत्रण के लिए RGB/RGBA चुनें। दोनों फ़ॉर्मैट एक ही रंग स्थान को दर्शाते हैं — सही विकल्प आपके CSS या JavaScript उपयोग पर निर्भर करता है।
CSS में रंगों के साथ काम करने की अच्छी प्रथाएँ
CSS कई रंग फ़ॉर्मैट सपोर्ट करता है और हर एक के अपने व्यावहारिक फ़ायदे हैं। नीचे दिए गए बिंदु बताते हैं कि किस स्थिति में कौन सा फ़ॉर्मैट उपयोग करना सही है।
उपयुक्त रंग फ़ॉर्मैट चुनें
- HEX: स्थिर UI रंगों के लिए संक्षिप्त फ़ॉर्मैट। डिज़ाइन टोकन और साधारण रंग मानों के लिए उपयुक्त।
- RGB: जब चैनल मान स्पष्ट होने चाहिए या प्रोग्राम के ज़रिये बदले जाने हों।
- RGBA: जब ट्रांसपेरेंसी नियंत्रण चाहिए। ओवरले, शैडो और लेयर्ड एलिमेंट्स के लिए उपयुक्त।
- HSL: थीम सिस्टम के लिए उपयोगी; RGB की तुलना में ह्यू, सैचुरेशन और लाइटनेस को समझना आसान।
जहाँ संभव हो, HEX का संक्षिप्त रूप उपयोग करें
- #FFFFFF की जगह #FFF: जब हर चैनल का मान समान हो, तो तीन-अंकों का फ़ॉर्मैट उपयोग करें।
HEX8 कब उपयोग करें
- #RRGGBBAA: HEX फ़ॉर्मैट में ट्रांसपेरेंसी प्रदान करता है। HEX-आधारित पैलेट में अल्फ़ा की ज़रूरत होने पर उपयोगी।
- केवल पूरे 8-अक्षरों वाले फ़ॉर्मैट में मान्य। बिना ज़रूरत HEX और RGBA को एक ही टोकन सिस्टम में न मिलाएँ।
सामान्य गलतियाँ
- फ़ॉर्मैट को असंगत तरीके से मिलाना: एक डिज़ाइन सिस्टम में एक जैसा फ़ॉर्मैट रखें।
- डायनेमिक प्रभावों के लिए HEX का उपयोग: एनिमेशन और ट्रांज़िशन
rgb(),rgba()याhsl()के साथ बेहतर काम करते हैं। - HEX शॉर्टहैंड का गलत उपयोग: केवल तब उपयोग करें जब हर चैनल का मान समान हो।
- ट्रांसपेरेंसी की ज़रूरत में HEX का उपयोग: ऐसे मामलों में RGBA या alpha के साथ HSL चुनें।
- शैडो के लिए पूरी तरह काला (#000) ज़्यादा उपयोग करना: बेहतर परिणाम के लिए सेमी-ट्रांसपेरेंट RGBA या HSL मानों का उपयोग करें।
इन प्रथाओं का पालन करने से रंग रेंडरिंग स्थिर रहती है, कोड साफ़ रहता है और डिज़ाइन सिस्टम व UI स्टेट्स में一致ता बनी रहती है।
HEX से RGB रूपांतरण तालिका
नीचे दी गई तालिका में आम तौर पर उपयोग किए जाने वाले HEX रंग और उनके संबंधित RGB मान दिए गए हैं। इसमें लोकप्रिय UI रंग, ग्रेस्केल स्टेप्स और बुनियादी RGB रूप शामिल हैं।
| विवरण | HEX | RGB |
|---|---|---|
| सफ़ेद | #FFFFFF | rgb(255, 255, 255) |
| काला | #000000 | rgb(0, 0, 0) |
| लाल | #FF0000 | rgb(255, 0, 0) |
| हरा | #00FF00 | rgb(0, 255, 0) |
| नीला | #0000FF | rgb(0, 0, 255) |
| पीला | #FFFF00 | rgb(255, 255, 0) |
| सायन | #00FFFF | rgb(0, 255, 255) |
| मैजेंटा | #FF00FF | rgb(255, 0, 255) |
| ग्रे 1 | #111111 | rgb(17, 17, 17) |
| ग्रे 2 | #333333 | rgb(51, 51, 51) |
| ग्रे 3 | #555555 | rgb(85, 85, 85) |
| ग्रे 4 | #777777 | rgb(119, 119, 119) |
| ग्रे 5 | #999999 | rgb(153, 153, 153) |
| ग्रे 6 | #CCCCCC | rgb(204, 204, 204) |
| हल्का ग्रे | #F0F0F0 | rgb(240, 240, 240) |
| UI ग्रे | #E0E0E0 | rgb(224, 224, 224) |
| गहरा UI ग्रे | #1A1A1A | rgb(26, 26, 26) |
| गहरा लाल | #800000 | rgb(128, 0, 0) |
| गहरा हरा | #008000 | rgb(0, 128, 0) |
| गहरा नीला | #000080 | rgb(0, 0, 128) |
| नारंगी | #FFA500 | rgb(255, 165, 0) |
| बैंगनी | #800080 | rgb(128, 0, 128) |
| टील | #008080 | rgb(0, 128, 128) |
यह तालिका सबसे अधिक उपयोग होने वाले मानों को कवर करती है। इस पेज का कनवर्टर किसी भी वैध HEX कोड के लिए सटीक RGB मान निकाल सकता है।
FAQ: HEX से RGB
- FF, 00 या AA जैसे HEX मान क्या दर्शाते हैं?
ये हेक्साडेसिमल संख्याएँ हैं। हर जोड़ी
00(0) सेFF(255) तक होती है और किसी रंग चैनल की तीव्रता दर्शाती है। - RGB में मान हमेशा 0 से 255 के बीच क्यों होते हैं?
RGB 8-बिट चैनलों पर आधारित है। 8 बिट 256 मान दर्शाते हैं, इसलिए डिजिटल रंग प्रणालियों में 0–255 का उपयोग किया जाता है।
- क्या HEX ट्रांसपेरेंसी सपोर्ट करता है?
सामान्य HEX (
#RRGGBB) में ट्रांसपेरेंसी शामिल नहीं होती। HEX8 (#RRGGBBAA, जिसे HEXA भी कहा जाता है) ट्रांसपेरेंसी सपोर्ट करता है। आख़िरी दो अंक (AA) alpha चैनल को दर्शाते हैं। - HEX और HEX8 / HEXA में क्या अंतर है?
HEX में केवल लाल, हरा और नीला चैनल होते हैं। HEX8 (या HEXA) में एक अतिरिक्त alpha चैनल होता है, फ़ॉर्मैट
#RRGGBBAAहोता है। alpha का मान00(पारदर्शी) सेFF(अपारदर्शी) तक होता है। - #RGB और #RRGGBB में क्या अंतर है?
#RGB,#RRGGBBका संक्षिप्त रूप है। हर अंक को दोहराया जाता है। उदाहरण:#F0A → #FF00AA।