如何用JavaScript/SCSS自动计算适配黑色文本的浅色基色背景

我的Web应用会被分配任意随机颜色作为基础强调色（比如紫色）。黑色文本在这种深紫色背景上的对比度极差：

但如果把背景改成极浅的紫色调，既能保证文本可读性，又能保留紫色的特征与基础色保持一致：

以下是用JavaScript和SCSS实现自动计算这类浅色调的方案：

一、JavaScript实现方案 #

核心逻辑是将颜色转为HSL格式，保留原色相以维持色系一致性，降低饱和度避免刺眼，拉高亮度确保与黑色文本的对比度达标。

代码示例 #

// 十六进制转HSL格式
function hexToHsl(hex) {
  const r = parseInt(hex.slice(1, 3), 16) / 255;
  const g = parseInt(hex.slice(3, 5), 16) / 255;
  const b = parseInt(hex.slice(5, 7), 16) / 255;

  const max = Math.max(r, g, b);
  const min = Math.min(r, g, b);
  let h, s, l = (max + min) / 2;

  if (max === min) {
    h = s = 0;
  } else {
    const d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r: h = (g - b) / d + (g < b ? 6 : 0); break;
      case g: h = (b - r) / d + 2; break;
      case b: h = (r - g) / d + 4; break;
    }
    h /= 6;
  }

  return { h: h * 360, s: s * 100, l: l * 100 };
}

// HSL转十六进制格式
function hslToHex(h, s, l) {
  h /= 360;
  s /= 100;
  l /= 100;
  let r, g, b;

  if (s === 0) {
    r = g = b = l;
  } else {
    const hue2rgb = (p, q, t) => {
      if (t < 0) t += 1;
      if (t > 1) t -= 1;
      if (t < 1/6) return p + (q - p) * 6 * t;
      if (t < 1/2) return q;
      if (t < 2/3) return p + (q - p) * (2/3 - t) * 6;
      return p;
    };

    const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
    const p = 2 * l - q;
    r = hue2rgb(p, q, h + 1/3);
    g = hue2rgb(p, q, h);
    b = hue2rgb(p, q, h - 1/3);
  }

  const toHex = x => {
    const hex = Math.round(x * 255).toString(16);
    return hex.length === 1 ? '0' + hex : hex;
  };

  return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}

// 生成高对比度浅背景色
function generateLightBgColor(baseHex) {
  const hsl = hexToHsl(baseHex);
  // 保留原色相，降低饱和度至原20%（最低10%），亮度固定为95%
  const adjustedHsl = {
    h: hsl.h,
    s: Math.max(10, hsl.s * 0.2),
    l: 95
  };
  return hslToHex(adjustedHsl.h, adjustedHsl.s, adjustedHsl.l);
}

// 使用示例
const baseColor = '#800080'; // 紫色基色
const lightBg = generateLightBgColor(baseColor);
console.log(lightBg); // 输出类似#f9e6f9的浅紫色

可选优化：对比度校验 #

如果需要严格符合WCAG AA级（对比度≥4.5:1），可以添加校验逻辑自动调整亮度：

// 计算颜色相对亮度（WCAG标准）
function getRelativeLuminance(hex) {
  const r = parseInt(hex.slice(1, 3), 16) / 255;
  const g = parseInt(hex.slice(3, 5), 16) / 255;
  const b = parseInt(hex.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;
}

// 计算两种颜色的对比度
function calculateContrast(color1, color2) {
  const l1 = getRelativeLuminance(color1);
  const l2 = getRelativeLuminance(color2);
  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
}

// 生成符合对比度标准的浅背景色
function generateContrastSafeLightBg(baseHex) {
  let lightness = 95;
  let lightBg;
  do {
    const hsl = hexToHsl(baseHex);
    lightBg = hslToHex(hsl.h, Math.max(10, hsl.s * 0.2), lightness);
    lightness -= 1;
  } while (calculateContrast(lightBg, '#000000') < 4.5 && lightness >= 50);
  return lightBg;
}

二、SCSS实现方案 #

利用SCSS内置的颜色处理函数，更简洁地实现需求：

代码示例 #

// 定义混合宏，生成高对比度浅背景色
@mixin light-bg-from-base($base-color) {
  $hue: hue($base-color); // 提取基色色相
  $light-bg: hsl($hue, 15%, 95%); // 固定低饱和度、高亮度
  background-color: $light-bg;
}

// 使用示例
.base-purple {
  background-color: #800080;
  color: #000; // 对比度差
}

.light-purple-bg {
  @include light-bg-from-base(#800080);
  color: #000; // 对比度良好
}

灵活调整方式 #

如果需要基于基色做相对调整，可使用lighten()和desaturate()函数：

$light-bg: lighten(desaturate($base-color, 80%), 70%);

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