你在第二张图片中使用的色相 alpha 值并不代表 alpha 颜色合成公式，而是反映了
Porter Duff alpha composition 中定义的
Source Over，在此处
9.1.4. Source Over使用以下公式：
如果您想实现这种混合效果，而不是适当的色调混合，您可以使用以下JavaScript公式：
PDso = {
r: ((S.r * S.a) + (B.r * B.a) * (1 - S.a)) / aR,
g: ((S.g * S.a) + (B.g * B.a) * (1 - S.a)) / aR,
b: ((S.b * S.a) + (B.b * B.a) * (1 - S.a)) / aR,
};
带透明通道的色相混合模式
这是我在Photoshop中创建的使用alpha颜色合成公式的确切色相混合源覆盖背景的截图：
中间方格上的绿色高亮字母是正确的混合表示。这是使用新的CSS
mix-blend-mode将源颜色放在背景颜色内的CSS色调混合（运行代码片段）：
.blends div {
width:140px;
height:140px;
}
.source {
mix-blend-mode: hue;
}
.backdrop.alpha {
background-color: rgba(141, 214, 214, .6);
isolation: isolate;
}
.source.alpha {
background-color: rgba(255, 213, 0, .6);
}
<div id="main">
<div class="blends alpha">
<div class="backdrop alpha">
<div class="source alpha"></div>
</div>
</div>
</div>
如果您使用取色器，您将获得几乎相同的值（
211、214、140 <> 210、214、140）。这可能是由于略有不同的算法或不同的舍入方法，但这并不重要。事实上，这是混合带有色调混合模式的 alpha 颜色的正确结果。
因此，现在我们需要公式来应用于我们的色调混合模式的 alpha 颜色组合，以获得适当的颜色值。我进行了一些搜索，并在 Adobe
文档管理 - 便携式文档格式 - 第 1 部分：PDF 1.7 中找到了所有内容。我们可以在第
328页的
混合模式后找到
颜色组合公式：
11.3.6 Alpha 的解释
颜色合成公式
这是我得到的公式，可以更好地匹配带有alpha通道的Photoshop色相混合模式。我用JavaScript写成了以下形式：
function Union(ab, as) {
return as + ab * (1 - as);
}
function colourCompositingFormula(as, ab, ar, Cs, Cb, Bbs) {
return (1 - (as / ar)) * Cb + (as / ar) * Math.floor((1 - ab) * Cs + ab * Bbs);
}
var aR = Union(B.a, S.a);
var Ca = {
r: colourCompositingFormula(S.a, B.a, aR, S.r, B.r, C.r),
g: colourCompositingFormula(S.a, B.a, aR, S.g, B.g, C.g),
b: colourCompositingFormula(S.a, B.a, aR, S.b, B.b, C.b)
};
body {
padding:0;
margin:0;
}
iframe {
width: 100%;
height: 200px;
border:0;
padding:0;
margin:0;
}
<iframe src="https://zikro.gr/dbg/html/blending-modes/"></iframe>
我的测试示例可以在
这里找到。在
2.5带Alpha的（色调混合算法计算）中，您可以看到带透明度的最终色调混合模式结果。它的值与Photoshop结果略有不同，但我在Fireworks中混合源和背景颜色的色调得到了完全相同的结果（
202, 205, 118）。
所有应用程序都有自己略微不同的算法，也许我使用的公式比较旧，也许有最新版本。
