AI 色彩搭配推荐系统：从色彩理论到智能配色的工程化实践

一、配色决策的认知负担：为什么"选颜色"比写代码更难

在 UI 设计流程中，配色决策往往是最耗时的环节之一。一个中型的设计系统通常需要定义 8-12 个语义色（主色、辅助色、成功色、警告色等），每个语义色又需要 5-10 个色阶变体（50 到 950），加上深色模式的对应色板——最终需要维护的色彩变量可能超过 200 个。

人工配色的核心困难不在于"选一个好看的颜色"，而在于确保整个色板体系在三个维度上同时满足约束：色彩和谐度（色相环上的关系是否协调）、对比度合规性（文字与背景的对比度是否满足 WCAG 标准）、视觉层级一致性（不同语义色的明度节奏是否统一）。这三个维度相互制约——提高对比度可能破坏和谐度，调整明度节奏可能影响语义辨识度。

AI 色彩搭配推荐系统的目标，是将这三个维度的约束编码为可计算的模型，让算法在约束空间内搜索最优解，再由设计师做最终审美判断。这不是替代设计师的色感，而是将配色从"凭直觉试错"升级为"约束驱动的定向搜索"。

二、智能配色的计算模型：色彩空间、和谐规则与对比度约束

AI 配色系统的核心是一个多目标优化问题，需要同时满足色彩和谐性、对比度合规性和语义一致性。

flowchart TB
    A[用户输入：种子色/风格描述] --> B[色彩空间转换]
    B --> C[和谐规则引擎]
    C --> D[候选色板生成]
    D --> E[对比度合规校验]
    E --> F{通过 WCAG 校验?}
    F -->|否| G[明度微调算法]
    G --> E
    F -->|是| H[色阶变体生成]
    H --> I[深色模式映射]
    I --> J[输出：完整色板体系]
    C --> C1[互补色 / 分裂互补]
    C --> C2[类似色 / 三角色]
    C --> C3[四角色 / 方形色]
    E --> E1[AA 标准：4.5:1]
    E --> E2[AAA 标准：7:1]
    E --> E3[大文本：3:1]
    style A fill:#e8f4f8,stroke:#2196F3
    style J fill:#e8f4f8,stroke:#2196F3
    style C fill:#fff3e0,stroke:#FF9800
    style E fill:#fce4ec,stroke:#e53935
    style G fill:#fce4ec,stroke:#e53935

色彩空间选择：OKLCH 而非 HSL。 传统的 HSL 色彩空间在感知均匀性上存在严重缺陷——相同明度值的不同色相，在人眼感知中的实际亮度差异可达 30%。这意味着在 HSL 中等间距调整明度，产生的色阶在视觉上并不均匀。OKLCH 色彩空间基于人眼的感知模型设计，相同 L 值的变化在视觉上产生均匀的明度差异，是生成色阶变体的理想空间。

和谐规则引擎。 色彩和谐规则定义了色相环上多个颜色的几何关系。常见的和谐模式包括：互补色（色相差 180 度）、分裂互补（色相差 150 度和 210 度）、类似色（色相差 30 度以内）、三角色（色相差 120 度）。规则引擎根据用户选择的和谐模式，从种子色出发计算候选色相值。

对比度合规校验。 WCAG 2.1 定义了文本与背景的最低对比度要求：AA 级别要求普通文本 4.5:1、大文本 3:1；AAA 级别要求普通文本 7:1。对比度计算使用相对亮度公式，而非简单的色差。当候选色板未通过校验时，系统通过微调明度值（L 通道）来满足对比度要求，同时尽量保持色相和饱和度不变。

三、生产级实现：构建 AI 配色推荐引擎

以下是一个完整的色彩搭配推荐系统实现，涵盖从种子色到完整色板的生成管线：

/**
 * AI 色彩搭配推荐系统
 * 核心流程：种子色 → 和谐规则 → 候选色板 → 对比度校验 → 色阶生成 → 深色模式映射
 */
