文本始终在背景上可见

时间:2014-11-10 15:35:02

标签: javascript

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

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

1 个答案:

答案 0 :(得分:4)

那么,您可以将RGB转换为HSL(色调,饱和度,亮度),然后如果亮度高于阈值则选择黑色,如果低于阈值则选择白色。

作为参考,亮度值使用以下公式计算:

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

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

为了对称起见,我建议阈值为127.5(一半255),但实际上你应该玩,看看它是否看起来不错。

相关问题