JavaScript 根据颜色获取黑色或白色文本

有时候我们需要将文本呈现在合适的背景颜色之上，这时候我们需要根据背景颜色来决定文本的颜色。常见的情况是，如果背景颜色比较浅，我们需要使用黑色文本，如果背景颜色比较深，我们需要使用白色文本，这样才能保证文本与背景之间的对比度，方便用户看到页面上的内容。

在 JavaScript 中，我们可以使用以下代码来根据背景颜色来决定文本的颜色：

function getTextColorByBackgroundColor(backgroundColor) {
  // 将 hex 格式颜色转换为 rgb 格式
  let rgbColor = hexToRgb(backgroundColor);
  // 计算颜色亮度
  let brightness = Math.round(((rgbColor.r * 299) + (rgbColor.g * 587) + (rgbColor.b * 114)) / 1000);
  // 如果亮度大于等于 128，使用黑色文本，否则使用白色文本
  return (brightness >= 128) ? '#000000' : '#FFFFFF';
}

function hexToRgb(hexColor) {
  // 去除 # 号
  hexColor = hexColor.replace('#', '');
  // 分离 R、G、B
  let r = parseInt(hexColor.substring(0, 2), 16);
  let g = parseInt(hexColor.substring(2, 4), 16);
  let b = parseInt(hexColor.substring(4, 6), 16);
  // 返回 RGB 值
  return {r, g, b};
}

这段代码用到了 hexToRgb 函数将带有 # 号的颜色转换为 RGB 格式，然后再根据 RGB 的颜色亮度（brightness）判断应该使用哪个文本颜色。

如果亮度大于等于 128，即背景颜色比较浅（接近白色），文本使用黑色更加清晰，返回黑色文本的颜色代码 #000000。如果亮度小于 128，即背景颜色比较深（接近黑色），文本使用白色更加清晰，返回白色文本的颜色代码 #FFFFFF。

使用示例

我们可以通过以下代码调用这个函数，来获取相应的文本颜色：

let backgroundColor = "#FFCC33";
let textColor = getTextColorByBackgroundColor(backgroundColor);
console.log(textColor); // 输出 "#000000"

backgroundColor = "#202020";
textColor = getTextColorByBackgroundColor(backgroundColor);
console.log(textColor); // 输出 "#FFFFFF"

以上代码中，我们使用两个不同的背景颜色，一个是较浅的黄色，一个是较深的灰色。通过 getTextColorByBackgroundColor(backgroundColor) 函数，我们可以得到相应的文本颜色。

结束语

根据背景颜色获取合适的文本颜色是前端开发中的一个小技巧，但是可以为用户提供更好的阅读体验。通过 JavaScript 计算颜色亮度，可以智能地返回合适的文本颜色。