在JS中，找到白色背景上不透明度为0.5的颜色？

Question

1. 我有一个初始颜色：

   #3F92DF

   （蓝色）。

2. 我可以降低其不透明度，从而产生更浅的蓝色（如果在白色背景上）：

   rgba(63, 146, 223, 0.5)

   。

3. 这种白色背景上不透明的颜色，如果我选择它的颜色，我会得到：

   #A5CAEF

   。

问题是：在JS中如何从

#A5CAEF

（1）中找到

#3F92DF

（3）？ IE。找到颜色好像在白色背景上具有 0.5 不透明度？

我尝试使用初始颜色的 RGB 值（将它们增加到 255），但我无法获得预期的颜色（我得到的颜色更像绿松石色）。

var initialColor = "#3F92DF";
var colorWithOpacity = "rgba(63, 146, 223, 0.5)";
var colorWithoutOpacity = "#A5CAEF";

document.getElementById("d1").style.backgroundColor = initialColor;
document.getElementById("d2").style.backgroundColor = colorWithOpacity;
document.getElementById("d3").style.backgroundColor = colorWithoutOpacity;

div {
  width: 100px;
  height: 100px;
  border: solid 1px white;
  float: left;
}

<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>

Answer 1

在这种情况下，您需要使用标准公式使用颜色混合：

newComponent = floor(oldComponent x alpha + backgroundComponent x (1 - alpha))

结果值通常为 floored（小数截止）。

但是，话虽这么说，实际值取决于几件事：其中之一当然是较小的舍入误差，但也包括系统以及浏览器如何处理 gamma（关于实际伽玛值的系统）。

一般来说，混合应始终在线性颜色空间中进行（即不应用伽玛）。由于这些原因，实际结果值可能与您在系统和所使用的浏览器中获得的值不同。

如果右下角的结果颜色与中间颜色不同，则表明浏览器无法正确处理伽玛，您必须手动解码和重新编码伽玛（此处未显示），例如使用 sRGB 进行近似，如下所示我们必须猜测系统的实际伽玛值。该过程将是：使用逆伽玛解码，混合，使用伽玛重新编码。

无论如何，为了简单起见，您可以忽略上面有关伽马的部分。应用上面的公式，不进行伽玛处理，这在大多数情况下在较新的浏览器中会受到影响，我们会得到：

var initialColor = "#3F92DF";
var colorWithOpacity = "rgba(63, 146, 223, 0.5)";

// mix with white background:
var a = 0.5;
var r = Math.floor(0x3F * a + 0xff * (1 - a));
var g = Math.floor(0x92 * a + 0xff * (1 - a));
var b = Math.floor(0xDF * a + 0xff * (1 - a));

var colorWithoutOpacity = "#" + (r<<16 | g<<8 | b).toString(16);

// show result
document.getElementById("d1").style.backgroundColor = initialColor;
document.getElementById("d2").style.backgroundColor = colorWithOpacity;
document.getElementById("d3").style.backgroundColor = colorWithoutOpacity;

div {
  width: 100px;
  height: 100px;
  border: solid 1px white;
  float: left;
}

<div id="d1"></div><div id="d2"></div><div id="d3"></div>

Answer 2

您可以使用新的 css 功能来做到这一点。

color-mix('in xyz', #3F92DF, #fff)

https://developer.chrome.com/docs/css-ui/css-color-mix?hl=tr