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

Posted 2023-02-23

【中文标题】将 8 位十六进制颜色转换为 rgba 颜色？

【英文标题】：Convert 8-digit hex colors to rgba colors?

【发布时间】：2015-05-19 22:40:29

【问题描述】：

我在这个主题上找到的所有内容都只是将十六进制转换为 rgb，然后添加 1 的 alpha。我也想从十六进制数字中获取预期的 alpha。

#949494E8 或 #DCDCDC8F 等颜色的 alpha 值显然不是 0 或 1。

【问题讨论】：

你打算如何转换这些？用手？使用预处理器？以编程方式，使用什么语言？

另外，您的语法似乎不正确。 8 位十六进制通常遵循 AARRGGBB (ARGB) 格式，即前两位数字属于 alpha 通道。看起来您正在使用 Alpha 通道的最后两位数字。

bricss.net/post/12423845540/…

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

@Terry：正如那篇文章所述，并非每个实现都使用相同的表示。我不认为有一个正确或不正确的通用符号 - 它完全取决于实现。有趣的是，CSS Color level 4 actually uses the RRGGBBAA format.

【参考方案1】：

我制作了一个快速的 JSfiddle 表单，它允许您将 8 位十六进制代码转换为 CSS rgba 值；)

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

基础相当简单——将您提供的字符串拆分为 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>

逻辑：

// 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 即可完成。

【讨论】：

我修好了，问题出在第34行，我从c.unshift(c.pop())改成了c.push(c.shift())。

@Noitidart 不敢相信它已经坏了这么久。感谢您修复它，更新它。

我们需要的英雄。

是的，我已经知道如何做到这一点，但要为我们其他人制作这样一个节省时间的好工具，需要一些因果报应。确实，英雄。

您好，我正在逐行查看您的脚本来学习。我一直在查看文档以了解 var c = hex.match(/.1,2/g); 的作用。特别是 '/.1,2/g' 参数。因此，据我所知，匹配方法是使用 RegExp() 对象将 #hex 输入元素的值字符串与 '.1,2/g' 进行匹配，但 到底是什么'.1,2/g'？有人可以向我解释这条线在做什么。谢谢。

【参考方案2】：

这里有一个小工具提示：

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

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

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

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

字节以 AABBGGRR 顺序存储在 little-endian 机器的内存中

检查这个：http://www.statman.info/conversions/hexadecimal.html

【讨论】：

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

什么数学让你得到 2 字符十六进制的 alpha 值？

你想要数学公式吗？？

我发现这......很乏味，但它有效。然后我假设我除以 255。palmantics.com/html/hexadecimal

我已经扩展了我的答案，以便更好地了解问题。