blocks|key|3026601|text|这取决于将应用透明颜色的背景。但如果您知道背景的颜色(例如白色)，则可以计算应用于特定背景的RGBA颜色所产生的RGB颜色。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3026602|它只是颜色和背景之间的加权平均值，权重是alpha通道(从0到1)：|3026603|Color+=+Color+*+alpha+%2B+Background+*+(1+-+alpha);|code-block|syntax|javascript|3026604|对于白色rgb(255,255,255)背景下的透明浅蓝色rgba(0,129,255,.4)：|offset|length|style|CODE|3026605|Red+++=+++0+*+0.4+%2B+255+*+0.6+=+153
Green+=+129+*+0.4+%2B+255+*+0.6+=+204.6
Blue++=+255+*+0.4+%2B+255+*+0.6+=+255|3026606|这给了rgb(153,205,255)或#99CDFF|3026607|entityMap^0|0|0|0|4|G|T|I|0|0|3|G|K|7|0^^$0|@$1|2|3|4|5|6|7|U|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|V|8|@]|9|@]|A|$]]|$1|D|3|E|5|F|7|W|8|@]|9|@]|A|$G|H]]|$1|I|3|J|5|6|7|X|8|@$K|Y|L|Z|M|N]|$K|10|L|11|M|N]]|9|@]|A|$]]|$1|O|3|P|5|F|7|12|8|@]|9|@]|A|$G|H]]|$1|Q|3|R|5|6|7|13|8|@$K|14|L|15|M|N]|$K|16|L|17|M|N]]|9|@]|A|$]]|$1|S|3|-4|5|6|7|18|8|@]|9|@]|A|$]]]|T|$]]

It depends on the background to which your transparent color will be applied.
But if you know the color of the background (e.g. white), you can calculate the RGB color resulting of the RGBA color applied to the specific background.

It's just the weighted average between the color and the background, the weight being the alpha channel (from 0 to 1) :

<pre><code>Color = Color * alpha + Background * (1 - alpha);
</code></pre>

For your transparent light blue <code>rgba(0,129,255,.4)</code> against white <code>rgb(255,255,255)</code> : 

<pre><code>Red = 0 * 0.4 + 255 * 0.6 = 153
Green = 129 * 0.4 + 255 * 0.6 = 204.6
Blue = 255 * 0.4 + 255 * 0.6 = 255
</code></pre>

Which gives <code>rgb(153,205,255)</code> or <code>#99CDFF</code>

blocks|key|189596|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|189597|function+hexify(color)+{
++var+values+=+color
++++.replace(/rgba?$/,+'')
++++.replace(/$/,+'')
++++.replace(/[\s%2B]/g,+'')
++++.split(',');
++var+a+=+parseFloat(values[3]+%7C%7C+1),
++++++r+=+Math.floor(a+*+parseInt(values[0])+%2B+(1+-+a)+*+255),
++++++g+=+Math.floor(a+*+parseInt(values[1])+%2B+(1+-+a)+*+255),
++++++b+=+Math.floor(a+*+parseInt(values[2])+%2B+(1+-+a)+*+255);
++return+"#"+%2B
++++("0"+%2B+r.toString(16)).slice(-2)+%2B
++++("0"+%2B+g.toString(16)).slice(-2)+%2B
++++("0"+%2B+b.toString(16)).slice(-2);
}

var+myHex+=+hexify('rgba(57,156,29,0.05)');+//+"#f5faf3"

console.log(myHex);|code-block|syntax|javascript|189598|189599|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|J|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|K|8|@]|9|@]|A|$E|F]]|$1|G|3|4|5|6|7|L|8|@]|9|@]|A|$]]|$1|H|3|-4|5|6|7|M|8|@]|9|@]|A|$]]]|I|$]]

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>function hexify(color) {
 var values = color
 .replace(/rgba?$/, '')
 .replace(/$/, '')
 .replace(/[\s+]/g, '')
 .split(',');
 var a = parseFloat(values[3] || 1),
 r = Math.floor(a * parseInt(values[0]) + (1 - a) * 255),
 g = Math.floor(a * parseInt(values[1]) + (1 - a) * 255),
 b = Math.floor(a * parseInt(values[2]) + (1 - a) * 255);
 return "#" +
 ("0" + r.toString(16)).slice(-2) +
 ("0" + g.toString(16)).slice(-2) +
 ("0" + b.toString(16)).slice(-2);
}

var myHex = hexify('rgba(57,156,29,0.05)'); // "#f5faf3"

console.log(myHex);</code></pre>
</div>
</div>

blocks|key|191551|text|通过使用chrome的吸管工具，你可以节省一些时间和计算。我通常做的是将一个大div的背景颜色设置为rgba，然后在CSS中添加一个颜色属性到某个随机的十六进制值。然后，您只需单击该随机十六进制值旁边的彩色方块，将鼠标悬停在页面上具有背景色的div上，并使用滴管选择背景色。如果它返回为rgba，您可以通过再次单击该彩色方块并单击右侧的向上和向下箭头在hsla、rgba和十六进制之间循环。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|191552|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

You can save yourself some time and calculations by using chrome's eyedropper tool. What I usually do is set a big div's background color to the rgba I have then add a color attribute in CSS to some random hex value. Then you just click on the colored square next to that random hex value and hover over the div that has the background color on the page and use the eyedropper to select the background color. If it comes back as rgba you can cycle through hsla, rgba, and hex by clicking that colored square again and click the up and down arrows to the right.

I'm wondering how to convert <code>rgba</code> into <code>hex</code> in a way that translates the visible rgba-color (including transparency) into a hex value.

Say I have this: 

<pre><code>rgba(0,129,255,.4)
</code></pre>

Which is sort of a "light blue"... 

I would like to know if there is a way to get the same light blue "visible" color in hex, so I don't want the converted <code>#0081ff</code> but something close to the color visible on screen.

Question: 
How to convert rgba to a transparency-adjusted-hex?

How to convert rgba to a transparency-adjusted-hex?

我想知道如何将rgba转换为hex，将可见的rgba颜色(包括透明度)转换为十六进制值。假设我有这个：rgba(0,129,255,.4)它是一种“浅蓝色”...我想知道有没有办法获得相同的十六进制浅蓝色“可见”的颜色，所以我不想转换的#0081ff，而是一些接近屏幕上可见的颜色。问题：如何将rgba转换为透明度调整的...

问如何将rgba转换为透明度调整的十六进制？
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将rgba转换为透明度调整的十六进制？EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将rgba转换为透明度调整的十六进制？
EN