将 RGBA 转换为 HEX

Posted 2023-02-23

【中文标题】将 RGBA 转换为 HEX

【英文标题】：Convert RGBA to HEX

【发布时间】：2014-03-01 19:34:37

【问题描述】：

给定一个 css 颜色值，例如：

 rgba(0, 0, 0, 0.86)

如何将其转换为考虑 alpha 分量的 RGB 十六进制值，假设背景为白色？

【问题讨论】：

RGBA 也许，RGB 不能考虑 alpha，除非您同意某种类似隐写术的技术将数据插入其中（并且您需要有位空间才能做到这一点）

不，我是说 RGB。基本上，在渲染页面、制作屏幕截图和使用颜色选择器从分配给定 rgba css 颜色的区域中获取十六进制颜色值时，您会得到什么。

哦，现在我明白你要做什么了，抱歉。

【参考方案1】：

由于 alpha 值同时衰减背景颜色和颜色值，这样的事情可以解决问题：

function rgba2rgb(RGB_background, RGBA_color)

    var alpha = RGBA_color.a;

    return new Color(
        (1 - alpha) * RGB_background.r + alpha * RGBA_color.r,
        (1 - alpha) * RGB_background.g + alpha * RGBA_color.g,
        (1 - alpha) * RGB_background.b + alpha * RGBA_color.b
    );

（以交互方式尝试：https://marcodiiga.github.io/rgba-to-rgb-conversion）

【讨论】：

这看起来很有希望。缺少将 RGB 转换为 HEX，但这是简单的部分。

链接不存在了！

@gaitat 感谢您的报告。通过我的博客上的帖子修复它。

非常酷。能否接受输入的颜色以及当前的颜色选择器？

@josinalvo 完成，幸运的是我使用的颜色选择器本身支持它

【参考方案2】：

假设每个通道的值为 0...1。 并假设问题中方法/函数调用中的缩写与参数相对应，以下应该有效。

A = 255 * 0.86
R = 255 * 0
G = 255 * 0
B = 255 * 0

请注意，您可能需要在此处更改它的四舍五入方式，因为它可能会导致颜色不准确。

此时，这些值实际上仍然是浮点值，但将它们转换为字节或字符（取决于语言），理论上应该可行。

var _A = (byte)219.3
var _R = (byte)0
var _G = (byte)0
var _B = (byte)0

现在您要做的就是将它们分别转换为十六进制字符串，然后将它们连接起来（ARGB）并在前面放一个漂亮的小哈希标签（#）

在 C# 中，您可以执行以下操作：

var hexString = string.Format("#0:X21:X22:X23:X2", _A, _R, _G, _B);

产生类似的最终结果：

#DB000000

【讨论】：

那仍然会给我 RGBA，只是另一种格式。我需要的是 RGB，并将 alpha 应用于各个 RGB 值。

【参考方案3】：

您可以使用.toString(16) 单独转换红色、绿色和蓝色，然后将结果合并到一个案例中，如果您只想将 rgb 转换为十六进制...因为您正在搜索将 rgba 转换为十六进制，我想它最好将 rgba 转换为 rgb，然后再转换为十六进制，就像我在下面的 Fiddle 中所做的那样，这也将考虑 parent div 的 background-color。

【参考方案4】：

您拥有的 rgba 值是： rgba(0, 0, 0, 0.86)

前 0 代表 RED 第二个 0 代表 绿色 第三个 0 代表 BLUE 最后一个数字 0.86 代表 alpha/opacity

以下是 rgb 到 hex 转换器的一些链接：

http://www.javascripter.net/faq/rgbtohex.htmhttp://www.rgbtohex.net/@ 987654323@

与您一起使用数字 0、0、0。十六进制代码将是

#000000

以下是低不透明度白色背景的代码

HTML

<div id="parentDiv">
    <div id="childDiv">

    </div>
</div>

CSS

#parentDiv

height:100px;  /* The property of Child is Inherit */
width:100px;  /* The property of Child is Inherit*/
background-color:#ffffff;


#childDiv

height:inherit;
width:inherit;
background-color:#000000;
opacity:0.86;
filter:alpha(opacity="86");

现在父Div是背景

#ffffff (White color)

【讨论】：

你提到的在线转换器都不支持 alpha。我发现的那个似乎不起作用。