文本始终在背景上可见

Question

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

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

Answer 1

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

作为参考，Lightness值的计算方法为：

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

其中M是最大值（R，G，B），M是最小值（R、G，B。

为了对称起见，我建议阈值为127.5（255的一半），但实际上你应该四处看看它是否好看。