很多时候，我们的div的背景色可能需要从外部传回，这时我们的字体颜色就需要做动态匹配，当背景色较暗时，字体显示白色; 当背景色较明(淡)时，字体显示黑色。这样才能更好的对比显示文本内容，否则背景色和字体颜色相近时，就傻傻分不清啦。

原理：将颜色值按RGB处理，分别取出其中的R、G、B的值，然后分别乘以一定值，最后再除以1000，,得到新的数值，然后拿计算出的数值与125(这个值可以根据自己需求更改)进行比较，大于125时，我们认为当前颜色处于较暗，字体显示白色; 小于125时，我们认为当前颜色处于较明(淡)，字体显示黑色。

很多时候，我们拿到的颜色值是十六进制的颜色值，如：#ffffff。(注意：这里的十六进制颜色值必须是6位的，不能是简写十六进制颜色值，如#fff)首先，需要将其转化成rgb的值形式。

这里为了方便，我直接将其分解成r、g、b颜色值，并存放在一个数组中。

const rgb = [
      parseInt('0x' + hexColorValue.slice(1, 3)),
      parseInt('0x' + hexColorValue.slice(3, 5)),
      parseInt('0x' + hexColorValue.slice(5, 7))
    ];

然后对这个数组进行计算以得到它的数值。

const brightness = Math.round(((rgb[0] * 299) + (rgb[1] * 587) + (rgb[2] * 114)) / 1000);

最后，拿这个brightness和125作比较。

return (brightness > 125) ? 'black' : 'white';

这样就好了，这只是一种简单粗略的计算方式，并不一定适用于所有情况，仅供参考。

总体的方法结构是这样的：

// 根据背景色动态切换字体颜色(黑/白)
  getFontColorByBackgroundColor(hexColorValue: string) {
    if (!hexColorValue) {
      return 'black';
    }

    const rgb = [
      parseInt('0x' + hexColorValue.slice(1, 3)),
      parseInt('0x' + hexColorValue.slice(3, 5)),
      parseInt('0x' + hexColorValue.slice(5, 7))
    ];
    const brightness = Math.round(((rgb[0] * 299) + (rgb[1] * 587) + (rgb[2] * 114)) / 1000);
    return (brightness > 125) ? 'black' : 'white';
  }

如果想知道更多其他信息，有兴趣的朋友可以参考James Cazzetta在stack overflow上的这篇文章：https://stackoverflow.com/questions/11867545/change-text-color-based-on-brightness-of-the-covered-background-area