javascript - 文本始终在背景上可见

Question

我的元素有一个用户可配置的背景颜色，这意味着它上面的文本并不总是可见的。我的第一个想法是根据背景颜色反转前景色，但有时这会导致一些非常可怕的颜色。

有没有一种简单的方法可以根据背景颜色简单地在黑色和白色前景色之间切换？

Answer 1

好吧，您可以将 RGB 转换为 HSL(色相、饱和度、亮度)，然后如果亮度高于阈值则选择黑色，如果低于阈值则选择白色。

作为引用，亮度值的计算公式为:

L (lightness) = (M + m) / 2

其中 M 是 max(R, G, B)，m 是 min(R, G, B)。

为了对称起见，我建议将阈值设置为 127.5(255 的一半)，但实际上您应该试一试，看看它看起来是否不错。