color-mix()仅支持不透明颜色字面量（如#ff0000、rgb()、hsl()），不接受red等关键字、rgba()、hsla()、currentcolor或css变量；权重必须显式标注且总和为100%，色彩空间须明确声明in srgb或in oklch。
颜色关键字无法参与 CSS 颜色函数运算，也无法被 JS 动态解析为可计算数值，直接堵死了主题定制的底层通路。
color: red 不能用于 color-mix() 或 rgba() 衍生
浏览器把 red 解析成 rgb(255, 0, 0) 后就丢弃了原始关键字，后续所有颜色操作都失去上下文：
-
rgba(red, 0.8)是非法语法，必须先写成rgba(255, 0, 0, 0.8)才能生效 -
color-mix(in srgb, red 70%, white 30%)不被支持；只有color-mix(in srgb, #ff0000 70%, #ffffff 30%)或color-mix(in srgb, rgb(255 0 0) 70%, white 30%)可用 - 像
lighten(red, 10%)这类 Sass 函数也失效——Sass 编译时根本拿不到 red 的 RGB 分量，只当它是字符串
JS 读取不到原始关键字，主题切换逻辑会断链
getComputedStyle(el).color 总是返回 rgb(255, 0, 0)，哪怕你写的是 color: red 或 color: #ff0000。这意味着：
- 无法通过字符串匹配判断当前是否为“红色主题”——
el.style.color === 'red'永远为false - 深色模式下想自动反色：
if (current === 'red') setTo('darkred')这种逻辑完全不可行 - 无障碍对比度检测工具（如 axe-core）跳过对
red的校验，只处理#ff0000、rgb()、hsl()等可解析格式
关键字不支持变量化与作用域隔离
CSS 自定义属性（--color-primary）要求值是可传递、可覆盖、可推导的，而关键字天生是硬编码终点：
- 不能作为
var(--color-primary)的合法值：写--color-primary: red没问题，但后续无法用它生成--color-primary-hover: color-mix(...) - Bootstrap 5 中
--bs-primary-rgb必须是74, 111, 165这样的三元组，red无法被拆解出 R/G/B 数字 - 设计系统 token 工具（如 Style Dictionary）导出目标全是 HEX/RGB/HSL，关键字需额外映射表，增加构建失败风险
真正容易被忽略的点是：即使你只在一处用了 tomato，只要它出现在任何需要动态计算、检测或转换的上下文中，整条主题链就会卡死——不是报错，而是静默失效。这种问题在线上环境极难定位。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