// ========================================
// 第一部分：色彩空间转换工具
// ========================================
// HEX 转 OKLCH（通过线性 RGB 中转）
function hexToOklch(hex) {
  const rgb = hexToRgb(hex);
  const linearRgb = rgb.map((c) => {
    // sRGB 非线性 → 线性 RGB
    const s = c / 255;
    return s <= 0.04045 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
  });
  // 线性 RGB → OKLab
  const l = 0.4122214708 * linearRgb[0] + 0.5363325363 * linearRgb[1] + 0.0514459929 * linearRgb[2];
  const m = 0.2119034982 * linearRgb[0] + 0.6806995451 * linearRgb[1] + 0.1073969566 * linearRgb[2];
  const s = 0.0883024619 * linearRgb[0] + 0.2817188376 * linearRgb[1] + 0.6299787005 * linearRgb[2];
  const l_ = Math.cbrt(l);
  const m_ = Math.cbrt(m);
  const s_ = Math.cbrt(s);
  const L = 0.2104542553 * l_ + 0.7936177850 * m_ - 0.0040720468 * s_;
  const a = 1.9779984951 * l_ - 2.4285922050 * m_ + 0.4505937099 * s_;
  const b = 0.0259040371 * l_ + 0.7827717662 * m_ - 0.8086757660 * s_;
  // OKLab → OKLCH
  const C = Math.sqrt(a * a + b * b);
  const H = Math.atan2(b, a) * (180 / Math.PI);
  return { L, C, H: H < 0 ? H + 360 : H };
}
// OKLCH 转 HEX
function oklchToHex({ L, C, H }) {
  // OKLCH → OKLab
  const hRad = H * (Math.PI / 180);
  const a = C * Math.cos(hRad);
  const b = C * Math.sin(hRad);
  // OKLab → 线性 RGB（逆变换）
  const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
  const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
  const s_ = L - 0.0894841775 * a - 1.2914855480 * b;
  const l = l_ * l_ * l_;
  const m = m_ * m_ * m_;
  const s = s_ * s_ * s_;
  const rLinear = +4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
  const gLinear = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
  const bLinear = -0.0041960863 * l - 0.7034186147 * m + 1.7076147010 * s;
  // 线性 RGB → sRGB → HEX
  const rgb = [rLinear, gLinear, bLinear].map((c) => {
    const srgb = c <= 0.0031308
      ? 12.92 * c
      : 1.055 * Math.pow(c, 1 / 2.4) - 0.055;
    return Math.round(Math.max(0, Math.min(255, srgb * 255)));
  });
  return `#${rgb.map((c) => c.toString(16).padStart(2, '0')).join('')}`;
}
// ========================================
// 第二部分：和谐规则引擎
// ========================================
// 色彩和谐模式定义
const HARMONY_RULES = {
  complementary: { offsets: [0, 180], name: '互补色' },
  splitComplementary: { offsets: [0, 150, 210], name: '分裂互补' },
  analogous: { offsets: [-30, -15, 0, 15, 30], name: '类似色' },
  triadic: { offsets: [0, 120, 240], name: '三角色' },
  tetradic: { offsets: [0, 90, 180, 270], name: '四角色' },
};
// 根据和谐规则生成候选色相
function generateHarmonyHues(seedHue, mode) {
  const rule = HARMONY_RULES[mode];
  if (!rule) {
    throw new Error(`不支持的和谐模式: ${mode}，可选值: ${Object.keys(HARMONY_RULES).join(', ')}`);
  }
  return rule.offsets.map((offset) => {
    const hue = (seedHue + offset + 360) % 360;
    return hue;
  });
}
// ========================================
// 第三部分：对比度校验与自动修正
// ========================================
// 计算相对亮度（WCAG 2.1 标准公式）
function relativeLuminance(hex) {
  const rgb = hexToRgb(hex);
  const [rs, gs, bs] = rgb.map((c) => {
    const s = c / 255;
    return s <= 0.03928 ? s / 12.92 : Math.pow((s + 0.055) / 1.055, 2.4);
  });
  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
}
// 计算对比度比
function contrastRatio(hex1, hex2) {
  const l1 = relativeLuminance(hex1);
  const l2 = relativeLuminance(hex2);
  const lighter = Math.max(l1, l2);
  const darker = Math.min(l1, l2);
  return (lighter + 0.05) / (darker + 0.05);
}
// WCAG 合规等级判定
function wcagLevel(ratio, isLargeText = false) {
  if (isLargeText) {
    if (ratio >= 4.5) return 'AAA';
    if (ratio >= 3) return 'AA';
    return 'Fail';
  }
  if (ratio >= 7) return 'AAA';
  if (ratio >= 4.5) return 'AA';
  return 'Fail';
}
// 自动修正明度以满足对比度要求
function adjustLightnessForContrast(foregroundOklch, backgroundHex, targetRatio = 4.5) {
  const bgLuminance = relativeLuminance(backgroundHex);
  let oklch = { ...foregroundOklch };
  // 二分搜索：在 OKLCH 的 L 通道上搜索满足对比度的明度值
  let low = 0;
  let high = 1;
  let iterations = 0;
  const maxIterations = 20; // 防止无限循环
  while (low <= high && iterations < maxIterations) {
    const mid = (low + high) / 2;
    oklch.L = mid;
    const hex = oklchToHex(oklch);
    const ratio = contrastRatio(hex, backgroundHex);
    if (Math.abs(ratio - targetRatio) < 0.1) {
      return oklch;
    }
    // 根据背景亮度决定调整方向
    if (bgLuminance > 0.5) {
      // 浅色背景：降低前景明度以增加对比度
      if (ratio < targetRatio) {
        high = mid;
      } else {
        low = mid;
      }
    } else {
      // 深色背景：提高前景明度以增加对比度
      if (ratio < targetRatio) {
        low = mid;
      } else {
        high = mid;
      }
    }
    iterations++;
  }
  return oklch;
}
// ========================================
// 第四部分：色阶变体生成
// ========================================
// 生成从 50 到 950 的色阶变体
function generateScale(baseOklch, steps = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]) {
  const scale = {};
  // 明度映射：50 最亮，950 最暗
  // 使用感知均匀的明度分布
  const lightnessMap = {
    50: 0.97, 100: 0.93, 200: 0.86, 300: 0.76,
    400: 0.65, 500: 0.55, 600: 0.45, 700: 0.35,
    800: 0.25, 900: 0.17, 950: 0.12,
  };
  // 饱和度曲线：中间色阶饱和度最高，两端递减
  const chromaCurve = (step) => {
    const normalized = (step - 50) / (950 - 50); // 0 到 1
    // 钟形曲线，在 500 附近达到峰值
    return baseOklch.C * (0.6 + 0.4 * Math.sin(normalized * Math.PI));
  };
  steps.forEach((step) => {
    const L = lightnessMap[step];
    const C = chromaCurve(step);
    // 色相微调：暗色阶略微偏暖，亮色阶略微偏冷
    const hueShift = (step - 500) / 500 * 8;
    const H = (baseOklch.H + hueShift + 360) % 360;
    scale[step] = oklchToHex({ L, C: Math.max(0, C), H });
  });
  return scale;
}
// ========================================
// 第五部分：深色模式映射
// ========================================
// 将浅色模式色板映射到深色模式
function mapToDarkMode(scale) {
  const darkScale = {};
  const steps = Object.keys(scale).map(Number).sort((a, b) => a - b);
  // 深色模式的色阶映射：浅色模式的亮色阶 → 深色模式的暗色阶
  // 例如：浅色 50 → 深色 950，浅色 100 → 深色 900
  const darkMapping = {
    50: 950, 100: 900, 200: 800, 300: 700,
    400: 600, 500: 500, 600: 400, 700: 300,
    800: 200, 900: 100, 950: 50,
  };
  steps.forEach((step) => {
    const targetStep = darkMapping[step];
    const sourceHex = scale[targetStep];
    const sourceOklch = hexToOklch(sourceHex);
    // 深色模式下饱和度略微降低，避免过饱和刺眼
    darkScale[step] = oklchToHex({
      ...sourceOklch,
      C: sourceOklch.C * 0.85,
    });
  });
  return darkScale;
}
// ========================================
// 第六部分：完整配色推荐管线
// ========================================
export function generateColorSystem(seedHex, options = {}) {
  const {
    harmony = 'analogous',
    contrastTarget = 4.5,
    generateDarkMode = true,
  } = options;
  try {
    // 步骤 1：种子色转 OKLCH
    const seedOklch = hexToOklch(seedHex);
    // 步骤 2：生成和谐色相
    const harmonyHues = generateHarmonyHues(seedOklch.H, harmony);
    // 步骤 3：为每个色相生成完整色板
    const palettes = harmonyHues.map((hue, index) => {
      const baseOklch = { ...seedOklch, H: hue };
      const scale = generateScale(baseOklch);
      // 步骤 4：对比度校验与自动修正
      const correctedScale = {};
      Object.entries(scale).forEach(([step, hex]) => {
        const stepNum = Number(step);
        // 对文本色阶（700-950）进行对比度校验
        if (stepNum >= 700) {
          const oklch = hexToOklch(hex);
          const adjusted = adjustLightnessForContrast(oklch, '#ffffff', contrastTarget);
          correctedScale[step] = oklchToHex(adjusted);
        } else {
          correctedScale[step] = hex;
        }
      });
      return {
        hue,
        scale: correctedScale,
        darkScale: generateDarkMode ? mapToDarkMode(correctedScale) : null,
      };
    });
    // 步骤 5：生成语义色映射
    const semanticColors = {
      primary: palettes[0].scale,
      secondary: palettes[1]?.scale || palettes[0].scale,
      accent: palettes[2]?.scale || palettes[0].scale,
    };
    return {
      success: true,
      harmony,
      seedColor: seedHex,
      palettes,
      semanticColors,
      contrastReport: generateContrastReport(semanticColors),
    };
  } catch (error) {
    return {
      success: false,
      error: error.message,
    };
  }
}
// 生成对比度报告
function generateContrastReport(semanticColors) {
  const report = [];
  const bgColors = ['#ffffff', '#1a1a2e']; // 浅色/深色背景
  Object.entries(semanticColors).forEach(([name, scale]) => {
    [700, 800, 900].forEach((step) => {
      const fg = scale[step];
      if (!fg) return;
      bgColors.forEach((bg) => {
        const ratio = contrastRatio(fg, bg);
        report.push({
          semantic: name,
          step,
          foreground: fg,
          background: bg,
          ratio: ratio.toFixed(2),
          level: wcagLevel(ratio),
        });
      });
    });
  });
  return report;
}
// 辅助函数
function hexToRgb(hex) {
  const match = hex.replace('#', '').match(/.{2}/g);
  return match.map((c) => parseInt(c, 16));
}

