假设我有一个背景颜色，上面有一条“丝带”，上面是另一种纯色。现在，我希望色带部分透明以让一些细节融合在一起，但仍保持色带在背景上的“相同颜色”。
有没有办法（轻松）确定，对于给定的不透明度/alpha
这是一张照片。背景是rgb(72, 28, 97)，丝带rgb(45, 34, 70)。我想要一个rgba(r, g, b, a) 用于丝带，使它看起来与这种纯色相同。
【问题讨论】：
颜色混合只是每个通道的线性插值，对吗？所以数学很简单。如果 RGBA1 超过 RGB2，则有效的视觉结果 RGB3 将是：
r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1
…alpha 通道从 0.0 到 1.0。
完整性检查：如果 alpha 为 0，RGB3 是否与 RGB2 相同？是的。如果 alpha 为 1，RGB3 是否与 RGB1 相同？是的。
如果只锁定背景颜色和最终颜色，则有大量的 RGBA 颜色（无限，在浮点空间中）可以满足要求。所以你必须选择你想要的条的颜色或不透明度级别，然后找出另一个的值。
如果您知道 RGB3（最终所需的颜色）、RGB2（背景颜色）和 A1（您想要多少不透明度），而您只是在寻找 RGB1，那么我们可以重新排列方程式：
r1 = (r3 - r2 + r2*a1)/a1
g1 = (g3 - g2 + g2*a1)/a1
b1 = (b3 - b2 + b2*a1)/a1
有些颜色组合在理论上是可行的，但在标准 RGBA 范围内是不可能的。例如，如果背景是纯黑色，所需的感知颜色是纯白色，所需的 alpha 为 1%，那么您需要：
r1 = g1 = b1 = 255/0.01 = 25500
...一种超亮的白色，比任何现有产品都要亮 100 倍。
如果您知道 RGB3（最终所需的颜色）、RGB2（背景颜色）和 RGB1（您想要改变其不透明度的颜色），并且您只是在寻找 A1，那么我们可以重新- 这样排列方程：
a1 = (r3-r2) / (r1-r2)
a1 = (g3-g2) / (g1-g2)
a1 = (b3-b2) / (b1-b2)
如果这些给出不同的值，那么你不能让它完全匹配，但你可以平均 alpha 以尽可能接近。例如，世界上没有不透明的东西可以让你把绿色放在红色上得到蓝色。
【讨论】：
r1、g1 和 b1 不也是未知数吗？
我使用 Phrogz 的回答做了一个 LESS 混合。你输入：
代码如下：
.bg_alpha_calc (@desired_colour, @desired_alpha, @background_colour: white) {
@r3: red(@desired_colour);
@g3: green(@desired_colour);
@b3: blue(@desired_colour);
@r2: red(@background_colour);
@g2: green(@background_colour);
@b2: blue(@background_colour);
// r1 = (r3 - r2 + r2 * a1) / a1
@r1: ( @r3 - @r2 + (@r2 * @desired_alpha) ) / @desired_alpha;
@g1: ( @g3 - @g2 + (@g2 * @desired_alpha) ) / @desired_alpha;
@b1: ( @b3 - @b2 + (@b2 * @desired_alpha) ) / @desired_alpha;
background-color: @desired_colour;
background-color: rgba(@r1, @g1, @b1, @desired_alpha);
}
这样使用：
@mycolour: #abc;
@another_colour: blue;
.box_overlay {
// example:
.bg_alpha_calc (@mycolour, 0.97, @another_colour);
// or (for white bg) just:
.bg_alpha_calc (@mycolour, 0.97);
}
显然不适用于不可能的组合（如 Phrogz 所述），这意味着仅支持适度的透明度。看看你如何使用它。
【讨论】：
感谢 Phrogz 和 ephemer 的出色回答，这是一个 自动 计算最佳等效 RGBA 颜色的 SASS 函数。
您使用所需颜色和现有背景调用它，它会计算最佳（即最透明）等效 RGBA 颜色，在每个 RGB 分量的 ±1/256 范围内给出所需结果（由于舍入误差）：
@function alphaize($desired-color, $background-color) {
$r1: red($background-color);
$g1: green($background-color);
$b1: blue($background-color);
$r2: red($desired-color);
$g2: green($desired-color);
$b2: blue($desired-color);
$alpha: 0;
$r: -1;
$g: -1;
$b: -1;
@while $alpha < 1 and ($r < 0 or $g < 0 or $b < 0
or $r > 255 or $g > 255 or $b > 255) {
$alpha: $alpha + 1/256;
$inv: 1 / $alpha;
$r: $r2 * $inv + $r1 * (1 - $inv);
$g: $g2 * $inv + $g1 * (1 - $inv);
$b: $b2 * $inv + $b1 * (1 - $inv);
}
@return rgba($r, $g, $b, $alpha);
}
我刚刚针对多种组合（所有 Bootswatch 主题）对它进行了测试，它对暗对光和亮对暗结果都很有效。
PS：如果您需要的结果颜色精度优于 ±1/256，则需要知道在混合 rgba 颜色时浏览器应用哪种舍入算法（我不知道这是否标准化）和为现有的@while添加一个合适的条件，使其不断增加$alpha，直到达到所需的精度。
【讨论】：
transparentify(): stylus-lang.com/docs/bifs.html#transparentifytop-bottom-alpha ... 我在手动将其移植到 Stylus 后发现...
来自@Phrogz 的回答：
r3 = r2 + (r1-r2)*a1
g3 = g2 + (g1-g2)*a1
b3 = b2 + (b1-b2)*a1
所以：
r3 - r2 = (r1-r2)*a1
g3 - g2 = (g1-g2)*a1
b3 - b2 = (b1-b2)*a1
所以：
r1 = (r3 - r2) / a1 + r2
g1 = (g3 - g2) / a1 + g2
b1 = (b3 - b2) / a1 + b2
注意您可以选择a1 的任何值，这将找到r1、g1 和b1 的对应值。例如，选择 1 的 alpha 告诉您需要 RGB1 = RGB3，但选择 0 的 alpha 没有解决方案（显然）。
【讨论】：
到目前为止我发现的最实用的解决方案：只需使用颜色选择器工具测量生成的颜色，然后使用测量的颜色进行叠加。这种方法提供了完美的颜色匹配。
我尝试过使用不同的 mixin，但由于舍入误差，我仍然能够用肉眼看到差异
【讨论】：
扩展@Tobia 的答案并允许指定不透明度更像透明化：
@function rgbaMorph($desired-color, $background-color: rgb(255,255,255), $desired-alpha: 0) {
$r1: red($desired-color);
$g1: green($desired-color);
$b1: blue($desired-color);
$r2: red($background-color);
$g2: green($background-color);
$b2: blue($background-color);
$r: -1;
$g: -1;
$b: -1;
@if ($desired-alpha != 0) {
$r: ( $r1 - $r2 + ($r2 * $desired-alpha) ) / $desired-alpha;
$g: ( $g1 - $g2 + ($g2 * $desired-alpha) ) / $desired-alpha;
$b: ( $b1 - $b2 + ($b2 * $desired-alpha) ) / $desired-alpha;
}
@if (($desired-alpha == 0) or ($r < 0 or $g < 0 or $b < 0
or $r > 255 or $g > 255 or $b > 255)) {
//if alpha not attainable, this will find lowest alpha that is
$alpha: $desired-alpha;
@while $alpha < 1 and ($r < 0 or $g < 0 or $b < 0
or $r > 255 or $g > 255 or $b > 255) {
$alpha: $alpha + 1/256;
$inv: 1 / $alpha;
$r: $r1 * $inv + $r2 * (1 - $inv);
$g: $g1 * $inv + $g2 * (1 - $inv);
$b: $b1 * $inv + $b2 * (1 - $inv);
}
@debug "Color not attainable at opacity using alpha: " $alpha " instead of: " $desired-alpha;
$desired-alpha: $alpha;
}
@return rgba($r, $g, $b, $desired-alpha);
}
【讨论】：
我写了一个工具，我可以从 JSS 中使用它来帮助我使颜色透明。它使用来自 material-ui 的实用方法，可以在 here 找到。
这是我的实用程序类的代码（在 Typescript 中）。请注意，在保持颜色与目标颜色相同的同时，无法使某些颜色透明。
请原谅我缺少 codepen 或可运行代码。我希望有人能找到它并从中得到一些用处！
import {
decomposeColor,
recomposeColor,
ColorObject,
} from '@material-ui/core/styles/colorManipulator';
/**
* Take a non transparent color and create a transparent color that looks identical visually.
* Using formula from this SO post https://stackoverflow.com/questions/12228548/finding-equivalent-color-with-opacity
* Assuming a white background
* @param origColor The color you want to match.
* @param value Transparency value between 0 and 1. Cannot be too low because it is mathematically not possible (usually <0.2 but depends on the color)
*/
export const makeTransparent = (origColor: string, value: number): string => {
const origColorObj: ColorObject = decomposeColor(origColor);
if (value >= 1 || value <= 0)
throw new Error('makeTransparent: invalid value provided');
if (origColorObj.values[3] != null && origColorObj.values[3] !== 1)
throw new Error('makeTransparent: origColor cannot be transparent');
const newColorObj: ColorObject = {
type: 'rgba',
values: [0, 0, 0, value],
};
for (let i = 0; i < 3; i++) {
const rgbNum: number = (255 * value + origColorObj.values[i] - 255) / value;
if (rgbNum < 0 || rgbNum > 255)
throw new Error('makeTransparent: Transparency value too low');
newColorObj.values[i] = rgbNum;
}
return recomposeColor(newColorObj);
};【讨论】：