UI 色彩体系构建：从色板生成到无障碍对比度的工程化实践
一、色彩不是"选个好看的颜色"：系统化色板的数学基础
UI 设计中最常见的色彩问题是"色板漂移"——项目初期定义了 5 个品牌色，三个月后代码中出现了 50 种未定义的色值变体。根本原因是色板缺乏数学基础：设计师凭直觉调色，开发者凭感觉微调，没有统一的生成规则。
系统化色板的核心是"从一个种子色生成完整色阶"。不是手动定义 10 个灰度值，而是通过数学函数（HSL 空间中的亮度插值）自动生成。这样色板有内在的一致性——同一色相的不同明度之间有可预测的关系，新增变体只需调整参数而非重新选色。
二、色板生成的数学模型
色板生成基于 HSL 色彩空间。种子色确定色相（H）和饱和度（S），亮度（L）从 0% 到 100% 等距插值生成色阶。
flowchart TB A[种子色<br/>H:210 S:80% L:50%] --> B[HSL 空间插值] B --> C[色阶生成<br/>L: 5%→95% 共 11 级] C --> D[语义映射<br/>primary/secondary/surface...] D --> D1[primary-50: #EFF6FF<br/>最浅] D --> D2[primary-100: #DBEAFE] D --> D3[primary-500: #3B82F6<br/>种子色] D --> D4[primary-900: #1E3A5F<br/>最深] A --> E[对比度校验] E --> F[WCAG AA<br/>正文 ≥ 4.5:1] E --> G[WCAG AA<br/>大字 ≥ 3:1] F --> H[自动标注合规色对] G --> H style B fill:#e8f5e9 style E fill:#fff3e0关键设计点：色阶不是线性插值，而是使用感知均匀的插值曲线。人眼对暗部的亮度变化更敏感，所以暗部色阶的间距应该更小。使用 OKLCH 色彩空间（比 HSL 更接近人眼感知）可以得到更均匀的色阶。
三、代码实现
3.1 色板生成引擎
// palette-generator.ts - 色板生成引擎 interface PaletteConfig { seedColor: string; // 种子色（hex） name: string; // 色板名称 steps: number; // 色阶数量（默认 11） lightEnd: number; // 最亮端 L 值（默认 95） darkEnd: number; // 最暗端 L 值（默认 5） } interface ColorStep { step: number; // 色阶编号（50, 100, 200...900） hex: string; // 十六进制色值 hsl: { h: number; s: number; l: number }; oklch: { l: number; c: number; h: number }; } class PaletteGenerator { /** * 从种子色生成完整色阶 */ generate(config: PaletteConfig): ColorStep[] { const seed = this.hexToHSL(config.seedColor); const steps: ColorStep[] = []; // 色阶编号：50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 const stepValues = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]; for (let i = 0; i < stepValues.length; i++) { // 非线性插值：暗部间距更小 const t = i / (stepValues.length - 1); const curvedT = this.perceptualCurve(t); // 亮度从暗到亮 const lightness = config.darkEnd + curvedT * (config.lightEnd - config.darkEnd); // 饱和度在中间色阶最高，两端降低 const saturationCurve = Math.sin(t * Math.PI); const saturation = seed.s * (0.6 + 0.4 * saturationCurve); const hsl = { h: seed.h, s: saturation, l: lightness }; const hex = this.hslToHex(hsl.h, hsl.s, hsl.l); steps.push({ step: stepValues[i], hex, hsl, oklch: this.hslToOklch(hsl), }); } return steps; } /** * 感知曲线：暗部间距更小，亮部间距更大 * 模拟人眼对亮度变化的非线性感知 */ private perceptualCurve(t: number): number { // 使用 gamma 2.2 的幂函数 return Math.pow(t, 1 / 2.2); } /** * 生成多色板系统 */ generateSystem(seeds: Record<string, string>): Record<string, ColorStep[]> { const palettes: Record<string, ColorStep[]> = {}; for (const [name, color] of Object.entries(seeds)) { palettes[name] = this.generate({ seedColor: color, name, steps: 11, }); } // 生成中性色板（灰色系） palettes.neutral = this.generate({ seedColor: '#6B7280', // 中灰 name: 'neutral', steps: 11, }); return palettes; } /** * 语义映射：将色阶映射到设计 Token */ mapToSemanticTokens( palettes: Record<string, ColorStep[]> ): Record<string, string> { return { // 主色 '--color-primary': palettes.primary[5].hex, // 500 '--color-primary-hover': palettes.primary[4].hex, // 400 '--color-primary-active': palettes.primary[6].hex, // 600 '--color-primary-light': palettes.primary[1].hex, // 100 '--color-primary-text': palettes.primary[8].hex, // 800 // 语义色 '--color-success': palettes.green[5].hex, '--color-warning': palettes.amber[5].hex, '--color-error': palettes.red[5].hex, '--color-info': palettes.blue[5].hex, // 表面色 '--color-surface': palettes.neutral[1].hex, // 100 '--color-surface-alt': palettes.neutral[2].hex, // 200 '--color-surface-raised': '#FFFFFF', // 文本色 '--color-text-primary': palettes.neutral[9].hex, // 900 '--color-text-secondary': palettes.neutral[6].hex, // 600 '--color-text-tertiary': palettes.neutral[4].hex, // 400 '--color-text-inverse': '#FFFFFF', // 边框色 '--color-border': palettes.neutral[3].hex, // 300 '--color-border-hover': palettes.neutral[4].hex, // 400 }; } // 色彩空间转换工具 private hexToHSL(hex: string): { h: number; s: number; l: number } { 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); const l = (max + min) / 2; if (max === min) return { h: 0, s: 0, l: l * 100 }; const d = max - min; const s = l > 0.5 ? d / (2 - max - min) : d / (max + min); let h = 0; if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6; else if (max === g) h = ((b - r) / d + 2) / 6; else h = ((r - g) / d + 4) / 6; return { h: h * 360, s: s * 100, l: l * 100 }; } private hslToHex(h: number, s: number, l: number): string { s /= 100; l /= 100; const a = s * Math.min(l, 1 - l); const f = (n: number) => { const k = (n + h / 30) % 12; const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1); return Math.round(255 * color).toString(16).padStart(2, '0'); }; return `#${f(0)}${f(8)}${f(4)}`; } private hslToOklch(hsl: { h: number; s: number; l: number }): { l: number; c: number; h: number } { // 简化的 HSL → OKLCH 转换 // 生产环境应使用完整的色彩空间转换库 return { l: hsl.l / 100 * 0.75 + 0.15, c: hsl.s / 100 * 0.15, h: hsl.h, }; } }3.2 对比度校验与合规色对
// contrast-checker.ts - WCAG 对比度校验 class ContrastChecker { /** * 检查色板中所有色对的对比度 * 返回符合 WCAG AA 标准的合规色对 */ findCompliantPairs( palettes: Record<string, ColorStep[]>, level: 'AA' | 'AAA' = 'AA' ): CompliantPair[] { const pairs: CompliantPair[] = []; const textThreshold = level === 'AAA' ? 7 : 4.5; const largeTextThreshold = level === 'AAA' ? 4.5 : 3; // 检查所有前景-背景组合 const allColors = Object.values(palettes).flat(); for (const fg of allColors) { for (const bg of allColors) { if (fg.step === bg.step) continue; const ratio = this.contrastRatio(fg.hex, bg.hex); if (ratio >= textThreshold) { pairs.push({ foreground: fg, background: bg, ratio, usage: 'normal-text', }); } else if (ratio >= largeTextThreshold) { pairs.push({ foreground: fg, background: bg, ratio, usage: 'large-text', }); } } } return pairs.sort((a, b) => b.ratio - a.ratio); } private contrastRatio(fg: string, bg: string): number { const l1 = this.relativeLuminance(fg); const l2 = this.relativeLuminance(bg); const lighter = Math.max(l1, l2); const darker = Math.min(l1, l2); return (lighter + 0.05) / (darker + 0.05); } private relativeLuminance(hex: string): number { const [r, g, b] = this.hexToRgb(hex); const [rs, gs, bs] = [r, g, b].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; } private hexToRgb(hex: string): [number, number, number] { const clean = hex.replace('#', ''); return [ parseInt(clean.substring(0, 2), 16), parseInt(clean.substring(2, 4), 16), parseInt(clean.substring(4, 6), 16), ]; } }四、色彩体系的工程边界
OKLCH 的浏览器支持：OKLCH 色彩空间在 CSS 中的支持需要color()函数，Chrome 111+ 和 Safari 15.4+ 已支持，但 Firefox 支持较晚。生成色板时建议同时输出 OKLCH 和 HEX 两种格式，HEX 作为降级方案。
暗色模式的色板反转：暗色模式不是简单地将色板反转。暗色背景上，色阶的使用方向反转——浅色用于文本，深色用于背景。但色相和饱和度也需要调整：暗色模式下饱和度应降低 10-20%，避免在深色背景上过于刺眼。
品牌色的色相偏移：种子色可能不适合所有色阶。例如，品牌色是蓝色，但蓝色色阶的浅色端可能偏紫。需要在生成色阶时对色相做微调——浅色端色相偏暖 5-10 度，深色端色相偏冷 5-10 度。
色板的命名规范：色阶编号（50-950）是 Tailwind 的标准，但团队可能更习惯语义命名（primary-light、primary-dark）。建议同时维护两种命名，数值编号用于设计系统内部，语义命名用于业务代码。
五、总结
系统化色板的核心是"从一个种子色数学生成完整色阶"。本文的关键实现为：HSL 空间非线性插值（感知均匀曲线）、多色板系统生成、语义 Token 映射、WCAG 对比度校验。色阶生成使用 gamma 2.2 幂函数确保暗部间距更小，饱和度使用正弦曲线在中间色阶最高。落地时需确保所有文本-背景色对满足 WCAG AA 标准（正文 ≥ 4.5:1），暗色模式需独立调整饱和度和色相。
补充落地建议：围绕“UI 色彩体系构建：从色板生成到无障碍对比度的工程化实践”继续推进时，应把验证标准写成可执行清单，而不是停留在经验判断。性能类方案要给出基准数据，架构类方案要给出故障隔离方式，AI 类方案要给出输出质量和人工兜底策略。每一次迭代都应回答三个问题：收益是否可量化，失败是否可回滚，维护成本是否被团队接受。
如果短期资源有限，可以先保留最关键的观测指标，包括处理耗时、失败率、资源占用和人工介入次数。等这些指标稳定后，再扩展自动化能力。这样的节奏更慢，但风险更低，也更符合生产级技术文章强调的工程可验证性。
