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

Question

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

说我有这个:

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