最可靠的方式是直接查W3C官方定义的140个标准命名颜色，避免使用非标准名（如coolgray）、驼峰写法（slateBlue）或自定义名（Charcoal Gray），推荐用css-named-colors库、PostCSS插件或编译期处理确保准确性。
直接查 W3C 标准命名颜色表最可靠
浏览器支持的 named colors（如 tomato、rebeccapurple）有明确规范，W3C 官方定义了 140 个标准名，不是所有“看着像”的名字都合法。别依赖记忆或第三方网站——它们可能混入非标准名（比如 coolgray 或 darkbluegrey），这些在 CSS 中会回退为 transparent 或触发解析错误。
实操建议：
- 打开 W3C 官方文档：CSS Color Module Level 4 – Named Colors，直接 Ctrl+F 搜索颜色名
- 本地快速查：复制粘贴这段代码到浏览器控制台，运行后输入
getComputedStyle(document.body).color = 'tomato'并检查 computed 值，但仅适用于已渲染的颜色名 - 开发时用 VS Code 插件
Color Highlight，它内置标准色表，悬停即显示#ff6347
JavaScript 动态转换要避开 getComputedStyle 的陷阱
想用 JS 把 'lightseagreen' 变成 '#20b2aa'？别用 getComputedStyle + 临时元素——它只对已应用到 DOM 的颜色生效，且受继承、!important 和媒体查询影响，返回值可能是 RGB 形式（如 rgb(32, 178, 170)），还得再转一次。
更稳的做法是查表而非渲染：
立即学习“前端免费学习笔记（深入）”；
- 用现成小库：npm 安装
css-named-colors，调用namedColors.get('slateblue')直接得'#6a5acd' - 自己维护映射对象（约 140 行）：从 W3C 表格导出 JSON，key 是颜色名，value 是小写十六进制字符串，避免大小写敏感问题
- 注意：CSS 允许大小写不敏感，但
slateBlue这种驼峰写法不是标准名，必须用slateblue
PostCSS / Sass 编译期替换比运行时更安全
如果你在构建流程里需要把命名色转成 HEX（比如生成主题变量、校验设计系统一致性），别等到 JS 运行时——编译期处理没兼容性风险，还能提前报错。
示例（PostCSS 插件 postcss-named-colors）：
/* 输入 */
.text { color: mediumvioletred; }
<p>/<em> 输出（自动转） </em>/
.text { color: #c71585; }
要点：
- 插件默认只处理标准名，遇到
blanchedalmond这类冷门名也不会漏掉 - Sass 用户可用
@function named-to-hex($name)配合 map-get，但需手动同步标准色表，更新滞后风险高 - CI 流程中加一行校验脚本：遍历所有 CSS 文件，grep 出
color:后的单词，用css-named-colors库验证是否在标准列表里
别忽略透明度和系统色带来的例外
标准命名颜色全都不带 alpha，rgba(255, 99, 71, 0.5) 不能写成 rgba(tomato, 0.5)——语法非法。另外，Canvas 的 ctx.fillStyle = 'rebeccapurple' 是支持的，但某些旧版 Electron 或 WebView 可能不认 rebeccapurple（它是 CSS4 新增，IE 完全不支持）。
真正容易被跳过的点：
-
system colors如ButtonFace、Highlight不是固定 HEX，随 OS 主题变，无法静态查表 -
currentcolor是动态继承值，不是命名颜色，别往色表里塞 - 设计稿给的 “Charcoal Gray” 这类自定义名，必须人工映射，不存在通用转换逻辑
