RGB से HEX कनवर्टर
त्वरित रूप से rgb(r, g, b) मानों को HEX रंग कोड में बदलें। यह कनवर्टर CSS, डिज़ाइन टोकन के साथ काम करते समय या डिज़ाइन उपकरणों और कोड के बीच रंगों को संरेखित करना चाहते समय सहायक है।
एक मान टाइप करें RGB या HEX प्रारूप में, और दूसरा फ़ील्ड तुरंत अपडेट हो जाता है। रूपांतरण दोनों दिशाओं में काम करता है, इसलिए आप उस प्रारूप से शुरू कर सकते हैं जो आपके कार्यप्रवाह के लिए अधिक सुविधाजनक है।
आप रंग पिकर के साथ भी प्रयोग कर सकते हैं। जैसे ही आप हैंडल को हिलाते हैं, RGB और HEX मान तुरंत पुनः गणना की जाती हैं, जिससे उच्चारण रंगों, पृष्ठभूमियों, या अर्थपूर्ण टोकन को ठीक से समायोजित करना आसान हो जाता है।
RGB रंगों को समझना
RGB मॉडल एक रंग का वर्णन करता है जो लाल, हरा, और नीला प्रकाश का मिश्रण है। प्रत्येक घटक एक संख्या है 0 से 255 के बीच, जहाँ 0 का मतलब है कि वह चैनल बंद है और 255 का मतलब है पूर्ण तीव्रता।
जब इन तीन चैनलों को मिलाया जाता है, तो वे उन रंगों का निर्माण करते हैं जो आप मॉनिटर्स, फोन और टेलीविज़न पर देखते हैं। उदाहरण के लिए, rgb(255, 255, 255) सफेद है, rgb(0, 0, 0) काला है, और rgb(255, 165, 0) एक उज्ज्वल नारंगी टोन के अनुरूप है।
RGB मान विशेष रूप से गतिशील इंटरफेस में व्यावहारिक होते हैं, क्योंकि आप प्रत्येक चैनल को प्रोग्रामेटिक रूप से नियंत्रित कर सकते हैं, रंग पैलेट उत्पन्न कर सकते हैं, और संख्यात्मक मानों के बीच इंटरपोलेट करने वाले संक्रमण बना सकते हैं।
HEX रंग कोड क्या है?
एक HEX रंग वही RGB रंग है जो हेक्साडेसिमल प्रणाली में लिखा गया है। मानक प्रारूप है #RRGGBB, जहाँ प्रत्येक वर्णों का जोड़ा लाल, हरा, और नीला चैनल को आधार 16 में दर्शाता है।
दशमलव संख्याओं के बजाय 0 से 255, HEX 00 से FF के मानों का उपयोग करता है। अंक A–F दशमलव संख्याओं 10 से 15 के लिए खड़े होते हैं। ब्राउज़र स्ट्रिंग को पार्स करते हैं, इसे तीन जोड़ों में विभाजित करते हैं, प्रत्येक को दशमलव में परिवर्तित करते हैं, और फिर संबंधित RGB रंग को प्रस्तुत करते हैं।
यह संक्षिप्त प्रारूप CSS, डिज़ाइन उपकरणों, और शैली गाइड में व्यापक रूप से उपयोग किया जाता है क्योंकि यह छोटा, कॉपी करने में आसान है, और प्राथमिक, द्वितीयक, और अर्थपूर्ण रंगों के लिए एक टोकन के रूप में अच्छी तरह से काम करता है।
RGB से HEX रूपांतरण सूत्र
rgb(r, g, b) → #RRGGBB
RR = dec_to_hex(r)
GG = dec_to_hex(g)
BB = dec_to_hex(b)
// Helper:
dec_to_hex(x) = to_hex(x).padStart(2, "0")RGB से HEX में परिवर्तित करने के लिए, आप प्रत्येक चैनल मान (0 से 255) को दो अंकों के हेक्साडेसिमल स्ट्रिंग में बदलते हैं और फिर तीन भागों को एक अग्रणी # के साथ जोड़ते हैं।
// rgb(79, 163, 194) के लिए उदाहरण
r = 79 → 4F
g = 163 → A3
b = 194 → C2
#4FA3C2यदि आप देखना चाहते हैं कि हेक्साडेसिमल संख्याएँ कैसे काम करती हैं या आधार रूपांतरण कैसे किया जाता है, तो आप <a href="/number-systems" rel="noopener noreferrer">संख्या प्रणाली गाइड</a> खोल सकते हैं।
RGB से HEX रूपांतरण कैसे काम करता है चरण दर चरण
RGB मान तीन दशमलव संख्याओं के रूप में लिखे जाते हैं। रूपांतरण के दौरान, इनमें से प्रत्येक संख्या को दो अंकों के HEX खंड में अनुवादित किया जाता है और फिर एकल रंग कोड में जोड़ा जाता है।
rgb(26, 43, 60)
↓ ↓ ↓
[26, 43, 60] → #1A2B3Cयहाँ rgb(26, 43, 60) के लिए एक विस्तृत विवरण है:
- चरण 1 — तीन चैनलों को अलग करें:
[26] [43] [60] - चरण 2 — प्रत्येक मान को दशमलव से HEX में परिवर्तित करें:
आप बार-बार दशमलव मान को 16 से विभाजित करते हैं या एक अंतर्निहित सहायक फ़ंक्शन का उपयोग करते हैं। प्रत्येक चरण में शेष HEX अंक (0–9, A–F) के लिए मैप किया जाता है।
26 → 1A 43 → 2B 60 → 3Cइस उदाहरण में, सभी तीन चैनल 0–255 के भीतर रहते हैं, इसलिए प्रत्येक एक दो-चरित्र का HEX खंड बन जाता है।
- चरण 3 — भागों को जोड़ें और # प्रतीक को जोड़ें:
#1A2B3C
यहां तक कि किसी भी मान्य RGB ट्रिपलेट के लिए वही दृष्टिकोण काम करता है: प्रत्येक घटक को स्वतंत्र रूप से परिवर्तित करें, फिर परिणामों को एकल HEX कोड में जोड़ें।
CSS में RGB और HEX के बीच चयन करना
RGB और HEX दोनों एक ही रंगों का वर्णन करते हैं, लेकिन एक प्रारूप दूसरे की तुलना में अधिक सुविधाजनक हो सकता है। चुनाव आमतौर पर इस पर निर्भर करता है कि आप एक परियोजना में रंग मानों को कैसे पढ़ते, संपादित करते और साझा करते हैं।
जब RGB अधिक व्यावहारिक है
- स्पष्ट चैनल नियंत्रण: लाल, हरा, और नीला के लिए मान सीधे फ़ंक्शन कॉल में दिखाई देते हैं, जो एनिमेशन या एल्गोरिदमिक रंग उत्पन्न करने के लिए उपयोगी है।
- JavaScript के साथ ठीक-ठाक करना: संख्यात्मक चैनलों को कोड में बढ़ाना, घटाना, या क्लैंप करना आसान है।
- पारदर्शिता के साथ काम करना: कोड
rgba()संस्करण एक अल्फा पैरामीटर जोड़ता है जबकि वही संरचना बनाए रखता है, जो ओवरले और छायाओं के लिए सुविधाजनक है।
जब HEX बेहतर फिट है
- संक्षिप्त नोटेशन: एक छोटा स्ट्रिंग जैसे
#1A2B3Cटोकन, डिज़ाइन सिस्टम, और साझा पैलेट के लिए आरामदायक है। - डिज़ाइन उपकरणों के साथ संरेखण: अधिकांश ग्राफ़िक संपादक डिफ़ॉल्ट रूप से HEX में रंग प्रदर्शित और निर्यात करते हैं, इसलिए आप बिना किसी अतिरिक्त रूपांतरण के मानों को कॉपी कर सकते हैं।
- पढ़ने योग्य प्रीसेट: HEX कोड को स्कैन करना आसान है जब आप इंटरफेस के लिए प्राथमिक, द्वितीयक, और तटस्थ रंगों की एक सूची बनाए रखते हैं।
सारांश
जब आपको कोड में रंग चैनलों या अपारदर्शिता को सीधे नियंत्रित करने की आवश्यकता हो, तो RGB/RGBA का उपयोग करें। जब आप डिज़ाइन टोकन के लिए एक संक्षिप्त, स्थिर मान चाहते हैं या जब आप मुख्य रूप से डिज़ाइन उपकरणों से रंग कॉपी करते हैं, तो HEX को प्राथमिकता दें। आप हमेशा बिना सटीकता खोए उनके बीच रूपांतरित कर सकते हैं।
CSS में रंगों को संभालने के लिए व्यावहारिक सुझाव
आधुनिक CSS कई रंग प्रारूपों को स्वीकार करता है, इसलिए यह आपके प्रोजेक्ट के भीतर एक या दो को मानक के रूप में चुनने के लायक है। इससे डिज़ाइन टोकन सुसंगत रहते हैं और शैलियों को बनाए रखना आसान हो जाता है।
प्राथमिक रंग प्रारूप चुनें
- HEX: डिज़ाइन सिस्टम और दस्तावेज़ों के लिए एक आधार प्रारूप के रूप में अच्छा।
- RGB/RGBA: प्रभावों, ओवरले, और स्थिति संक्रमणों के लिए सुविधाजनक जहाँ अपारदर्शिता महत्वपूर्ण है।
- HSL/HSLA: जब आप एक पूर्वानुमानित तरीके से रंग, संतृप्ति, या प्रकाशता को समायोजित करना चाहते हैं तो सहायक।
संक्षिप्त रूप का सावधानी से उपयोग करें
- #RGB की बजाय #RRGGBB: तीन-चरित्र का रूप केवल तभी मान्य होता है जब प्रत्येक जोड़ी समान अंकों से बनी हो। उदाहरण के लिए,
#FA3का विस्तार#FFAA33में होता है।
अल्फा के साथ HEX लिखना
- #RRGGBBAA: यह आठ-चरित्र का HEX प्रारूप है जिसमें अपारदर्शिता शामिल है। अंतिम दो अंक अल्फा चैनल को
00(पारदर्शी) सेFF(पूर्ण अपारदर्शी) तक परिभाषित करते हैं। - यदि आप पहले से HEX टोकन का उपयोग करते हैं, तो अल्फा के साथ HEX आपको आवश्यकतानुसार पारदर्शिता जोड़ते हुए वही शैली बनाए रखने की अनुमति देता है।
सामान्य pitfalls
- एक फ़ाइल में कई प्रारूपों को मिलाना: एक छोटे सेट के प्रारूपों पर टिके रहने से थीम और पुनर्गठन सरल रहते हैं।
- HEX को सीधे एनिमेट करना: चिकनी संक्रमणों के लिए, कुंजीफ्रेम में
rgb(),rgba(), याhsl()पर स्विच करें। - विपरीतता के बारे में भूलना: रंगों को परिभाषित करते समय, हमेशा हल्के और गहरे पृष्ठभूमियों पर पठनीयता की जांच करें।
रंग प्रारूपों के प्रति एक सुसंगत दृष्टिकोण और एक स्पष्ट टोकन रणनीति के साथ, शैलियाँ पठनीय, स्केलेबल, और डिज़ाइन के विकास के साथ पुनर्गठित करना आसान रहती हैं।
RGB से HEX रूपांतरण तालिका
निम्नलिखित संदर्भ तालिका कई सामान्य रंगों को RGB और HEX रूपों में दिखाती है। आप इसका उपयोग थीम, लेआउट, या ब्रांड पैलेट के साथ काम करते समय त्वरित संदर्भ के रूप में कर सकते हैं।
| विवरण | 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) |
किसी अन्य RGB संयोजन के लिए, आप पृष्ठ के शीर्ष पर कनवर्टर का उपयोग करके सटीक HEX कोड प्राप्त कर सकते हैं।
FAQ: RGB से HEX
- RGB मान हमेशा 0 और 255 के बीच क्यों होते हैं?
प्रत्येक RGB चैनल को 8-बिट मान के रूप में संग्रहीत किया जाता है। आठ बिट्स 256 विशिष्ट राज्यों का प्रतिनिधित्व कर सकते हैं, जो
0से255के बीच के रेंज के अनुरूप होते हैं। - यदि कोई मान इस रेंज के बाहर है तो क्या होता है?
0 से कम मानों को
0के रूप में माना जाता है, और 255 से अधिक मानों को255तक सीमित किया जाता है। सुसंगत परिणामों के लिए, HEX में परिवर्तित करने से पहले अपने RGB इनपुट को मान्य करें। - क्या RGB से HEX रूपांतरण वास्तविक रंग को बदलता है?
नहीं। RGB और HEX केवल एक ही रंग डेटा के दो प्रतिनिधित्व हैं। जब तक प्रत्येक चैनल 0–255 के भीतर रहता है, रूपांतरण बिना हानि के होता है।
- क्या HEX में कुछ RGB मानों के लिए संक्षिप्त रूप है?
हाँ। यदि HEX अंकों के प्रत्येक जोड़े में समान वर्ण होते हैं, तो आप
#RRGGBBको#RGBमें संकुचित कर सकते हैं। उदाहरण के लिए,#FF00AA#F0Aमें बदलता है। - RGB से परिवर्तित करते समय मैं पारदर्शिता को कैसे दर्शा सकता हूँ?
आप CSS में
rgba()का उपयोग करना जारी रख सकते हैं या विस्तारित HEX प्रारूप#RRGGBBAAपर स्विच कर सकते हैं, जहाँ अंतिम दो अंक अल्फा चैनल का प्रतिनिधित्व करते हैं।