color-mix() 不能动态生成禁用态颜色，仅支持预计算静态色值且需配 fallback；失效主因是浏览器兼容性差、语法不全（缺 in/权重/%）或未启用功能。
不能直接用 color-mix() “动态生成”禁用态颜色——它不响应状态、不支持变量、也不做可访问性校验；你只能用它预计算一个静态色值，且必须配 fallback。
为什么写了 color-mix() 却没变灰？
禁用态颜色失效，90% 是因为浏览器根本没执行这个函数：
-
color-mix()在 Firefox 默认禁用（需手动开启layout.css.color-mix.enabled），Safari 16.4+ 才开始支持，旧版 Edge/Chrome 直接忽略整条声明 -
color-mix(in srgb, var(--primary), #9ca3af)→ 静默失败，var()不被解析，控制台无报错 -
color-mix(in srgb, #3b82f6, #9ca3af)→ 缺权重，整条 CSS 声明被丢弃（不是默认 50%/50%，是彻底跳过） -
color-mix(srgb, #3b82f6 70%, #9ca3af 30%)→ 漏写in关键字，无效
怎么写出真正生效的禁用态颜色声明？
必须三要素齐全：显式色彩空间 + 字面量颜色 + 带 % 的权重。推荐按这个顺序组织：
- 先写一个可靠的 fallback 色：
color: #6b7280;（WCAG AA 级对比度下较安全的禁用文字灰） - 再覆盖
color-mix()声明：color: color-mix(in srgb, #3b82f6 60%, #9ca3af 40%); - 色彩空间选
in srgb（兼容性最好），别用in lch（Safari 不支持） - 权重总和必须为 100%：
#3b82f6 60%, #9ca3af 40%可行，#3b82f6 6, #9ca3af 4虽会被归一化但可读性差，不推荐
禁用态颜色不能只靠 color-mix() 决定
它只输出一个固定 RGB 值，无法保证可访问性或视觉一致性：
立即学习“前端免费学习笔记（深入）”；
-
color-mix()不校验对比度——color-mix(in srgb, #f9fafb 80%, #d1d5db 20%)可能产出接近白底的浅灰，文本不可读 - 对深色背景无效：同一组混合参数在深色模式下可能完全反向（应换用
light-dark()+ 预设两套值） - 按钮禁用时，背景和文字需同步变灰，但
color-mix()无法跨属性联动；得分别定义--disabled-bg和--disabled-text - 别把关键语义色（如错误提示红）禁用态交给
color-mix()—— 它不是渲染保障，fallback 必须是手调过的确定值
真正容易被忽略的是：你写的每一个 color-mix() 都只是在 CSS 计算阶段固化一个颜色，和手写 #6b7280 没区别；它不感知禁用状态、不响应用户偏好、也不参与 contrast 校验——想稳，就得提前算好、明确 fallback、并用 DevTools 实测真机效果。
