使用 javascript 合并颜色答案

【问题标题】：Merge colors using javascript使用 javascript 合并颜色
【发布时间】：2011-09-05 18:11:41
【问题描述】：

假设我有一些具有背景色和前景色的元素。
假设可以以不同的格式指定两种颜色（可以在样式属性中指定的任何颜色），例如 background = 'white' 或 'transparent', foreground = 'rgb(0, 0, 0)'。
使用纯javascript合并这些颜色以获得像rgb（128、128、128）这样的结果的最简单方法是什么？

谢谢。

【问题讨论】：

标签： javascript

【解决方案1】：

我相信将opacity CSS 属性设置为前面元素的一半 (0.5) 会让你到达那里。

或者，如果你使用 jQuery 并且你真的想把它放到 JavaScript 中，你可以使用 jQuery 的.css() 获得两种颜色，它返回类似rgb(0,0,0) 的东西，然后对每种基本颜色（红色、绿色, blue) 并使用相同的指令 (.css()) 将结果值设置为您需要的任何值。

有帮助吗？

【讨论】：

+1 - 您应该将两个不透明度都设置为 0.5，否则显示的颜色将比两者的实际合并更暗
同意，这比我的回答简单得多，应该适合您的目的。
@trey 我不同意（顺便说一句。感谢您的支持）。我做了一个基准测试，告诉我，如果我将第一个和第二个元素的不透明度设置为 0.5，它实际上更轻，但也比我们想要获得的颜色更轻（设置第一个元素的不透明度确实对我有用）。你有一些例子证明不是吗？如果你这样做，我会纠正我的答案。
.css() 结果可能返回字符串“透明”
根据我的图形经验，两种重叠颜色都设置为 50% 的不透明度，它们创建了一个具有 100% 不透明度的不同颜色部分，因此合并区域越饱和，距离越远实际的混合颜色，反之亦然

【解决方案2】：

只是因为我喜欢写复杂的脚本......

<span style="background-color:black; color:#fff";>Hi</span>

JS：

function getColorVals(color) {
    color = color.replace("rgb", "").replace("(", "").replace(")", "");
    return color.split(",");
}
var span = document.getElementsByTagName("span")[0];
var color1 = window.getComputedStyle(span).backgroundColor; //window.getComputedStyle ensures getting back rgb
var color2 = window.getComputedStyle(span).color;
var color1Vals = getColorVals(color1);
var color2Vals = getColorVals(color2);
var newColorVal = "rgb(";
for (i = 0; i < 3; i++) {
    newColorVal += Math.round((Math.abs(color1Vals[i] - color2Vals[i]) / 2));
    if(i<2) newColorVal += ",";
} 
newColorVal += ")";
alert(newColorVal);

...您也可以轻松地处理其中的不透明度。

编辑：

在颜色 val 计算中弹出 Math.round 以修复小数等。

【讨论】：

window.getComputedStyle(span).backgroundColor 可能会返回字符串“透明”
@Mykhaylo Adamovych 是的，我没有支持透明度/不透明度。您可以轻松捕获“透明”并将其替换为其他内容，或者在 rgba 而不是 rgb 中工作（在这种情况下，透明的 rgba 值将是“rgba(0,0,0,0)”跨度>

【解决方案3】：

您可能想查看rbgcolor.js。它“接受一个字符串并尝试从中找出有效的颜色”。也就是说，您可以简单地查看元素上的 CSS 颜色属性，通过这个 JS 输入它，然后获取 RGB 值。获得 RGB 值后，只需取每个通道的平均值即可创建新颜色。

如果你的元素的颜色是继承的，你可能需要做一些调整。例如，如果您的元素没有指定的颜色属性，请检查它的父元素，一直到 DOM。

【讨论】：