CSS हेक्साडेसिमल RGBA?

Question

मुझे पता है आप लिख सकते हैं ...

background-color: #ff0000;

... अगर आप चाहते हैं कि कुछ लाल हो।

और आप लिख सकते हैं ...

background-color: rgba(255, 0, 0, 0.5);

... यदि आप कुछ लाल और पारभासी चाहते हैं।

क्या हेक्साडेसिमल में आंशिक रूप से पारदर्शी रंग लिखने का कोई ट्रिक तरीका है? मुझे कुछ चाहिए:

background-color: #ff000088; <--- the 88 is the alpha

... और ...

background-color: #ff0000 50%;

मुझे हेक्साडेसिमल में अपने सभी रंग मिल रहे हैं, और उन सभी को दशमलव 0-255 पैमाने पर परिवर्तित करने के लिए कष्टप्रद है।

Comments

आप विभिन्न सूचनाओं के साथ प्रयोग कर सकते हैं, लेकिन मैंने सुसाइड नहीं किया। rgb(0xff,\x80,#44)आश्चर्यजनक रूप से अष्टक प्रतिनिधित्व थोड़ा सा rgb(0100, 0200,0300)#4080C0

— सूअर का मांस

आप ColorPic का उपयोग करना चाह सकते हैं, जो एक चुने हुए रंग के लिए दशमलव आंकड़े दिखाता है। iconico.com/colorpic

— yunzen

जैसा कि Slomojo ने सुझाव दिया, LESS में आप पृष्ठभूमि-रंग कर सकते हैं: # ff0000 + rgba (0, 0, 0, .8); जो आपके लिए हेक्स को रूपांतरित करेगा और अभी भी पारदर्शिता को लागू करेगा लेकिन देशी CSS का उपयोग करके ऐसा नहीं किया जा सकता है।

— fl3x7

पूर्णता के लिए, जैसा कि Slomojo और fl3x7 चर्चा करते हैं, यह सास में आसानी से किया जा सकता है : background-color: opacify(#ff0000, 0.5);या background-color: transparentize(#ff0000, 0.5);आप उन सैस कार्यों के लिए सास हेक्स रंग चर भी प्रदान कर सकते हैं।

— एडम कैविनेस

अल्फा चैनल के साथ एक रंग

— 15

Answer 1

सीएसएस रंग मॉड्यूल स्तर 4 शायद 4 और 8 अंकों के हेक्साडेसिमल RGBA अंकन का समर्थन करेगा !

तीन हफ्ते पहले (18 दिसंबर 2014 को) सीएसएस कलर मॉड्यूल लेवल 4 के संपादक का मसौदा सीएसएस डब्ल्यू 3 सी वर्किंग ग्रुप को सौंपा गया था। हालांकि एक ऐसे राज्य में जो बदलने के लिए अतिसंवेदनशील है, दस्तावेज़ के वर्तमान संस्करण का तात्पर्य है कि कुछ हद तक निकट भविष्य में सीएसएस 4 और 8-अंक दोनों हेक्साडेसिमल RGBA संकेतन का समर्थन करेगा।

नोट: निम्नलिखित उद्धरण में अप्रासंगिक विखंडन है और जब आप इसे पढ़ते हैं, तो स्रोत भारी रूप से संशोधित हो सकता है (जैसा कि ऊपर उल्लेख किया गया है, यह एक संपादक का मसौदा है और अंतिम दस्तावेज नहीं है)।
अगर चीजें बहुत बदल गई हैं, तो कृपया मुझे एक टिप्पणी छोड़ दें जिससे मुझे पता चले कि मैं इस उत्तर को अपडेट कर सकता हूं!

§ 4.2। RGB हेक्साडेसिमल नोटेशन: #RRGGBB

A का सिंटैक्स <hex-color>एक <hash-token>टोकन है जिसके मान में 3, 4, 6 या 8 हेक्साडेसिमल अंक होते हैं । दूसरे शब्दों में, एक हेक्स रंग को हैश वर्ण, "#" के रूप में लिखा जाता है, इसके बाद कुछ अंकों 0-9या अक्षरों a-f( अक्षरों का मामला मायने नहीं रखता - #00ff00समान है #00FF00)।

8 अंक

पहले 6 अंकों की व्याख्या 6 अंकों के अंकन के लिए अनौपचारिक रूप से की जाती है। एक हेक्साडेसिमल संख्या के रूप में व्याख्या किए गए अंकों की अंतिम जोड़ी, रंग के अल्फा चैनल को निर्दिष्ट करती है, जहां 00पूरी तरह से पारदर्शी रंग का ffप्रतिनिधित्व करता है और पूरी तरह से अपारदर्शी रंग का प्रतिनिधित्व करता है।

उदाहरण 3
दूसरे शब्दों में, #0000ffccउसी रंग का प्रतिनिधित्व करता है rgba(0, 0, 100%, 80%)(थोड़ा पारदर्शी नीला)।

4 अंक

यह 8-अंकीय संकेतन का एक छोटा रूप है, 3-अंक संकेतन के समान "विस्तारित" है। हेक्साडेसिमल संख्या के रूप में व्याख्या किया गया पहला अंक, रंग के लाल चैनल को निर्दिष्ट करता है, जहां 0न्यूनतम मूल्य का fप्रतिनिधित्व करता है और अधिकतम का प्रतिनिधित्व करता है। अगले तीन अंक क्रमशः हरे, नीले और अल्फा चैनलों का प्रतिनिधित्व करते हैं।

सीएसएस रंगों के भविष्य के लिए इसका क्या मतलब है?

इसका मतलब यह है कि यह पूरी तरह से स्तर 4 दस्तावेज़ से हटाया नहीं गया है, हम जल्द ही हमारे RGBA रंग (या HSLA रंग, यदि आप उन लोगों में से एक हैं ) को हेक्साडेसिमल प्रारूप में ब्राउज़रों में परिभाषित करने में सक्षम होंगे जो रंग का समर्थन करते हैं मॉड्यूल स्तर 4 का सिंटैक्स।

उदाहरण

elem {
    background: rgb(0, 0, 0);           /* RGB notation (no alpha). */
    background: #000;                   /* 3-digit hexadecimal notation (no alpha). */
    background: #000000;                /* 6-digit hexadecimal notation (no alpha). */
    background: rgba(0, 0, 0, 1.0);     /* RGBA notation. */

    /* The new 4 and 8-digit hexadecimal notation. */
    background: #0000;                  /* 4-digit hexadecimal notation. */
    background: #00000000;              /* 8-digit hexadecimal notation. */
}

मैं अपने क्लाइंट-फेसिंग उत्पादों में इसका उपयोग कब कर पाऊंगा?

सभी चुटकुले एक तरफ: यह वर्तमान में केवल 2015 की शुरुआत है, इसलिए ये किसी भी ब्राउज़र में अभी कुछ समय के लिए समर्थित नहीं होंगे - भले ही आपका उत्पाद केवल उन ब्राउज़रों के सबसे अद्यतित होने पर काम करने के लिए डिज़ाइन किया गया हो जल्द ही किसी भी समय एक उत्पादन ब्राउज़र में कार्रवाई में इसे नहीं देखा जा सकता है।

#RRGGBBAA रंग संकेतन के लिए वर्तमान ब्राउज़र समर्थन देखें

हालाँकि, यह कहा गया है, सीएसएस के काम करने के तरीके का मतलब है कि हम वास्तव में आज इनका उपयोग शुरू कर सकते हैं! यदि आप वास्तव में अभी से इनका उपयोग शुरू करना चाहते हैं, तो जब तक आप किसी भी गैर-समर्थन वाले ब्राउज़र को वापस नहीं जोड़ते हैं, तब तक नई संपत्तियों की अनदेखी नहीं करेंगे, जब तक कि उन्हें वैध नहीं माना जाता:

figure {
  margin: 0;
  padding: 4px;
  
  /* Fall back (...to browsers which don't support alpha transparency). */
  background: #FEFE7F;
  color: #3F3FFE;
  
  /* Current 'modern' browser support. */
  background: rgba(255, 255, 0, 0.5);
  color: rgba(0, 0, 255, 0.75);
  
  /* Fall... foward? */
  background: #ffff007F; /* Or, less accurately, #ff08 */
  color: #0000ffbe;      /* Or #00fc */
}

<figure>Hello, world!</figure>

जब तक आप सीएसएस में गुणों backgroundऔर colorगुणों का समर्थन करने वाले ब्राउज़र पर इस उत्तर को देख रहे हैं , <figure>उपरोक्त स्निपेट के परिणाम वाला तत्व इसके समान दिखाई देगा:

हमारे <figure>तत्व का निरीक्षण करने के लिए विंडोज पर क्रोम के सबसे हाल के संस्करण (v39.0.2171) का उपयोग करना , हम निम्नलिखित देखेंगे:

6-अंकीय हेक्साडेसिमल फ़ॉल बैक rgba()मानों द्वारा ओवरराइड किया जाता है, और हमारे 8-अंक हेक्साडेसिमल मानों को अनदेखा कर दिया जाता है क्योंकि वर्तमान में उन्हें क्रोम के सीएसएस पार्सर द्वारा अमान्य माना जाता है। जैसे ही हमारा ब्राउज़र इन 8-अंकीय मानों का समर्थन करता है, ये rgba()लोगों को ओवरराइड कर देंगे ।

UPDATE 2018-07-04: फ़ायरफ़ॉक्स, क्रोम और सफारी अब इस संकेतन का समर्थन कर रहे हैं, एज अभी भी गायब है लेकिन संभवतः ( https://caniuse.com/#feat=css-rrggbbaa ) का अनुसरण करेगा ।

Comments

मुझे याद है कि यह मेलिंग सूचियों में एक साल पहले या नवीनतम (4- / 8-अंक के हेक्स होने का विचार नया नहीं है) को देखते हुए। खुशी है कि यह अब के लिए कलर्स 4 में प्रवेश किया है।

— BoltClock

@BoltClock उम्मीद है कि यह यहाँ भी रहेगा!

— जेम्स डोनली

फ़ायरफ़ॉक्स नाइटली ने इसे लागू कर दिया है :)

— फ्लोरी

/* Fall... foward? */»मैं सुझाव देता हूं कि मैं कूदता हूं। फालबैक और जंपफॉवर्ड: ^ पी

— वुड्रोशिगरु

बस एक उपयोगी लिंक जोड़ना। लिंक में हेक्स में अस्पष्टता मूल्य सूची है। gist.github.com/lopspower/03fb1cc0ac9f32ef38f4

— आशीष कुमार

Answer 2

प्रश्न को बढ़ाने के बाद मुझे उत्तर मिला। माफ़ करना!

एमएस एक्सेल ने मदद की!

बस हेक्स रंग मान के लिए हेक्स उपसर्ग जोड़ें एक अल्फा जोड़ने के लिए जिसमें% मूल्य के बराबर समरूपता है।

(rbga में प्रतिशत अस्पष्टता एक दशमलव के रूप में ऊपर वर्णित के रूप में व्यक्त की गई है)

Opacity %   255 Step        2 digit HEX prefix
0%          0.00            00
5%          12.75           0C
10%         25.50           19
15%         38.25           26
20%         51.00           33
25%         63.75           3F
30%         76.50           4C
35%         89.25           59
40%         102.00          66
45%         114.75          72
50%         127.50          7F
55%         140.25          8C
60%         153.00          99
65%         165.75          A5
70%         178.50          B2
75%         191.25          BF
80%         204.00          CC
85%         216.75          D8
90%         229.50          E5
95%         242.25          F2
100%        255.00          FF

Comments

आसानी से समझ में नहीं आता। क्या आपका मतलब #FF00000Cसमान है rgba(255,0,0,0.05)?

— yunzen

इसका प्रत्यय प्रत्यय नहीं है। मतलब आप इसे अपने 6 अंकों के सामने से जोड़ते हैं, हेक्स का रंग मूल्य #000000बन जाता है #7F000000।

— T9b

@ T9b: CSS3 इस अंकन का समर्थन नहीं करता है। कहानी का अंत।

— पॉइंटेडर्स

@PointedEars दोनों गणनाओं पर गलत। ओपी विशेष रूप से CSS3 का उल्लेख नहीं करता है, और यह प्रश्न मैंने सोचा होगा कि IE विशिष्ट मुद्दों से अधिक संबंधित होने की संभावना है जो हम सभी जानते हैं कि यह मुश्किल है। कोई भी कम-से-कम IE सीएसएस और हेक्स दोनों पारदर्शिता मूल्यों का उपयोग सीएसएस में नहीं करता है।

— T9b

@ T9b बकवास। ओपी के पास RGBA मूल्यों के बारे में एक सीएसएस प्रश्न है। CSS3 से पहले CSS में RGBA सपोर्ट नहीं है। यदि IE / MSHTML आपके अंकन का समर्थन करता है, तो वह स्वामित्व है , संगत नहीं है, और स्वाभाविक रूप से अविश्वसनीय है। और निश्चित रूप से आप उस संकेतन कार्य को बनाने के लिए क्लाइंट-साइड स्क्रिप्टिंग का उपयोग करने का सुझाव नहीं दे रहे हैं, क्या आप हैं? उसके लिए संगत नहीं होगा और साथ ही अविश्वसनीय भी होगा।

— प्वाइंट्सएर्स

Answer 3

RGB='#ffabcd';
A='0.5';
RGBA='('+parseInt(RGB.substring(1,3),16)+','+parseInt(RGB.substring(3,5),16)+','+parseInt(RGB.substring(5,7),16)+','+A+')';

Comments

var rgb = '#ffabcd'; var a = '0.5'; var matches = rgb.match(/#([\da-f]{2})([\da-f]{2})([\da-f]{2})/i); var rgba = 'rgba(' + matches.slice(1).map(function(m) { return parseInt(m, 16); }).concat(a) + ')';

— पॉइंटेड

यदि आप प्रतिक्रिया की दुनिया से आ रहे हैं:<div style={ { backgroundColor: `rgba(${ parseInt(color.substring(1,3),16) }, ${ parseInt(color.substring(3,5),16) }, ${ parseInt(color.substring(5,7),16) }, 0.5)` } }></div>

— अतुल यादव

Answer 4

यहां देखें http://www.w3.org/TR/css3-color/#rgba-color

यह संभव नहीं है, सबसे अधिक संभव है क्योंकि 0xFFFFFFFF 32 बिट पूर्णांक के लिए अधिकतम मूल्य से अधिक है

Comments

#ffffff(छह हेक्स-अंक) वास्तव में एक 24-बिट रंग मूल्य है; 0xFFFFFFFF वास्तव में 2³² and 1 है, और इसे अहस्ताक्षरित 32-बिट पूर्णांक के रूप में दर्शाया जा सकता है । मुझे लगता है कि इसका कारण #ffffffff(आठ हेक्स-अंक) निर्दिष्ट नहीं है कि दोनों सीएसएस रंग sRGB रंग स्थान में निहित हैं और आठ-हेक्स-अंक संकेतन एक डिस्प्ले डिवाइस के साथ अस्पष्ट होगा जो 32 बिट की रंग गहराई का समर्थन करता है। याद रखें कि अभी भी #fffइतना है कि इसका मतलब है rgb(100%, 100%, 100%)- सफेद - दोनों 8 बिट (256 रंग) और 16 बिट (65536 या 64K रंग) की रंग गहराई के साथ।

— पॉइंटेड

वास्तव में यह वही है जो 32 बिट पूर्णांक धारण करने में सक्षम है। 2 हेक्स अंक 8 बाइनरी अंकों के रूप में कई मान रख सकते हैं। या ... 8 हेक्स अंक 32 बाइनरी अंकों के रूप में कई मान रख सकते हैं।

— पीज्यूसन

हालांकि कोई बड़ी वजह नहीं है कि CSS फ़ंक्शन को शुरू से इस तरह से डिज़ाइन नहीं किया जाना चाहिए (साथ ही साथ आरजीबीए (0.0, 0.5, 1.0) अन्य रंगों के कार्यों के लिए मानदंडों के लिए तैरता है)। 32-बिट डिस्प्ले कलर सपोर्ट के लिए, यह 6-डिजिट आरजीबी के साथ शुरू होने के लिए मौजूद नहीं है और वास्तव में एक एज केस है। मेरे पास विभिन्न स्वरूपों को सीखने के साथ कोई समस्या नहीं है, लेकिन ऐसे मामले हैं जहां आपको हेक्स में एक गतिशील रंग मिल सकता है और रनटाइम पर सीएसएस बनाने की आवश्यकता होती है। इसके लिए हेक्स से दशमलव में कनवर्ट करने के अतिरिक्त चरण की आवश्यकता होती है यदि आप इसमें अल्फा जोड़ना चाहते हैं, जो कि क्लंकी है।

— बेजरोर

Answer 5

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

background: #56ff0077;

Comments

मैं इसे देखने के लिए उत्साहित था, और फिर इसे क्रोम 55 पर devtools में आज़माया। कोई पासा नहीं, यह एक अवैध संपत्ति मूल्य के रूप में त्रुटियां ...¯\_(ツ)_/¯

— ericsoco

ऐसा लगता है कि यहां विभिन्न मुद्दों पर फीचर के लिए स्थिति पृष्ठ है।

— बिली

क्रोम ने समर्थन हटा दिया है, सफारी और फ़ायरफ़ॉक्स का समर्थन है। इसका उपयोग न करें।

— केस

जुलाई 2019 तक, वैश्विक रूप से इस सुविधा का समर्थन करने वाले सभी ब्राउज़रों के 84.5% हैं। caniuse.com/#search=rrggbbaa

— एन्ड्रे

Answer 6

का प्रयोग करें red, green, blueRGBA में बदलने के लिए:

background-color: rgba(red($color), green($color), blue($color), 0.2);

Comments

SASS पृष्ठभूमि-रंग का समर्थन करता है: rgba ($ रंग, .2);

— djibe

वे वैध सीएसएस विधियाँ नहीं हैं - आपको इस बात का उल्लेख करना चाहिए कि

— पिओटर करबॉनिक

Answer 7

मुझे डर है कि यह संभव नहीं है। rgbaआप जो प्रारूप जानते हैं वह केवल एक ही है।

Comments

@mdmullinax: लेकिन HSL अंकन में हेक्स रंगों को कौन निर्दिष्ट करता है?

— BoltClock

मैं HSLA संकेतन के साथ जीवन में सब कुछ

— जोड़ता हूं

@ मम्मुलिनैक्स: ओह, यह वास्तव में बहुत बढ़िया है!

— BoltClock

@mdmullinax: यह आपको प्रसन्न कर सकते हैं यदि आप इसे अभी तक नहीं देखा है: mothereffinghsl.com

— BoltClock

@BoltClock मुझे वह साइट पसंद है, पॉल आयरिश जीतता है

— माइक

Answer 8

यदि आप LESS का उपयोग कर सकते हैं, तो एक फीका कार्य है।

@my-opaque-color: #a438ab;
@my-semitransparent-color: fade(@my-opaque-color, 50%);

background-color:linear-gradient(to right,@my-opaque-color, @my-semitransparent-color); 

// result: 
background-color: linear-gradient(to right, #a438ab, rgba(164, 56, 171, 0.5));

Comments

और sass / scss का एक समान कार्य है:rgba(base-color, 0.5)

— LocustHorde

Answer 9

मनमोहक राजकुमार:

केवल इंटरनेट एक्सप्लोरर एआरजीबी के प्रारूप में 4 बाइट हेक्स रंग की अनुमति देता है, जहां ए अल्फा चैनल है। यह उदाहरण के लिए ढाल फिल्टर में इस्तेमाल किया जा सकता है:

filter  : ~"progid:DXImageTransform.Microsoft.Gradient(GradientType=@{dir},startColorstr=@{color1},endColorstr=@{color2})";

जहाँ dir हो सकता है: 1 (क्षैतिज) या 0 (वर्टिकल) और रंग के तार हेक्स रंग (# FFAAD3) या आर्ग हेक्स रंग (# 88FFAAD3) हो सकते हैं।

Answer 10

सास में हम लिख सकते हैं:

background-color: rgba(#ff0000, 0.5);

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

Answer 11

अच्छी तरह से, अलग-अलग रंग अंकन आपको सीखना होगा।
कुलर आपको रंग और कई नोटिस में खोजने का बेहतर मौका देता है।
हेक्स आरजीबी, एफएफ = 255 और 00 = 0 से अलग नहीं है, लेकिन यही आप जानते हैं। तो एक तरह से, आपको इसकी कल्पना करनी होगी।
मैं हेक्स, आरजीबीए और आरजीबी का उपयोग करता हूं। जब तक बड़े पैमाने पर रूपांतरण की आवश्यकता नहीं होती है, मैन्युअल रूप से ऐसा करने से आपको कुछ अजीब 100 रंगों और उनके कोड को याद रखने में मदद मिलेगी।
बड़े पैमाने पर रूपांतरण के लिए कुछ स्क्रिप्ट लिखें जैसे कि अलारी द्वारा दी गई। कलर्स के साथ धमाका करें।

Answer 12

क्यों नहीं उपयोग करें background-color: #ff0000; opacity: 0.5; filter: alpha(opacity=50); /* in IE */

यदि आप किसी पाठ या किसी तत्व के लिए रंग को लक्षित करते हैं, तो यह करना बहुत आसान होना चाहिए।

Comments

-1 अपारदर्शिता सभी सामग्री को प्रभावित करती है, न केवल पृष्ठभूमि-रंग

— yunzen

तब वस्तु को दोगुना किया जा सकता है, एक में एक तत्व होना चाहिए, दूसरा कंटेनर के अंदर एक होना चाहिए जिसमें अपारदर्शिता हो। क्योंकि प्रश्न से उपयोगकर्ता पारंपरिक आरजीबीए की तुलना में एक और तरीका चाहता है।

— आकर्षक राजकुमार

वह अभी भी वही परिणाम चाहता है, और मैं HTML को संशोधित करने के बजाय rgba () या किसी भी अन्य संकेतन का बेहतर उपयोग करूंगा।

— फेलिपेअल्स

यह वह उत्तर है जिसकी मुझे तलाश थी, हेक्स रंगों को अकेला छोड़ दें और opacityसीएसएस संपत्ति का उपयोग करके अस्पष्टता को बदल दें ।

— यहां