颜色数学：透明黑色覆盖对亮度的影响 [英] Colour maths: effect of transparent black overlay on lightness

问题描述

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

• 容器背景： $ color （任何颜色）
  
  
  < darken（$ color，20％）（20％darker）
  
  
  
  • 标题背景： rgba （0，0，0，0.2）（20％不透明度黑色重叠）
  
  
  
  

我以为我可以用 darken（$ color，36％）替换标题背景（80％亮度和次数; 80％亮度= 64％亮度），然而，这更暗。

显然，100％不透明度等于0％亮度，0％不透明度等于100％亮度，但在那之间尺度似乎是透明度的线性，而不是亮度（由于变暗基本上从亮度成分中减去）。

所以，我的问题是如何可以半透明的黑色覆盖层可以转化为同等的亮度降低？

这里是一个小例子，我的意思是： http://jsfiddle.net/R7aYP/2 - 我有兴趣找到一个公式来实现 .box.three '从 .box.two 的不透明度得到黑暗百分比。

编辑：

@cimmanon提到 mix 可以使用 mix（$ color，black，80％）创建相同的效果

编辑：

我仍然有兴趣知道这个混音和变暗/淡化之间是否有关系。意识到这实际上很微不足道， darken 函数只是减去绝对值，例如：

 code> darken（blue，20％）= hsl（hue（blue），saturation（blue），lightness（blue） -  20）
   
 
黑色混合是减少百分比，因此：
  mix ，black，80％）= darken（blue，lightness（blue）* 0.2）
  
 fiddle： http://jsfiddle.net/R7aYP/4/  
解决方案
您要使用的函数是 mix（）。因为你的黑色是80％透明（20％不透明），你需要调整混合物的重量，有利于第一种颜色。
  .foo {
 background：mix（blue，black，80％）; 
} 
  
 
I've been playing with SASS recently, and have found the darken function, which works by reducing the HSL "lightness" component of a colour by a given amount, to be quite useful.  At one point I ended up trying to convert from a semi-transparent black overlay to an equivalent darken application in the following context:


Container background: $color (any colour)

Content background: darken($color, 20%) (20% darker)

Heading background: rgba(0, 0, 0, 0.2) (20% opacity black overlay)




I had thought I could replace the heading background with darken($color, 36%) (80% lightness × 80% lightness = 64% lightness), however that is much darker.  The value that produces visually similar results is around 25%.

Obviously 100% opacity equates to 0% lightness, and 0% opacity equates to 100% lightness, but between there the scale seems to be linear for transparency and... not for lightness (due to darken basically subtracting from the lightness component).

So, my question is how can a translucent black overlay be converted to an equivalent reduction in lightness?  Is it even possible?

Here's a fiddle with an example of what I mean: http://jsfiddle.net/R7aYP/2 - I'm interested in finding a formula to work out .box.three's darkness percentage from .box.two's opacity.

Edit:

@cimmanon mentioned that the mix function can be used to create the same effect with mix($color, black, 80%) - I'm still interested to know if there's a relationship between this mixing and darken/lighten.

Edit:

I realised this is actually pretty trivial, the darken function simply subtracts the absolute value, e.g.:
darken(blue, 20%) = hsl(hue(blue), saturation(blue), lightness(blue) - 20)
Whereas a mix with black is a percentage reduction, so:
mix(blue, black, 80%) = darken(blue, lightness(blue) * 0.2)
And an obligatory fiddle: http://jsfiddle.net/R7aYP/4/
解决方案
The function you want to use instead is mix().  Since your black is 80% transparent (20% opaque), you'll need to adjust the weight of the mixture in favor of the first color.
.foo {
    background: mix(blue, black, 80%);
}


                        
这篇关于颜色数学：透明黑色覆盖对亮度的影响的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！