Material 3 HCT 色彩系统工程实践

Material Design 3 的 HCT（Hue-Chroma-Tone）色彩系统解决了传统 HSL 感知不均匀的问题。

HCT vs HSL

HSL 的亮度值不符合人眼感知：同样 50% 的黄色看起来比蓝色亮得多。HCT 基于 CIELAB 色彩空间，确保相同 Tone 值的颜色看起来亮度相同。

动态配色实现

从单一色相（0-360度）生成完整调色板，包括主色、辅色、第三色和中性色。每个色相生成 13 个 Tone 档（0-100），自动满足 WCAG AA 对比度要求。

构建期优化

将 material-color-utilities 的核心算法抽取出来，在构建期计算配色并直接注入 CSS 变量，避免 100KB+ 的运行时库。