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

Posted 2023-02-23

【中文标题】如何将 rgba 转换为透明度调整的十六进制？

【英文标题】：How to convert rgba to a transparency-adjusted-hex?

【发布时间】：2013-03-31 16:39:42

【问题描述】：

我想知道如何将 rgba 转换为 hex 以将可见的 rgba 颜色（包括透明度）转换为十六进制值。

假设我有这个：

rgba(0,129,255,.4)

这是一种“浅蓝色”...

我想知道是否有办法在十六进制中获得相同的浅蓝色“可见”颜色，所以我不想要转换后的#0081ff，而是接近屏幕上可见颜色的东西。

问题：

【问题讨论】：

您是否尝试过使用该 alpha 百分比来更改其余值？我假设你想要这个 rgba 值在白色背景下，所以使用百分比来均衡到“更白”的值。示例：0,129,255,.4 == 102, 231, 255 ???只是猜测

【参考方案1】：

这取决于应用透明色的背景。 但是如果您知道背景的颜色（例如白色），您可以计算出应用到特定背景的 RGBA 颜色所产生的 RGB 颜色。

这只是颜色和背景之间的加权平均值，权重是 alpha 通道（从 0 到 1）：

Color = Color * alpha + Background * (1 - alpha);

为你的透明浅蓝色rgba(0,129,255,.4) 对白rgb(255,255,255)：

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

哪个给出rgb(153,205,255) 或#99CDFF

【讨论】：

谢谢你 - 真的有很多帮助！

【参考方案2】：

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

【讨论】：

我尝试了一堆在线转换工具，但似乎没有一个能正确转换 alpha 通道。他们不理解'rgba（0,0,0,0.6）'并不断返回#000000，尽管它是全黑的，但他们正在绘制的画布是灰色的。但是您的 hexify 函数正确地将其转换为 #666666 并将 rgba(0,0,0,0.2) 转换为 #cccccc 谢谢！

喜欢你的回答，它对我有用

【参考方案3】：

您可以使用 chrome 的吸管工具为自己节省一些时间和计算。我通常做的是为 rgba 设置一个大 div 的背景颜色，然后在 CSS 中添加一个颜色属性到一些随机的十六进制值。然后，您只需单击该随机十六进制值旁边的彩色方块并将鼠标悬停在页面上具有背景颜色的 div 上，然后使用吸管选择背景颜色。如果它以 rgba 形式返回，您可以通过再次单击该彩色方块并单击右侧的向上和向下箭头来循环显示 hsla、rgba 和十六进制。