假设我有一个背景颜色，上面有一条“丝带”，上面是另一种纯色。现在，我希望色带部分透明，让一些细节融合在一起，但仍然保持色带在背景上的“相同颜色”。
有没有办法（轻松）确定，对于给定的不透明度/alpha < 100% 的色带颜色，它应该必须与其颜色相同且背景不透明度为 100% 的 RGB 值？
这是一张图片。背景是rgb(72, 28, 97)，丝带rgb(45, 34, 70)。我想要一个rgba(r, g, b, a)丝带，使它看起来与这种纯色相同。
问问题
36724 次
7 回答
136
颜色混合只是每个通道的线性插值，对吗？所以数学很简单。如果 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 颜色（无限，在浮点空间中）可以满足要求。所以你必须选择你想要的条的颜色或不透明度级别，并找出另一个的值。
根据 Alpha 选择颜色
如果您知道 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 倍。
根据颜色选择 Alpha
如果您知道 RGB3（最终所需的颜色）、RGB2（背景颜色）和 RGB1（您想要改变不透明度的颜色），并且您只是在寻找 A1，那么我们可以重新排列因此方程：
a1 = (r3-r2) / (r1-r2)
a1 = (g3-g2) / (g1-g2)
a1 = (b3-b2) / (b1-b2)
如果这些给出不同的值，那么你不能让它完全匹配，但你可以平均 alpha 以尽可能接近。例如，世界上没有不透明度可以让您将绿色置于红色之上以获得蓝色。
于 2012-09-01T14:39:37.847 回答
12
我使用 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 所述），这意味着仅支持适度的透明度。看看你如何处理它。
于 2013-12-23T17:02:38.347 回答
8
感谢Phrogz和ephemer的出色回答，这里有一个 SASS 函数，可以自动计算最佳等效 RGBA 颜色。
您使用所需颜色和现有背景调用它，它将计算最佳（意味着最透明）等效 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，直到达到所需的精度。
于 2016-07-08T11:13:37.017 回答
6
来自@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，这将找到 、 和 required 的r1对应g1值b1。例如，选择 1 的 alpha 告诉您需要 RGB1 = RGB3，但选择 0 的 alpha 没有解决方案（显然）。
于 2012-09-01T14:46:29.610 回答
1
到目前为止我发现的最实用的解决方案：只需使用颜色选择器工具测量生成的颜色，然后使用测量的颜色进行叠加。这种方法提供了完美的颜色匹配。
我尝试过使用不同的 mixin，但由于舍入误差，我仍然能够用肉眼看到差异
于 2020-09-25T15:44:17.627 回答
0
要扩展@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);
}
于 2019-06-06T00:02:43.000 回答
0
我写了一个工具，我可以从 JSS 中使用它来帮助我使颜色透明。它使用来自 material-ui 的实用方法，可以在此处找到。
这是我的实用程序类的代码（在 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);
};于 2021-01-28T21:00:57.923 回答