css - 颜色数学 : effect of transparent black overlay on lightness

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.two 的不透明度计算出 .box.three 的暗度百分比。

编辑:

@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)

还有一个强制性的 fiddle :http://jsfiddle.net/R7aYP/4/

Answer 1

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

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