Hex से RGB कन्वर्टर
#FF5733 या #0F8 जैसे हेक्साडेसिमल कलर कोड को rgb(255, 87, 51) जैसी CSS RGB वैल्यू में बदलें। यह कन्वर्टर 3-डिजिट शॉर्टहैंड और 6-डिजिट HEX नोटेशन, दोनों को स्वीकार करता है (चाहे शुरुआत में # हो या न हो), और कन्वर्ज़न से पहले इनपुट को वैलिडेट करता है।
जल्दी से आज़माएँ
3-डिजिट और 6-डिजिट HEX कलर कोड को तुरंत RGB फ़ॉर्मैट में बदलता है।
यह ऐसे वैल्यूज़ को स्वीकार करता है जिनमें शुरुआत में # हो या न हो, जो आम CSS और डिज़ाइन-टूल फ़ॉर्मैट से मेल खाते हैं।
rgb(r, g, b) सिंटैक्स में साफ़, CSS-के लिए तैयार आउटपुट देता है।
यह गलत फ़ॉर्मैट वाले HEX कोड की जाँच करता है और गलत रंग दिखाने के बजाय साफ़ तौर पर एरर की जानकारी देता है।
डिज़ाइन टूल्स से कलर टोकन्स को CSS, JavaScript और डॉक्यूमेंटेशन में बदलने के लिए उपयोगी।
कैसे इस्तेमाल करें
इनपुट फ़ील्ड में HEX कलर कोड पेस्ट करें, जैसे #3498db या 3498db
अगर ज़रूरत हो, तो 3-अंकों वाले शॉर्टहैंड का इस्तेमाल करें, जैसे #0f8
RGB वैल्यू rgb(r, g, b) फ़ॉर्मैट में दिखाई देती है।
नतीजे को CSS, डिज़ाइन स्पेक्स या कोड में कॉपी करें।
फ्रंटएंड डेवलपमेंट
- डिज़ाइन टोकन्स को CSS rgb() वैल्यूज़ में बदलें
- JavaScript में रंग बदलने के लिए RGB वैल्यूज़ बनाएँ
- कॉपी किए गए HEX स्ट्रिंग्स से कलर वैल्यूज़ को नॉर्मलाइज़ करें
डिज़ाइन वर्कफ़्लो
- Figma, Sketch या ब्रांड पैलेट के HEX वैल्यूज़ को बदलें
- अलग-अलग टीमों की पसंद के फ़ॉर्मैट में रंगों को डॉक्यूमेंट करें
- एक्सेसिबिलिटी और कंट्रास्ट की जाँच के लिए सटीक चैनल वैल्यू की तुलना करें।
| मूल पाठ | परिणाम |
|---|---|
#FF5733 | rgb(255, 87, 51) |
000000 | rgb(0, 0, 0) |
#FFF | rgb(255, 255, 255) |
0f8 | rgb(0, 255, 136) |
CSS और वेब
- CSS कस्टम प्रॉपर्टीज़
- JavaScript स्टाइल ऑब्जेक्ट्स
- React और Vue कंपोनेंट्स
- Tailwind थीम कॉन्फ़िगरेशन
डिज़ाइन सिस्टम
- ब्रांड पैलेट
- टोकन डॉक्यूमेंटेशन
- एक्सेसिबिलिटी कलर चेक
तीन-अंकों वाला HEX एक शॉर्टहैंड है: हर अंक को दोहराकर #0F8 को #00FF88 में बदला जाता है। इसका मतलब है कि #ABC बदलकर #AABBCC हो जाता है, न कि #ABC000।
RGB वैल्यूज़ रेड, ग्रीन और ब्लू चैनलों को सीधे दिखाती हैं, जिससे JavaScript में रनटाइम कलर कैलकुलेशन और अल्फा ब्लेंडिंग के लिए इनका इस्तेमाल आसान हो जाता है।
मॉडर्न CSS में HEX और RGB दोनों का सपोर्ट मिलता है, लेकिन जब ओपैसिटी (opacity) या चैनल में बदलाव करने की ज़रूरत हो, तो CSS वेरिएबल्स के साथ RGB का इस्तेमाल करना अक्सर आसान होता है।
HEX के लिए अपरकेस या लोअरकेस का इस्तेमाल एक-दूसरे की जगह किया जा सकता है — हेक्साडेसिमल डिजिट केस-इनसेंसिटिव होते हैं।
CSS में HEX वैल्यू लिखते समय # प्रीफ़िक्स का इस्तेमाल करें, लेकिन जब कोई API खास तौर पर रॉ हेक्स डिजिट्स की उम्मीद करे, तो इसे हटा दें।
यूज़र द्वारा दिए गए रंगों को डिज़ाइन टोकन या कॉन्फ़िगरेशन फ़ाइलों में स्टोर करने से पहले उन्हें वैलिडेट करें।
अक्सर पूछे जाने वाले सवाल
हमारे टूल्स और सेवाओं के बारे में आम सवालों के जवाब पाएँ।
Hex से RGB कन्वर्टर को समझना
वेब डेवलपमेंट में RGB रंगों को दिखाने के लिए HEX कलर नोटेशन सबसे छोटा और हर जगह माना जाने वाला तरीका है। हर कलर चैनल — लाल, हरा और नीला — को 00 से FF तक के दो-अंकों वाले हेक्साडेसिमल नंबर के तौर पर स्टोर किया जाता है, जो डेसिमल रेंज 0 से 255 के बराबर होता है। #3498DB जैसा छह-कैरेक्टर वाला HEX कोड ठीक वही जानकारी स्टोर करता है जो rgb(52, 152, 219) करता है, बस यह ज़्यादा छोटे फ़ॉर्मेट में होता है जिसे डिज़ाइनर और डेवलपर एक नज़र में पढ़ सकते हैं और तेज़ी से टाइप कर सकते हैं। हैश प्रीफ़िक्स एक CSS कन्वेंशन है, लेकिन कई मामलों में यह पूरी तरह से ऑप्शनल है, और यह कन्वर्टर इनपुट को पहले नॉर्मलाइज़ किए बिना ही दोनों तरह के फ़ॉर्मेट को हैंडल कर लेता है।
फ्रंटएंड डेवलपमेंट और डिज़ाइन टूल्स में HEX को RGB में बदलना सबसे आम कलर ऑपरेशन्स में से एक है। कई APIs, कैनवस ड्राइंग ऑपरेशन्स, इमेज प्रोसेसिंग लाइब्रेरीज़ और कलर मैनिपुलेशन यूटिलिटीज़ हेक्साडेसिमल स्ट्रिंग्स के बजाय न्यूमेरिक RGB चैनल्स की उम्मीद करती हैं। उदाहरण के लिए, JavaScript में HTML5 Canvas API को ImageData ऑब्जेक्ट में पिक्सेल डेटा सेट करते समय इंटीजर चैनल वैल्यूज़ की ज़रूरत होती है। जो एनिमेशन लाइब्रेरीज़ दो रंगों के बीच इंटरपोलेशन करती हैं, उन्हें लीनियर इंटरपोलेशन करने के लिए चैनल्स को एक्सट्रैक्ट करने की ज़रूरत होती है; RGB में यह आसान है, लेकिन HEX में पहले कन्वर्ट किए बिना सीधे ऐसा करना नामुमकिन है। Chroma.js, Tinycolor2 और color जैसी लाइब्रेरीज़ हर बार HEX स्ट्रिंग पास करने पर यह कन्वर्ज़न इंटरनली करती हैं।
इंटीजर चैनल वैल्यू के लिए कन्वर्ज़न एल्गोरिदम पूरी तरह से निश्चित और लॉसलेस (बिना जानकारी खोए होने वाला) है। छह-अंकों वाली HEX स्ट्रिंग को दो-कैरेक्टर वाले तीन जोड़ों में बांटा जाता है, हर जोड़े को बेस-16 इंटीजर के तौर पर प्रोसेस किया जाता है, और इन तीन इंटीजर से RGB ट्रिपलेट बनता है। तीन-अंकों वाले शॉर्टहैंड के लिए, प्रोसेस करने से पहले हर सिंगल कैरेक्टर को दोहराया जाता है — #ABC बदलकर #AABBCC हो जाता है, न कि #ABC000। इसका मतलब है कि #FFF बिल्कुल #FFFFFF के बराबर है और इससे rgb(255, 255, 255) मिलता है। जब इनपुट एक वैलिड HEX कलर होता है, तो कन्वर्ज़न की किसी भी दिशा में कोई जानकारी नहीं खोती है।
Figma, Sketch, Adobe XD और ब्राउज़र DevTools पर काम करने वाले डिज़ाइनर्स के लिए, HEX से RGB में बदलना एक ज़रूरी और लगातार होने वाला काम है। डिज़ाइन टूल्स अक्सर रंगों को HEX फ़ॉर्मैट में दिखाते और एक्सपोर्ट करते हैं क्योंकि यह छोटा होता है और डेवलपर्स और डिज़ाइनर्स दोनों के लिए जाना-पहचाना होता है। लेकिन जब रंगों को किसी ऐसे डेवलपर को सौंपा जाता है जिसे डायनामिक कलर कैलकुलेशन करने हों — जैसे रनटाइम पर ब्राइटनेस एडजस्ट करना, दो रंगों को मिलाना, या CSS कस्टम प्रॉपर्टी में ओपेसिटी (opacity) लागू करना — तो RGB फ़ॉर्मैट ज़्यादा काम का होता है। डिज़ाइन सिस्टम या स्टाइल गाइड में दोनों फ़ॉर्मैट्स का रिकॉर्ड रखने से काम सौंपने की प्रक्रिया आसान हो जाती है और अलग-अलग टीम मेंबर्स को बार-बार कन्वर्ज़न का काम नहीं करना पड़ता।
एक भरोसेमंद HEX-to-RGB कन्वर्टर के लिए इनपुट वैलिडेशन एक ज़रूरी हिस्सा है। प्रोडक्शन में बग्स का एक आम कारण ऐसे फ़ंक्शन को गलत फ़ॉर्मेट वाली कलर स्ट्रिंग देना है जो एक सही HEX इनपुट की उम्मीद करता है — फ़ंक्शन चुपचाप काला रंग (rgb(0, 0, 0)) लौटा देता है या कोई अनकॉट एरर देता है, और UI गलत रंग के साथ रेंडर होता है जो शायद तुरंत पता न चले। यह कन्वर्टर यह पक्का करता है कि ऑप्शनल # को हटाने के बाद इनपुट में ठीक तीन या छह हेक्साडेसिमल डिजिट हों, और वैलिडेशन में फ़ेल होने वाले किसी भी इनपुट के लिए साफ़ एरर मैसेज देता है, जिससे रंग में चुपचाप होने वाली गड़बड़ी रुक जाती है।