上述实现的关键设计决策：

OKLCH 作为核心色彩空间。 所有色彩计算都在 OKLCH 空间中进行，确保明度调整的感知均匀性。色阶生成时，相同 L 值步长在视觉上产生均匀的明度变化，避免了 HSL 空间中不同色相明度感知不一致的问题。

饱和度钟形曲线。 色阶变体的饱和度采用正弦钟形曲线——500 色阶（基础色）饱和度最高，向两端递减。这符合自然色彩的感知规律：极亮和极暗的颜色，人眼对饱和度的敏感度降低。

深色模式映射而非重新生成。 深色模式色板通过反转浅色模式的色阶映射生成，而非从种子色重新计算。这确保了浅色和深色模式的色相一致性——用户切换主题时，色彩识别不会发生跳变。

四、AI 配色的局限与人工校准的必要性

AI 配色系统可以大幅缩小搜索空间，但最终输出仍需人工校准，原因如下：

色彩情感的主观性。 和谐规则保证了色相环上的几何关系合理，但无法保证色彩组合传达的情感符合产品定位。同样是类似色方案，蓝绿色系传达科技感，暖橙色系传达活力感——这种语义映射需要设计师的判断。

品牌色的特殊约束。 品牌色通常有严格的色值规范，不允许算法调整。当品牌色作为种子色输入时，系统需要确保生成的色板中品牌色本身不被修改，仅调整辅助色和色阶变体。当前实现中，种子色直接作为 500 色阶的基础，但品牌色的精确色值可能与 500 色阶的明度位置不一致，需要额外的对齐逻辑。

