命名颜色是w3c定义的149个固定rgb硬编码别名，不可计算、不可扩展、不支持主题切换与无障碍校验，必须用语义化css自定义属性替代。
命名颜色不是变量，只是静态别名
你写 color: tomato，浏览器立刻替换成 rgb(255, 99, 71)，之后就再无关联。它不绑定设计意图，不能被主题切换覆盖，也不能用 color-mix() 调整明暗。更关键的是：tomato 这个词本身没告诉你它是“错误提示色”还是“装饰性高亮”，下次看到它，你得翻三遍代码才能确认用途。
- 所有命名颜色（
red、lightgray、rebeccapurple）都是 W3C 定义的 149 个固定 RGB 值的硬编码别名，不可计算、不可扩展 -
rgba(tomato, 0.8)是非法语法；color-mix(in srgb, tomato 70%, white)直接报错——函数只接受可解析结构，不认名字 - 深色模式下，
lightgray可能被 Windows 高对比度模式强制映射为纯黑，而#d3d3d3始终稳定
拼写和大小写静默失效，查不到也报不了错
浏览器只认全小写、无空格、无连字符的标准名。写成 LightGray、rebeccapurple（少一个 e）、midnight-blue，结果都是：样式被划掉，元素回退到继承色或默认色，DevTools 不提示、控制台不报错。
- 设计稿里写的 “Cool Gray” 直接复制进 CSS → 浏览器当无效值忽略
-
gray和grey虽然值相同，但它们是两个独立关键词；团队混用会导致 IDE 全局搜索漏掉一半 - PostCSS 或 cssnano 老版本可能直接剔除未收录的颜色名（如
RebeccaPurple），构建后样式消失却无警告
无法参与主题切换与无障碍校验
品牌色管理需要响应式适配、对比度自动校验、运行时动态计算——命名颜色在这三方面全部缺席。
- 写
.btn--danger-red { background: red; }，切换深色模式时，这个red不会变；你只能新建类、改模板、重写 JS 判断 - 无障碍检测工具（如 axe-core）跳过对
tomato的对比度校验，只认#ff6347、rgb()、hsl()等可计算格式 - JS 脚本读取
getComputedStyle(el).color返回"rgb(255, 0, 0)"，还得额外做字符串解析才能还原语义；而var(--color-error)可直接读取原始变量值用于逻辑判断
真正可用的替代方案只有 CSS 自定义属性
品牌色必须是可声明、可覆盖、可计算、可校验的实体。唯一可靠路径是用语义化变量封装，并在 :root 中统一管理。
- 命名要反映用途，不是物理值：
--color-brand-accent比--color-blue-500更可持续 - 值必须用十六进制带
#前缀小写：#2563eb，避免旧 Safari 解析歧义 - 配合媒体查询或
data-theme动态重设：:root[data-theme="dark"] { --color-brand-accent: #3b82f6; } - 禁用所有命名色，用
stylelint-color-no-named在提交前拦截；构建阶段用 css-tree 静态分析var(--xxx)是否漏定义
red，而是让所有人下意识只动那几个变量，不动颜色字面量本身。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
