color-mix() 是唯一原生支持按比例混合颜色的 CSS 函数，需指定色彩空间（如 in srgb）、显式权重，且不支持变量或 currentcolor；hsl() 适合派生同系色，但明度调整影响可访问性；oklch() 提供感知均匀的亮度控制，但兼容性有限且不可用于 color-mix。
用 color-mix() 在 CSS 里实时混合两种基础色
直接拿两个已知颜色（比如品牌主色和背景色）做线性插值，是最可控的动态配色起点。color-mix() 是目前唯一原生支持「按比例混合」的 CSS 函数，不用 JS 就能产出中间色阶。
常见错误是写成 color-mix(in srgb, #ff0000, #0000ff) —— 缺少权重会默认各 50%，但更常需要偏向某一边。比如按钮悬停时加深主色，就得显式写 color-mix(in srgb, #2563eb 70%, #1e40af 30%)。
- 必须指定色彩空间：
in srgb最稳妥；in lch更符合人眼感知，但 Safari 当前不支持 - 权重加起来不必等于 100%：浏览器会自动归一化，
#f00 2, #00f 1等价于#f00 66.6%, #00f 33.3% - 不能混入
currentcolor或变量（var(--primary)），必须是具体颜色值或已计算好的自定义属性
用 hsl() 调整色相/饱和度/明度生成同系色
当你要从一个主色派生出强调色、禁用态、悬停态时，hsl() 比写死十六进制更灵活，也比 color-mix() 更易预测结果。
典型误用是直接改 hsl(200, 100%, 50%) 的第二个参数——饱和度调太高会让文字可读性崩坏。实际中，降低饱和度 + 提高明度更适合做「弱化态」，比如禁用按钮：hsl(200, 30%, 85%)。
立即学习“前端免费学习笔记（深入）”；
-
hsl()的h值循环：360° 和 0° 是同一个红，所以生成相邻色可用calc(var(--base-h) + 30) - 明度
l是关键可访问性参数：WCAG 要求文本对比度 ≥ 4.5:1，纯黑（l:0%）在浅背景上往往过强，推荐用l:20%~30% - 不要对
hsl()值做跨浏览器动画：Firefox 对hsl()插值使用 HSL 圆柱模型，Chrome 用 RGB 线性插值，动画路径可能不一致
用 oklch() 实现感知均匀的明暗渐变
如果你发现用 hsl() 调明度时，从 50% 到 60% 看起来变化微弱，而 90% 到 100% 却突然刺眼，问题出在 SRGB 明度非线性。oklch() 的 l（亮度）通道才是人眼感知线性的，适合做深色模式过渡、数据可视化色阶。
错误做法是把设计稿里的 #3b82f6 直接丢进在线转换器生成 oklch()——不同转换工具精度差异大，且部分会丢失色域信息。正确方式是用 PostCSS 插件或构建时工具（如 postcss-oklab）统一处理。
- 当前仅 Chrome 111+ 和 Safari 16.4+ 支持
oklch()，Firefox 仍需前缀-moz-oklch()（且行为不完全一致） -
oklch()的c（色度）值超过阈值会溢出可见色域，尤其在低亮度下：若l:20%时c> 0.2，可能渲染为灰阶 - 无法用
color-mix(in oklch, ...)混合，浏览器会回退到 sRGB，失去感知均匀性优势
避免用 CSS 变量硬编码“配色方案”数组
有人把 5 种主题色全写成 --color-1: #... 到 --color-5: #...，再用 JS 切换类名切换主题——这看似灵活，实则丧失了动态计算能力，且维护成本爆炸。
真正可扩展的做法是只存 1–2 个锚点色（如 --primary-hue: 210、--theme-lum: 92%），其余通过函数实时推导：background: hsl(var(--primary-hue), 70%, var(--theme-lum));。
- 不要在 CSS 中用
@property定义颜色类型变量：虽然能触发动画，但所有主流浏览器对color类型的@property支持仍不完整，易触发回退逻辑 - 深色模式适配别靠媒体查询硬切两套变量：用
color-scheme: light dark+prefers-color-scheme配合oklch()的l动态缩放，更平滑 - 所谓“自动搭配”不是扔给算法猜，而是明确约束：比如限定衍生色必须满足 WCAG AA 级对比度，这就得靠构建时脚本校验，不是运行时 CSS 能解决的
配色的“自动”二字最容易让人忽略限制条件：浏览器能算的只有颜色空间变换和混合，语义（什么该强调、什么该弱化）、上下文（文字还是图标）、合规要求（对比度、色盲友好）全得靠人来定义规则。函数只是执行者，不是设计师。
