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

Question

我想知道是否有工具将rgba转换为hex，它可以将包括透明度在内的可见rgba颜色转换为十六进制值。

说我有这个：

rgba(0,129,255,.4)

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

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

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

Answer 1

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

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

Color = Color * alpha + Bkg * (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);