目前主流浏览器均不支持 relative color syntax（如 color() 和 color-mix() 用于常规样式），仅 color-mix()（chrome 111+/safari 16.4+/firefox 119+）和 color-contrast() 可用，但 color-mix() 不支持 css 变量、链式调用或实时派生，动态颜色生成仍需预处理器或 js。
relative color syntax 在主流浏览器中还不支持
目前（2024 年中），relative color syntax（如 color(display-p3 0.5 0.2 0.8 / 0.7) 或 color-mix(in srgb, red 70%, blue)）**尚未被任何浏览器原生支持用于 HTML 元素的常规样式属性（如 color、background-color）**。你在 Chrome DevTools 里直接写 color: color(srgb 0.8 0.2 0.3); 会被忽略，控制台也不会报错——只是静默失效。
真正可用的替代方案只有 color-mix() 和 color-contrast()
Chrome 111+、Safari 16.4+、Firefox 119+ 已支持 color-mix()（作为 background-color、border-color 等属性的值），但仅限于 in srgb 或 in lch 等指定色彩空间，且必须用已命名色、十六进制、RGB 函数等“基础颜色”作为输入：
button {
background-color: color-mix(in srgb, #3b82f6 70%, white);
/* 混合出更浅的蓝色 */
}
-
color-mix()不接受 CSS 变量直接参与混合（如color-mix(in srgb, var(--primary) 60%, black)会报错），必须先将变量展开为具体值 - 不支持链式派生（比如不能
color-mix(in srgb, color-mix(...), ...)），只能单层混合 -
color-contrast()可用于自动选对比度达标的文字色，但不是“派生”，而是条件选择
想基于已有 CSS 变量动态派生？得靠预处理器或 JS
如果你定义了 --primary: #3b82f6;，又想在多个地方用它的 80% 亮度版本，纯 CSS 没法实时计算。可行路径只有两个：
- 用 Sass/Less 编译时生成：
lighten($primary, 20%)→ 输出#609bfb - 用 JS 读取
getComputedStyle获取 RGB 值，再用chroma.js或手写 HSL 转换逻辑算出新颜色，最后写回style或setProperty - CSS 自定义属性本身不支持函数调用，
--primary-light: lighten(var(--primary), 10%)是无效语法
别把 :has() 或 backdrop-filter 当成颜色派生工具
有人误以为 :has() 能触发颜色响应式变化，或者用 backdrop-filter: brightness(1.2) “调整父容器颜色”，这些都不改变目标元素自身的 color 或 background-color 计算值，只是视觉叠加效果。它们不会生成新颜色值，也不能被其他规则复用（比如你无法把滤镜后的色值赋给另一个 div 的 border-color）。
真正需要“基于某色动态生成新色”的场景，目前仍绕不开构建时处理或运行时 JS 计算——CSS 还没到那一步。别在生产环境里赌某个实验性语法已就绪。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
