颜色数学：透明黑色覆盖对亮度的影响

Question

我最近一直在玩SASS，发现darken 函数非常有用，它通过将颜色的HSL“亮度”分量减少给定量来工作。有一次，我最终尝试在以下上下文中将半透明黑色覆盖转换为等效的darken 应用程序：

• 容器背景：$color（任何颜色）
  • 内容背景：darken($color, 20%)（暗 20%）
    • 标题背景：rgba(0, 0, 0, 0.2)（20% 不透明度黑色覆盖）

我原以为我可以用darken($color, 36%) 替换标题背景（80% 亮度 × 80% 亮度 = 64% 亮度），但那要暗得多。产生视觉上相似结果的值约为 25%。

显然 100% 的不透明度等于 0% 的亮度，0% 的不透明度等于 100% 的亮度，但在这之间，透明度的比例似乎是线性的......而不是亮度（由于变暗基本上从亮度中减去组件）。

那么，我的问题是如何将半透明的黑色叠加层转换为等效的亮度降低？有没有可能？

这里有一个例子来说明我的意思：http://jsfiddle.net/R7aYP/2 - 我有兴趣找到一个公式来计算 .box.three 的暗度百分比与 .box.two 的不透明度。

编辑：

@cimmanon 提到 mix 函数可用于创建与 mix($color, black, 80%) 相同的效果 - 我仍然想知道这种混合和变暗/变亮之间是否存在关系。

编辑：

我意识到这其实很简单，darken 函数只是简单地减去绝对值，例如：

darken(blue, 20%) = hsl(hue(blue), saturation(blue), lightness(blue) - 20)

而与黑色混合是减少百分比，所以：

mix(blue, black, 80%) = darken(blue, lightness(blue) * 0.2)

还有一个必备的小提琴：http://jsfiddle.net/R7aYP/4/

Answer 1

您要改用的函数是mix()。由于您的黑色是 80% 透明（20% 不透明），因此您需要调整混合物的重量以支持第一种颜色。

.foo {
    background: mix(blue, black, 80%);
}