根据背景颜色的亮度动态改变颜色

时间:2016-01-18 18:07:44

标签: javascript

我正在使用color.js转换并使用颜色进行操作。我有几个要根据背景颜色动态改变的元素。因此,如果背景颜色较暗,则将文本设为白色。如果它很亮,那么将文字设为黑色。

这很简单:

myElem.color = color.RGBLuminance > 0.22 ? 'black' : 'white';

但我也会有阿尔法。如何测试alpha和背景的亮度?

JSFiddle

var myColor = new Colors();

var div = document.getElementById('div'),
  span = document.getElementById('span'),
  rgbColor = myColor.colors.RND.rgb;

myColor.setColor({
  r: 0,
  g: 0,
  b: 0
}, 'rgb');
/*myColor.setColor({
    r: 100,
    g: 200,
    b: 255
}, 'rgb');*/

div.style.backgroundColor = rgba(rgbColor.r, rgbColor.g, rgbColor.b, 0.3);

span.style.color = myColor.colors.RGBLuminance > 0.22 ? 'black' : 'white';



function rgba(r, g, b, a) {
  return "rgba(" + r + "," + g + "," + b + "," + a + ")";
}
#div {
  width: 200px;
  height: 200px;
}
<div id="div">
  <span id="span">hello</span>
</div>
<script src="https://rawgit.com/PitPik/colorPicker/master/colors.js"></script>

2 个答案:

答案 0 :(得分:0)

您可以使用

检索颜色的Alpha值
myColor.colors.alpha

所以你可以使用类似于:

的支票
span.style.color = myColor.colors.RGBLuminance > 0.22 || myColor.colors.alpha < 0.5 ? 'black' : 'white';

您可能不得不玩这些条件(或添加更多案例)来获得您想要的行为。

答案 1 :(得分:0)

color.js非常复杂,在后台处理很多事情。所以,它实际上也照顾你的问题。 color.js在内部使用3层:前景或你刚刚选择的颜色,然后是背景颜色,即保存的颜色,然后是自定义(实心,所以没有alpha)背景颜色(color.js可以&#39; t猜测所以你必须将它添加到选项中):

var myColor = new Colors({
        customBG: '#FFF' // e.g. the background color of your page
    });

然后你(几乎)正确设置颜色:

myColor.setColor({ // 
    r: 0,
    g: 0,
    b: 0
}, 'rgb', 0.3); // but then with the correct alpha

...而color.js将提供一个变量colors.rgbaMixBGMixCustom.luminance,它可以提供您需要的值:

div.style.backgroundColor = myColor.toString(); // new method in Color()
span.style.color = myColor.colors.rgbaMixBGMixCustom.luminance  > 0.22 ?
    'black' : 'white';

rgbaMixBGMixCustom表示已将rgba颜色混合(叠加)与BG保存的背景颜色,我们可以忽略它,因为它设置为rgba(0, 0, 0, 0)和我们在开头设置的自定义纯色背景色Custom(如果需要,还有一个方法setCustomBackground()可以稍后重置)

rgbaMixBGMixCustom还包含有关所有3个图层的最终颜色的信息。