CSS 将 8 位十六进制颜色转换为 rgba 颜色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29100161/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Convert 8-digit hex colors to rgba colors?
提问by Steve
Everything I've found on this subject simply converts the hex to rgb and then adds an alpha of 1. I want to get the intended alpha from the hex digits as well.
我在这个主题上找到的所有内容都只是将十六进制转换为 rgb，然后添加 1 的 alpha。我也想从十六进制数字中获取预期的 alpha。
A color such as #949494E8or #DCDCDC8Fclearly has an alpha value that's not 0 or 1.
诸如#949494E8或的颜色#DCDCDC8F显然具有非 0 或 1 的 alpha 值。
回答by Terry
I have made a quick JSfiddle form that allows you to convert from 8-digit hex code into CSS rgba values ;)
我制作了一个快速的 JSfiddle 表单，允许您将 8 位十六进制代码转换为 CSS rgba 值；)
https://jsfiddle.net/teddyrised/g02s07n4/embedded/result/
https://jsfiddle.net/teddyrised/g02s07n4/embedded/result/
The basis is rather simple — to split the string you have provided into parts of 2-digits, and perform conversion into percentage ratios for the alpha channel, and to decimals for the RGB channels. The markup is as follow:
基础相当简单——将您提供的字符串拆分为 2 位数字的部分，并执行转换为 alpha 通道的百分比和 RGB 通道的小数。标记如下：
<form action="">
<select id="format">
<option value="rgba">RGBa: RRGGBBAA</option>
<option value="argb">aRGB: AARRGGBB</option>
</select>
<input type="text" id="hex" value="#949494E8" />
<button>Convert</button>
</form>
<p id="rgba"></p>
The logic:
逻辑：
// Remove hash
var hex = $('#hex').val().slice(1);
// Split to four channels
var c = hex.match(/.{1,2}/g);
// Function: to decimals (for RGB)
var d = function(v) {
return parseInt(v, 16);
};
// Function: to percentage (for alpha), to 3 decimals
var p = function(v) {
return parseFloat(parseInt((parseInt(v, 16)/255)*1000)/1000);
};
// Check format: if it's argb, pop the alpha value from the end and move it to front
var a, rgb=[];
if($('#format').val() === 'argb') {
c.push(c.shift());
}
// Convert array into rgba values
a = p(c[3]);
$.each(c.slice(0,3), function(i,v) {
rgb.push(d(v));
});
The gist of conversion is as follow:
转换的要点如下：
- Converting the RGB channels in hex, into decimal values. This is done by using
parseInt(hexValue, 16). - Converting the alpha channel in hex, into percentage ratio. This is done by simply converting it to decimal values (see above point), and calculating its relative value to 255.
- 将十六进制的 RGB 通道转换为十进制值。这是通过使用
parseInt(hexValue, 16). - 将 alpha 通道以十六进制转换为百分比。这是通过简单地将其转换为十进制值（见上点），并将其相对值计算为 255 来完成的。
回答by Piotr Dajlido
Here is a little tooltip for you :
这是给你的一个小工具提示：
In this case #DCDCDC8Fthe DCis alpha= 220,
在这种情况下#DCDCDC8F的DC是alpha= 220，
Hex to Decimal [ DC ]:
十六进制转十进制 [ DC ]：
- first place D = 13 * 16^1 = 208
- second place C = 12 * 16^0 = 12
- sum = 12 + 208 = 220
- 第一名 D = 13 * 16^1 = 208
- 第二名 C = 12 * 16^0 = 12
- 总和 = 12 + 208 = 220
then 220 / 255 = 0.86 opacity.
那么 220 / 255 = 0.86 不透明度。
The bytes are stored in memory on a little-endian machine in the order AABBGGRR
字节以 AABBGGRR 的顺序存储在小端机器的内存中
Check this : http://www.statman.info/conversions/hexadecimal.html
