Question

我正在使用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>

Answer 1

您可以使用

检索颜色的Alpha值

myColor.colors.alpha

所以你可以使用类似于：

的支票

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

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

Answer 2

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个图层的最终颜色的信息。

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

JSFiddle

2 个答案: