是否可以根据背景（任何颜色和颜色格式）设置文本颜色（白色或黑色）？

Question

我需要根据背景设置文本颜色（文本颜色应该是黑色或白色）。 我的应用程序中的背景可以有任何颜色和颜色格式。我一直在寻找几种方法，但对我来说，没有一种方法是完美的：

1. mix-blend-mode（在我看来是无法控制的，我没有想出解决方案，我的条件将在哪里实现）

2. filter() css（从我的角度来看，对文本来说效果不好，突出显示文本时我看到像素）

3. less函数对比（颜色：对比（@backgroundColor，#000，#fff，80％）;）（这可能是完美的解决方案，但我不知道如何更新@backgroundColor，由于某种原因less.modifyvars没有在我的角度应用程序中不起作用（未定义的情况较少））

4. js（我找不到将所有官方颜色格式转换为 RGB 的 Angular lib。我需要 RGB 来计算使用白色或黑色的颜色）

Answer 1

有一些函数可以为您提供颜色的亮度，例如

  isLight(color: string) { //<--color in the way '#RRGGBB
    if (rgb.length == 7) {
      const rgb = [
        parseInt(color.substring(1, 3), 16),
        parseInt(color.substring(3, 5), 16),
        parseInt(color.substring(5), 16),
      ];
      const luminance =
        (0.2126 * rgb[0]) / 255 +
        (0.7152 * rgb[1]) / 255 +
        (0.0722 * rgb[2]) / 255;
      return luminance > 0.5;
    }
    return false
  }

参见stackblitz

注意：前段时间我在另一个 stackblitz

中重新创建了 javascript 库颜色