如何将RGBA转换为透明度调整后的十六进制代码？

Question

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

比如我有这个：

rgba(0,129,255,.4)

这种颜色有点像 "淡蓝色"...

我想知道是否有一种方法可以获得与屏幕上可见颜色相似的十六进制轻蓝色。我不想要转换后的#0081ff，而是想要接近屏幕上可见颜色的东西。

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

- frequent

---

你尝试过使用 alpha 百分比来改变其他值吗？我猜你想要在白色背景下使用 rgba 值，所以使用百分比将其均衡到更“白”的值。例如：0,129,255,.4 == 102, 231, 255 ??? 只是一个猜测。 - jakobhans

Answer 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

- zakinster

---

谢谢这个 - 真的帮了很多！ - Bryan Rayner

@zakinster 有没有任何工具可以调整背景颜色？ - Sudhir N

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

- David Rosson

---

我尝试了许多在线转换工具，但似乎没有一个能够正确转换 alpha 通道。 它们不理解 'rgba(0,0,0,0.6)'，并且始终返回 #000000，尽管那是完全黑色的，但它们所绘制的画布却是灰色的。但是你的 hexify 函数可以正确将其转换为 #666666， 并将 rgba(0,0,0,0.2) 转换为 #cccccc。谢谢！ - Michael Kubler

喜欢你的回答，它对我有用。 - Mehul Kothari

这个完美地运作了！ - undefined

Answer 3

您可以使用Chrome浏览器的吸管工具来节省时间和计算。我通常会将一个大div的背景颜色设置为我所需的rgba值，然后在CSS中添加一个随机的十六进制值的颜色属性。接下来，您只需要点击该随机十六进制值旁边的彩色方块，并悬停在页面上具有背景颜色的div上，使用眼滴工具选择背景颜色即可。如果返回的是rgba，您可以通过再次点击那个彩色方块并单击右侧的上下箭头来循环浏览hsla、rgba和hex。

- warrendugan