Question

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

说我有这个：

rgba(0,129,255,.4)

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

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

问题：
如何将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

＆＃13;

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

＆＃13;

Answer 3

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

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

3 个答案: