अल्फा चैनल के साथ एक रंग का हेक्स प्रतिनिधित्व?


117

हेक्स प्रारूप में एक रंग (अल्फा चैनल सहित) का प्रतिनिधित्व करने के तरीके पर एक डब्ल्यू 3 या कोई अन्य उल्लेखनीय मानक है?

क्या यह #RGBA या #ARGB है?


8
यह सीएसएस कलर लेवल 4 स्रोत (चौथी बुलेट बिंदु देखें) में आ रहा है
asटाइम विद

@ AnimeVidas अगर आपने एक जवाब में कहा था, तो मैंने आपको उकसाया होगा।
सिरो सेंटिल्ली 郝海东 冠状 iro i 法轮功 '

@cirosantilli क्या मुझे ऐसा लग रहा है कि मुझे प्रतिनिधि की आवश्यकता है? :-P
56इमे विदा

1
@ ToimeVidas लोल, अगर आप कुछ साझा करने की परवाह करते हैं ... =)
सिरो संटिली 郝海东 idas idas idas 病

यहाँ इस बारे में सीएसएस-विशिष्ट प्रश्न है: सीएसएस हेक्सिडेसिमल आरजीबीए?
जेम्स डोनली

जवाबों:


82

CSS 3 में, कल्पना से उद्धृत करने के लिए, "RGBA मान के लिए कोई हेक्साडेसिमल नोटेशन नहीं है" ( CSS स्तर 3 युक्ति देखें )। इसके बजाय आप डेसीबल या प्रतिशत के साथ आरजीबीए () कार्यात्मक संकेतन का उपयोग कर सकते हैं, उदाहरण के लिए आरजीबीए (255, 0, 0, 0.5) 50% पारदर्शी लाल होगा। RGB चैनल 0-255 या 0% -100%, अल्फा 0-1 है।

CSS 4 * में, आप अल्फा चैनल को 8 अंकों के हेक्स कलर के 7 वें और 8 वें अक्षरों का उपयोग करके निर्दिष्ट कर सकते हैं, या 4 अंकों के हेक्स कलर के 4 वें चरित्र ( सीएसएस लेवल 4 की कल्पना देखें )

मई 2019 तक,> 80% उपयोगकर्ताओं से #RGBA प्रारूप को समझने की उम्मीद की जा सकती है

  • फ़ायरफ़ॉक्स 49 ( मोज़िला बग 567283 ) के बाद से फ़ायरफ़ॉक्स ने इस सिंटैक्स का समर्थन किया है ।
  • सफारी ने 10 के बाद से इस सिंटैक्स का समर्थन किया है।
  • Chrome ने इस सिंटैक्स का समर्थन किया है क्योंकि क्रोम 62 है। पुराने संस्करणों के लिए आप इस सिंटैक्स का उपयोग करने के लिए प्रयोगात्मक वेब सुविधाओं को सक्षम कर सकते हैं। देखें क्रोमियम समस्या 618,472 और वेबकिट बग 150,853
  • एंड्रॉइड ऐप जो एंड्रॉइड पी या नए को लक्षित करते हैं, इस सिंटैक्स का उपयोग कर सकते हैं
  • ओपेरा ओपेरा 52 (या प्रयोगात्मक 39 वेब सुविधाएँ सक्षम होने पर ओपेरा 39) में इस वाक्यविन्यास का समर्थन करता है।
  • IE 11 और एजएचटीएमएल 18 (एज 44) इस सिंटैक्स का समर्थन नहीं करते हैं। एज के क्रोमियम आधारित संस्करण इस वाक्य रचना का समर्थन करेंगे।

अप टू डेट ब्राउजर सपोर्ट की जानकारी CanIUse.com पर उपलब्ध है

* तकनीकी रूप से अभी भी मसौदे में है, लेकिन ब्राउज़र समर्थन को देखते हुए इसे बदलने की संभावना नहीं है।


2
अब तक, मोज़िला (फ़ायरफ़ॉक्स 49) #RRGGBBAA और #RGBA
Shiyaz

92

ऐसा लगता है कि कोई हेक्स अल्फा प्रारूप नहीं है: http://www.w3.org/TR/css3-color/

वैसे भी, यदि आप SASS जैसे CSS प्रीप्रोसेसर का उपयोग करते हैं तो आप एक हेक्स टू rgba: बैकग्राउंड पास कर सकते हैं :

rgba(#000, 0.5);

और प्रीप्रोसेसर बस आरजीबी कोड को स्वचालित रूप से आरजीबी में बदल देता है।


15

मुझे यकीन नहीं है कि कोई आधिकारिक मानक है-

RGBA वह प्रतिनिधित्व है जो मैंने वेब मैक्रोमीडिया के लिए देखा है और अन्य लोग ARGB का उपयोग करते हैं

मेरा मानना ​​है कि RGBA अधिक सामान्य प्रतिनिधित्व है।

यदि यह मदद करता है तो यह CSS3 के लिए W3 से है
http://www.w3.org/TR/css3-color/#rgba-color

EDIT (पैट्रिक): उपरोक्त W3 लिंक से उद्धरण

RGB मानों के विपरीत, RGBA मान के लिए कोई हेक्साडेसिमल नोटेशन नहीं है


2
इसके अलावा, अल्फा के साथ रंगों को निर्दिष्ट करने के लिए सीएसएस फ़ंक्शन आरजीबीए () है
एम्बर

8
आपके द्वारा पोस्ट किए गए W3 लिंक से: RGB मानों के विपरीत, RGBA मान के लिए कोई हेक्साडेसिमल नोटेशन नहीं है।
पैट्रिक क्लुग

2
मैंने पहले # आरजीबी, ए देखा है। अजीब।
जोशुआ

Android ड्रॉबल्स के लिए, यह ARGB: developer.android.com/reference/android/graphics/drawable/…
Derek Kurth

10

Chrome 52+ अल्फा हेक्स का समर्थन करता है :

background: #56ff0077;

पुराने ब्राउज़रों के लिए, आपको उपयोग करना होगा:

background-color: rgba(255, 220, 0, 0.3);

3
जब तक आप प्रायोगिक वेब सुविधाओं को सक्षम नहीं करते हैं, यह नहीं है, क्योंकि यह एंड्रॉइड पर समस्याएं पैदा कर रहा था। ब्राउज़र समर्थन विवरण के लिए ऊपर मेरा उत्तर देखें।
Thelem

3

आप RGB मान प्राप्त करने और फिर अल्फा मान का उपयोग करने के लिए GIMP या फोटो शॉप के रंग बीनने में हेक्स रंग डालने की कोशिश कर सकते हैं। जैसे। लाल है #FF0000या rgb(255,0,0) यदि आप .5 के अल्फा मान से लाल चाहते हैं rgba(255,0,0,.5)

शायद वही नहीं जो आप चाहते थे लेकिन उम्मीद है कि मदद करता है।


1
यह नीचे मतदान किया गया था, जो थोड़ा कठोर लगता है। यह पूछे गए सवाल का जवाब नहीं देता है, लेकिन सवाल यह नहीं कहता है कि वे क्यों जानना चाहते हैं। यदि वे सीएसएस में एक RGBA रंग का उपयोग करना चाहते हैं, तो यह उत्तर सही है।
थेलेम
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.