将8位十六进制颜色转换为rgba颜色？

Question

将8位十六进制颜色转换为rgba颜色？

csscolorshexrgba

24

关于这个主题我找到的所有资料都只是将十六进制转换为RGB，然后添加一个alpha值为1。我想从十六进制数字中获取预期的alpha值。

像#949494E8或#DCDCDC8F这样的颜色显然具有不为0或1的alpha值。

- Steve

1

你打算如何进行转换？手动完成？使用预处理器？还是通过编程以什么语言实现？ - BoltClock

1

此外，您的语法似乎不正确。8位十六进制通常遵循AARRGGBB（ARGB）格式，即前两个数字属于alpha通道。看起来您正在使用最后两个数字作为alpha通道。 - Terry

http://bricss.net/post/12423845540/working-with-8-digit-hex-colors-argb-in-internet - Paulie_D

这些是来自Textmate主题的十六进制颜色。我试图将它们转换为RGBA，以便可以更新并将主题移植到LESS。 - Steve

1

@Terry：正如那篇文章所述，不是每个实现都使用相同的表示方法。我认为没有通用的符号是正确或错误的 - 它完全取决于实现。有趣的是，CSS颜色级别4实际上使用RRGGBBAA格式。 - BoltClock

2个回答

5

这里有一个小提示：

在这种情况下，#DCDCDC8F中的DC是alpha=220。

十六进制转十进制[DC]：

第一位D = 13 * 16^1 = 208
第二位C = 12 * 16^0 = 12
总和 = 12 + 208 = 220

然后，220/255 = 0.86不透明度。

enter image description here

字节以AABBGGRR的顺序存储在小端机器的内存中。

请查看：http://www.statman.info/conversions/hexadecimal.html

- Piotr Dajlido

我相信这些数字（来自Textmate主题）是RRGGBBAA格式的。如果我使用“选择颜色”#F5AA00，我会得到正确的橙色rgba（245，170，0，1.0）。但我需要原始值F5AA0091中的alpha值为91。 - Steve

什么数学可以为2个字符的十六进制获取alpha值？ - Steve

你需要这个数学公式吗？ - Piotr Dajlido

1

我发现这个...很繁琐，但它能工作。然后我假设我要除以255。http://www.palmantics.com/html/hexadecimal/ - Steve

我稍微扩展了我的答案，以提供更好的问题洞察。 - Piotr Dajlido

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Terry · Accepted Answer

我制作了一个快速的JSfiddle表单，可以将8位十六进制代码转换为CSS rgba值;)

https://jsfiddle.net/teddyrised/g02s07n4/embedded/result/

其基础相当简单--将提供的字符串分成两位一组，并将其转换为alpha通道的百分比比率以及RGB通道的十进制数。 HTML标记如下：

<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>

逻辑:

// 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));
});

转换的要点如下：

将十六进制的RGB通道值转换成十进制值，可以使用parseInt(hexValue, 16)。
将十六进制的Alpha通道值转换成百分比比例。只需将其转换为十进制值（参见上述要点），并计算其相对于255的相对值即可。