color-mix() 是目前唯一被广泛支持的“相对变灰”方案，chrome 107+、firefox 111+、safari 16.4+ 均支持，需指定色彩空间（如 in srgb），不支持 from 引用自定义属性。
oklch(from ...) 语法不能用于变灰，当前（2026 年中）所有稳定版浏览器均不支持 from 关键字，包括 Chrome、Firefox、Safari。你写 oklch(from var(--primary) l c h) 或 color(from var(--c) gray(50%))，浏览器会静默丢弃整条声明——控制台无报错，样式也不生效。
为什么 color-mix() 是目前唯一可行的“相对变灰”方案
真正被广泛支持（Chrome 107+、Firefox 111+、Safari 16.4+）且语义明确的变灰方式，是 color-mix()：它允许你基于一个基准色，按比例混合灰色（或黑白），从而得到可预测的中间灰度值。
-
color-mix(in srgb, var(--accent) 60%, gray(70%) 40%)—— 混合后更偏基准色，但带明显灰调 -
color-mix(in srgb, var(--accent) 0%, gray(50%) 100%)—— 等效于纯gray(50%)，失去原色信息 - 必须指定色彩空间（如
in srgb），否则部分 Safari 版本会忽略整条规则 - 不支持
from引用自定义属性（如color-mix(in srgb, from --accent l c h)），该写法无效
grayscale() 滤镜不是“颜色变灰”，而是视觉渲染层处理
filter: grayscale(100%) 不改变 CSS 中定义的颜色值（color、background-color 仍为 #ff6b35），只是在绘制时对像素做实时灰度转换。这意味着：
- 它会影响所有子元素（图片、文字、SVG、伪元素），无法局部排除
- 无法与
transition配合实现颜色通道级的渐变（比如只让亮度下降而保持色相） - 旧版 IE 需靠
filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1)，但该语法已废弃且仅限 IE9–10 - 若需响应式灰度（如暗色模式下关闭滤镜），必须用 JS 切换 class，无法用
@media (prefers-contrast: high)直接控制
别碰 hue()/lightness() 等 color-mod 函数
像 lightness(var(--c))、hue(var(--c)) 这类函数，和 oklch(from ...) 一样，属于 CSS Color 5 草案，**没有浏览器实现**。你在 DevTools 里输入它们，CSS 声明会直接变红（解析失败），或者被静默跳过。PostCSS 插件如 postcss-relative-color 也仅能处理硬编码颜色值（如 oklch(from #ff6b35 l c h)），无法解析 var(--c)。
真要动态计算灰阶，得靠 JS：getComputedStyle(el).color 取出 RGB，转 OKLCH 后设 l 和 c 为固定低值，再转回 sRGB 输出 —— 但这已脱离纯 CSS 范畴。
color-mix() 做静态灰阶衍生色；或用 filter: grayscale() 做全页面视觉降色。二者目的不同，不能混用，也别指望用一个语法同时满足“可计算”和“零构建”。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
