根据背景颜色的暗度或亮度设置文本颜色

#demo-element {
  background: @theme-color;
  color: contrast(@theme-color, black, white, 50%);
}

@theme-color: red;

如果 background-color 是暗的,上面的例子将元素的文本颜色设置为 white,反之亦然。这是使用 contrast() 颜色操作功能实现的。

对比度函数接受四个参数,其中第一个参数是应该提供输出的参考颜色。参考颜色较浅时应输出的深色和参考颜色较暗时应输出的光。阈值是一个百分比,它定义何时将颜色视为浅色和何时为黑色。

可以在此处找到此示例的演示。