color-mix() 是已广泛支持的颜色混合函数，可基于变量与 black/white 按比例混合生成深浅色；relative-color() 尚未被任何主流浏览器实现。
什么是 color-mix() 和 relative-color()？
目前（2024 年中），relative-color() 语法本身 尚未被任何主流浏览器实现。你查到的规范草案（CSS Color 5）里定义的 relative-color(lch in var(--base) a b c) 这类写法，Chrome、Firefox、Safari 都不认——直接写会触发解析失败，降级为无效声明。
真正已落地、能立刻用的方案是 color-mix()（Chrome 111+、Safari 16.4+、Firefox 119+ 支持），它基于两个颜色按比例混合，可稳定生成深色/浅色变体。
用 color-mix() 基于变量生成深浅色
核心思路：把原色和 black 或 white 混合，控制混合比例即可控制深浅程度。关键点不是“相对坐标”，而是“可控灰度叠加”。
-
color-mix(in srgb, #3b82f6 70%, black 30%)→ 深蓝（70% 原色 + 30% 黑） -
color-mix(in srgb, #3b82f6 80%, white 20%)→ 浅蓝（80% 原色 + 20% 白） - 若原色来自 CSS 变量：
color-mix(in srgb, var(--primary) 75%, black 25%) - 注意：必须显式指定色彩空间（
in srgb或in lch），否则无效
为什么不用 lch() 直接调亮度？
虽然 lch() 理论上更符合人眼感知（L 是亮度），但实际有硬伤：
立即学习“前端免费学习笔记（深入）”；
- 浏览器对
lch()的支持弱于color-mix()（尤其 Firefox 对lch()解析不稳定） - 从
lch()提取 L 值再计算新亮度，需 JS 辅助或预编译，无法纯 CSS 动态响应 -
color-mix(in lch, ...)混合时 L 值非线性叠加，结果难预测；而in srgb行为确定、调试直观
兼容 fallback 和常见坑
别指望单行 CSS 兼容所有环境。真实项目要加降级：
- 先写传统
darken()/lighten()（Sass/Less 编译）或 HSL 调整作为 fallback -
color-mix()必须放在支持它的属性后（如background-color），且不能和旧语法混在同一个声明里 - 错误示例：
color: color-mix(in srgb, var(--c) 60%, #000); color: darken(var(--c), 20%);—— 后者不会 fallback，整条声明被忽略 - 正确写法：用
@supports (color: color-mix(...))包裹新语法，旧浏览器走另一套规则
真正麻烦的不是语法多难记，而是当你在设计系统里想让一个 --brand-blue 自动产出 --brand-blue-dark 和 --brand-blue-light 时，得同时维护三套逻辑：编译时生成、运行时 JS 计算、以及现代 CSS 的原生混合——三者数值还未必一致。
