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

Question

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

说我有这个：

rgba(0,129,255,.4)

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

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

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

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

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

Answer 3

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