React与JS中如何生成深色作为Avatar组件的动态背景？

要让随机生成的背景色始终是深色，保证白色文字清晰可读，核心思路是在生成随机颜色后，判断其亮度是否符合深色标准，不符合则重新生成。下面提供两种实用的实现方式：

方法一：基于RGB总和的简单判断 #

将十六进制颜色转换为RGB值，通过红、绿、蓝三个通道的数值总和判断深浅——总和越小，颜色越深。我们设定一个阈值（比如382，是255*3的一半），只保留总和低于阈值的颜色：

const getDarkRandomColor = () => {
  let color: string;
  do {
    // 生成随机十六进制颜色
    color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
    // 转换为RGB值
    const r = parseInt(color.slice(1, 3), 16);
    const g = parseInt(color.slice(3, 5), 16);
    const b = parseInt(color.slice(5, 7), 16);
    // 判断是否为深色（RGB总和小于382）
  } while (r + g + b >= 382);
  return color;
};

const colors = useMemo(() => {
  const randomColors = persons.map(() => getDarkRandomColor());
  return randomColors;
}, [persons]);

方法二：基于WCAG标准的相对亮度计算（更精准） #

如果需要严格符合无障碍设计标准，可以使用WCAG定义的相对亮度公式来判断颜色深浅。当颜色的相对亮度低于0.5时，属于深色，搭配白色文字的对比度符合WCAG AA级以上标准：

// 计算颜色的相对亮度（WCAG标准）
const calculateRelativeLuminance = (hexColor: string) => {
  const r = parseInt(hexColor.slice(1, 3), 16) / 255;
  const g = parseInt(hexColor.slice(3, 5), 16) / 255;
  const b = parseInt(hexColor.slice(5, 7), 16) / 255;

  const sR = r <= 0.03928 ? r / 12.92 : Math.pow((r + 0.055) / 1.055, 2.4);
  const sG = g <= 0.03928 ? g / 12.92 : Math.pow((g + 0.055) / 1.055, 2.4);
  const sB = b <= 0.03928 ? b / 12.92 : Math.pow((b + 0.055) / 1.055, 2.4);

  return 0.2126 * sR + 0.7152 * sG + 0.0722 * sB;
};

const getDarkRandomColor = () => {
  let color: string;
  do {
    color = `#${Math.floor(Math.random() * 16777215).toString(16)}`;
  } while (calculateRelativeLuminance(color) >= 0.5);
  return color;
};

const colors = useMemo(() => {
  const randomColors = persons.map(() => getDarkRandomColor());
  return randomColors;
}, [persons]);

这两种方法都能确保生成的背景色是深色，白色文字在上面的可读性完全没问题。其中方法二更专业，适合对无障碍体验有要求的场景；方法一实现简单，适合快速开发。

内容的提问来源于stack exchange，提问作者Joseph