文化差异与无障碍交叉。 不同文化对色彩的联想存在差异（如白色在东西方文化中的含义不同），AI 系统目前无法处理这种文化语境。同时，色觉缺陷用户（如红绿色盲）的体验需要额外的模拟验证——AI 生成的"和谐"配色，在色觉模拟下可能完全丧失辨识度。

工程化建议。 AI 配色系统的输出应视为"高质量初稿"而非最终方案。建议工作流为：AI 生成候选色板 → 设计师在真实界面中预览 → 对比度报告自动校验 → 色觉模拟验证 → 人工微调确认。AI 的价值在于将配色从"从零开始"加速到"从 80 分开始调整"。

五、总结

AI 色彩搭配推荐系统通过将色彩和谐规则、对比度约束和色阶生成算法编码为可计算模型，实现了从种子色到完整色板体系的自动化生成。OKLCH 色彩空间的感知均匀性保证了色阶变体的视觉一致性，对比度自动修正确保了 WCAG 合规性，深色模式映射维持了主题切换时的色彩识别稳定性。

落地路线上，建议将 AI 配色系统集成到设计系统的 Token 管理流程中：设计师提供种子色和和谐模式偏好，系统生成候选色板并输出对比度报告，设计师在真实界面中预览确认后，将最终色值写入 Design Token 文件。关键原则是 AI 生成与人工校准并行——算法负责约束空间的搜索，设计师负责审美判断和语义决策。