HEXA से RGBA कनवर्टर
HEXA रंग कोड को rgba(r, g, b, a) में बिना गणना किए परिवर्तित करें। यह उपकरण तब उपयोगी होता है जब आपके डिज़ाइन टोकन या निर्यात HEX के साथ अल्फा का उपयोग करते हैं, लेकिन आपका CSS या कैनवास कोड RGBA के साथ काम करता है।
HEXA प्रारूप में एक रंग दर्ज करें और आप तुरंत मिलान RGBA मान देखेंगे। आप फिर rgba() फ़ंक्शन को अपने स्टाइल, कीफ्रेम या ड्राइंग रूटीन में कॉपी कर सकते हैं।
इस पृष्ठ पर आपको यह भी मिलेगा कि HEX के साथ अल्फा कैसे काम करता है, RGBA पर एक ताज़ा जानकारी, एक स्पष्ट रूपांतरण सूत्र, एक चरण-दर-चरण उदाहरण, एक छोटा संदर्भ तालिका, और सामान्य उपयोग मामलों के बारे में एक FAQ।
HEXA रंग कोड क्या है
HEXA रंग सामान्य HEX प्रारूप को एक अल्फा चैनल के साथ बढ़ाता है। #RRGGBB के बजाय यह #RRGGBBAA का उपयोग करता है, जहां अंतिम दो वर्ण अपारदर्शिता का प्रतिनिधित्व करते हैं।
प्रत्येक वर्ण जोड़ी 00 से FF तक का एक हेक्साडेसिमल संख्या है। लाल, हरा, और नीला जोड़े बिल्कुल सामान्य HEX रंग की तरह व्यवहार करते हैं। अंतिम अल्फा जोड़ी भी 00 (पूर्णतः पारदर्शी) से FF (पूर्णतः अपारदर्शी) के बीच होती है।
उदाहरण के लिए, #FF000080 एक अर्ध-पारदर्शी लाल का वर्णन करता है। ब्राउज़र और उपकरण प्रत्येक जोड़ी को पार्स करते हैं, इसे दशमलव में परिवर्तित करते हैं, और फिर आंतरिक रूप से परिणामी RGB और अल्फा मानों का उपयोग करते हैं।
RGBA क्या है
RGBA एक RGB रंग का कार्यात्मक CSS रूप है जिसमें एक अल्फा चैनल होता है। इसे rgba(r, g, b, a) के रूप में लिखा जाता है, जहां r, g, और b 0 से 255 तक के दशमलव मान हैं, और a 0 से 1 तक का एक संख्या है।
एक अल्फा मान 0 का मतलब है पूर्ण पारदर्शिता, 1 का मतलब है पूर्ण अपारदर्शिता, और बीच के मान आंशिक पारदर्शिता उत्पन्न करते हैं। उदाहरण के लिए, rgba(0, 0, 0, 0.5) एक अर्ध-पारदर्शी काला है जो अक्सर ओवरले के लिए उपयोग किया जाता है।
चूंकि RGBA एक फ़ंक्शन नोटेशन है, यह CSS और कीफ्रेम एनिमेशन में स्वाभाविक रूप से फिट बैठता है और इसे JavaScript या अन्य रनटाइम कोड में उत्पन्न करना आसान है।
HEXA से RGBA रूपांतरण सूत्र
#RRGGBBAA -> rgba(r, g, b, a)
1) Split the HEXA string:
#RRGGBBAA -> RR, GG, BB, AA
2) Convert each pair from hex to decimal:
R = hex_to_dec(RR)
G = hex_to_dec(GG)
B = hex_to_dec(BB)
A = hex_to_dec(AA)
3) Normalize alpha to [0, 1]:
a = A / 255
4) Compose RGBA:
rgba(R, G, B, a)
Helper:
hex_to_dec("FF") = 255
hex_to_dec("00") = 0लाल, हरा, और नीला जोड़े सामान्य HEX से RGB रूपांतरण की तरह व्यवहार करते हैं। एकमात्र अतिरिक्त कदम अल्फा चैनल को 255 से विभाजित करना है ताकि इसे RGBA फ़ंक्शन के लिए 0 से 1 के रेंज में एक भिन्न के रूप में व्यक्त किया जा सके।
#4FA3C2CC के लिए उदाहरण
1) जोड़े:
RR = 4F, GG = A3, BB = C2, AA = CC
2) दशमलव में रूपांतरण:
R = 79, G = 163, B = 194, A = 204
3) अल्फा सामान्यीकरण:
a = 204 / 255 (लगभग 0.8)
4) अंतिम मान:
rgba(79, 163, 194, 0.8)HEXA से RGBA रूपांतरण कैसे काम करता है चरण दर चरण
HEXA को RGBA में परिवर्तित करना मुख्य रूप से हेक्साडेसिमल रूप से प्रत्येक रंग चैनल को अनपैक करने का मामला है। एक बार जब जोड़े दशमलव में डिकोड हो जाते हैं, तो आपको केवल अल्फा चैनल को स्केल करना होता है।
#1A2B3C80
-> [1A, 2B, 3C, 80]
-> rgba(r, g, b, a)यहाँ #1A2B3C80 के लिए चरणों पर एक करीबी नज़र है।
- चरण 1 - मान को जोड़ों में विभाजित करें
[1A] [2B] [3C] [80] - चरण 2 - प्रत्येक जोड़ी को हेक्स से दशमलव में परिवर्तित करें
प्रत्येक दो वर्ण समूह एक बेस 16 संख्या है। इसे दशमलव में परिवर्तित करें ताकि लाल, हरा, नीला, और अल्फा मान 0 से 255 के रेंज में प्राप्त हो सकें।
1A = 26 2B = 43 3C = 60 80 = 128 - चरण 3 - अल्फा को सामान्य करें और RGBA बनाएं
अल्फा चैनल को 255 से विभाजित करें ताकि अंतिम अल्फा भिन्न प्राप्त हो सके, फिर चारों मानों को rgba() फ़ंक्शन में प्लग करें।
rgba(26, 43, 60, 0.5)
आप किसी भी मान्य HEXA रंग पर समान रूटीन लागू कर सकते हैं, यही कारण है कि इसे दिन-प्रतिदिन के काम में एक कनवर्टर का उपयोग करना सुविधाजनक है बजाय कि प्रत्येक चरण को मैन्युअल रूप से पुनः गणना करने के।
HEXA और RGBA के बीच चयन करना
HEXA और RGBA दोनों समान जानकारी व्यक्त करते हैं: लाल, हरा, नीला, और अल्फा। अंतर इस बात में है कि उन्हें कैसे लिखा जाता है और प्रत्येक प्रारूप कहाँ अधिक सुविधाजनक है।
जब HEXA एक अच्छा विकल्प हो
- डिज़ाइन टोकन और स्टाइल मैप: संक्षिप्त स्ट्रिंग जैसे
#4FA3C2CCको कॉन्फ़िगरेशन फ़ाइलों और थीम ऑब्जेक्ट्स में स्टोर करना आसान है। - डिज़ाइन टूल से कॉपी करना: कई संपादक रंगों को HEX के साथ अल्फा के रूप में निर्यात कर सकते हैं, ताकि आप उन्हें सीधे अपने कोडबेस में पेस्ट कर सकें।
- स्वैच की सूचियाँ: HEXA कोड तालिकाओं और JSON दस्तावेज़ों में संरेखित करना आसान है।
जब RGBA अधिक व्यावहारिक हो
- इनलाइन CSS और कीफ्रेम: कोड में
rgba()फ़ंक्शन स्वाभाविक रूप से स्टाइलशीट और एनिमेशन में पढ़ा जाता है। - गतिशील गणनाएँ: संख्यात्मक अल्फा और चैनल मानों को JavaScript या शेडर कोड में समायोजित करना आसान है।
- अन्य प्रारूपों के साथ मिश्रण: RGBA अक्सर HEX, HSL, और नए CSS रंग नोटेशन के बीच रूपांतरण के लिए एक पुल के रूप में कार्य करता है।
सारांश
HEXA का उपयोग करें जब आप संक्षिप्त, साझा करने योग्य टोकन की परवाह करते हैं। जब आपको एक फ़ंक्शन रूप की आवश्यकता हो जो कोड में एनिमेट करना और हेरफेर करना आसान हो, तो उन रंगों को RGBA में परिवर्तित करें।
HEXA और RGBA का एक साथ उपयोग करने के लिए सर्वोत्तम प्रथाएँ
कई परियोजनाओं में आप पाठ आधारित HEX मानों और फ़ंक्शन आधारित RGBA घोषणाओं दोनों का सामना करेंगे। कुछ दिशानिर्देश मिश्रण को प्रबंधित करना आसान बनाते हैं।
एक प्राथमिक संग्रह प्रारूप चुनें
- टोकन के लिए HEXA का उपयोग करें: डिज़ाइन सिस्टम रंगों को HEX या HEXA स्ट्रिंग के रूप में स्टोर करें और आवश्यकतानुसार उन्हें परिवर्तित करें।
- कार्यान्वयन विवरण के लिए RGBA रखें: CSS, कैनवस, और अन्य स्थानों पर जहाँ आप ड्रॉ या एनिमेट करते हैं, rgba() का उपयोग करें।
अन्य मॉडलों के साथ संयोजन करें
- RGB या HSL के माध्यम से परिवर्तित करें: आप HEXA, RGBA, और HSL के बीच जाने के लिए अच्छी तरह से ज्ञात मध्यवर्ती चरणों का उपयोग कर सकते हैं बजाय कि रूपांतरण सूत्रों को फिर से आविष्कार करने के।
- मानों को सुरक्षित रूप से क्लैम्प करें: जब आप कोड में मानों को संपादित करते हैं तो हमेशा सुनिश्चित करें कि चैनल अपने मान्य रेंज के भीतर रहें।
प्रणाली को सुसंगत रखें
- अपने विकल्पों का दस्तावेज़ीकरण करें: लिखें कि HEXA का उपयोग कहाँ किया गया है और RGBA को कहाँ प्राथमिकता दी गई है ताकि भविष्य में परिवर्तन पूर्वानुमानित रहें।
- कनवर्टर्स का उपयोग करें, मैनुअल गणना नहीं: स्वचालित सहायक गलतियों को कम करते हैं और विभिन्न प्रारूपों में बड़े पैलेट को समन्वयित रखते हैं।
संग्रहण और कार्यान्वयन प्रारूपों के बीच स्पष्ट विभाजन के साथ, आप HEXA और RGBA को एक ही कोडबेस में आराम से संयोजित कर सकते हैं बिना पठनीयता का त्याग किए।
HEXA से RGBA रूपांतरण तालिका
नीचे दी गई तालिका में कुछ सामान्य रंगों को पारदर्शिता के साथ HEXA और RGBA रूपों में सूचीबद्ध किया गया है। मानों को स्कैन करना आसान रखने के लिए गोल किया गया है जबकि आप ओवरले, छायाएँ, या कांच जैसे प्रभावों पर काम कर रहे हैं।
| विवरण | HEXA | RGBA |
|---|---|---|
| सफेद 50% | #FFFFFF80 | rgba(255, 255, 255, 0.5) |
| काला 50% | #00000080 | rgba(0, 0, 0, 0.5) |
| लाल 80% | #FF0000CC | rgba(255, 0, 0, 0.8) |
| हरा 40% | #00FF0066 | rgba(0, 255, 0, 0.4) |
| नीला 30% | #0000FF4D | rgba(0, 0, 255, 0.3) |
| पीला 60% | #FFFF0099 | rgba(255, 255, 0, 0.6) |
| सियान 70% | #00FFFFB3 | rgba(0, 255, 255, 0.7) |
| मैजेंटा 90% | #FF00FFE6 | rgba(255, 0, 255, 0.9) |
| ओवरले ग्रे | #11111180 | rgba(17, 17, 17, 0.5) |
| सॉफ्ट ग्रे | #33333380 | rgba(51, 51, 51, 0.5) |
| पैनल बॉर्डर | #55555580 | rgba(85, 85, 85, 0.5) |
| अक्सेंट ऑरेंज 70% | #FFA500B3 | rgba(255, 165, 0, 0.7) |
| बैंगनी ओवरले | #80008080 | rgba(128, 0, 128, 0.5) |
| टील ओवरले | #00808080 | rgba(0, 128, 128, 0.5) |
किसी अन्य HEXA संयोजन के लिए आप पृष्ठ के शीर्ष पर कनवर्टर का उपयोग कर सकते हैं ताकि मानक एल्गोरिदम के साथ सटीक RGBA मानों की गणना की जा सके।
FAQ: HEXA से RGBA
- HEX और HEXA के बीच क्या अंतर है
सामान्य HEX कोड छह अंकों का उपयोग करते हैं और केवल RGB चैनलों का वर्णन करते हैं। HEXA अल्फा चैनल के लिए दो और अंक जोड़ता है, ताकि आप एक ही संक्षिप्त स्ट्रिंग में पारदर्शिता का प्रतिनिधित्व कर सकें।
- मैं HEXA को RGBA में क्यों परिवर्तित करूंगा
कई कोड उदाहरण और CSS सुविधाएँ rgba() या अन्य कार्यात्मक रंग रूपों की अपेक्षा करती हैं। RGBA में परिवर्तित करने से रंगों को एनिमेट करना, अल्फा को संख्यात्मक रूप से समायोजित करना, या अन्य रंग मॉडलों के साथ मिश्रण करना आसान हो जाता है।
- क्या रूपांतरण करते समय रंग बदलता है
नहीं। जब तक आपकी गणना सही है, एक HEXA रंग और इसका RGBA समकक्ष एक ही दृश्य रंग और स्क्रीन पर अपारदर्शिता का प्रतिनिधित्व करते हैं।
- क्या मैं RGBA को फिर से HEXA में परिवर्तित कर सकता हूँ
हाँ। आप r, g, और b को दो अंकों के HEX मानों में परिवर्तित कर सकते हैं और अल्फा भिन्न को 255 से गुणा करके अंतिम जोड़ी प्राप्त कर सकते हैं। गोल करने और पैडिंग के बाद, आपको एक पूर्ण आठ अंकों का HEXA कोड मिलता है।
- क्या CSS में HEXA या RGBA का उपयोग करना बेहतर है
यह आपके लक्ष्यों पर निर्भर करता है। HEXA टोकन को संक्षिप्त और कॉपी करने में आसान रखता है, जबकि RGBA अक्सर कोड में समायोजित करना आसान होता है। कई टीमें टोकन के लिए HEXA का उपयोग करती हैं और घटक-स्तरीय स्टाइल लिखते समय RGBA का उपयोग करती हैं।
संबंधित कनवर्टर:
HEXA to HSLA कन्वर्टर
तुरंत hexa से hsla की गणना करेंHEXA to HSVA कन्वर्टर
तुरंत hexa से hsva की गणना करेंRGBA to HEXA कन्वर्टर
तुरंत rgba से hexa की गणना करेंRGBA to HSLA कन्वर्टर
तुरंत rgba से hsla की गणना करेंRGBA to HSVA कन्वर्टर
तुरंत rgba से hsva की गणना करेंHSLA to HEXA कन्वर्टर
तुरंत hsla से hexa की गणना करें