CSS 颜色名

功能

• 148 个 CSS 命名颜色，完整覆盖 CSS Color 4 的标准色名表
• 由名字查：输入 tomato，得到色值、RGB、HSL 与 `color: tomato` 的写法
• 由色值查名字：粘贴 #2f4f4f，看它有没有标准名字
• 标出 9 组同色异名（aqua / cyan、fuchsia / magenta、七组 gray / grey）
• 每个颜色都给出十六进制、RGB 与 HSL，可以直接粘进样式表
• 色块直接画在结果行上 —— 不用自己在脑子里把色号变成颜色
• 每个颜色标出配黑字还是白字更清楚，并给出 WCAG 对比度与是否达到 AA 级
• 按色相分组浏览：红系、橙与棕系、黄系、绿系、蓝与青系、紫系、无彩色
• 按名字片段查：输入 dark 列出全部深色
• 148 个名字全在可搜索的下拉里，提示里显示色值
• 留空看整张色表，可以当色卡浏览
• 粘贴容错：正文例子的「」引号、输入法打出的全角都不影响查询

使用方法

1. 输入颜色名，例如 tomato 或 rebeccapurple
2. 或者粘贴一个色值，例如 #2f4f4f，看它有没有标准名字
3. 想知道某一类有哪些名字就输入色相分组，例如「紫系」
4. 留空则列出全部 148 个名字，按色相分组

常见问题

为什么同一个色值会有两个名字？该用哪个？

因为 CSS 的颜色名表来自两处合并：HTML 的历史颜色名与 SVG 的颜色名，两边各有一套，还混进了英美拼写的差异。于是出现 9 组同色异名 —— `aqua`（HTML）与 `cyan`（SVG）、`fuchsia` 与 `magenta`，以及七组 `gray` / `grey` 这类拼写之差。用哪个都可以，浏览器一视同仁。 实践上建议：跟项目里既有的写法保持一致（同一个代码库里混用 `gray` 与 `grey` 会让人以为它们不同），英美拼写按团队的语言习惯选一个。

颜色名和十六进制，写代码时该用哪个？

颜色名适合「一眼看出是什么色」的场合：`color: tomato` 比 `color: #ff6347` 好读，代码评审时一眼就懂，也不需要查。但颜色名只有 148 个，稍微精确一点的颜色就没有名字了。所以实际做法通常是混用：先用颜色名表达意图（强调色、危险色），需要品牌色或精确值时用十六进制或 `oklch()` 这类现代写法。另外要留意：颜色名不可主题化 —— 深色模式下想让 `tomato` 变成另一个红是做不到的，而 CSS 变量可以。

这些名字能用在所有浏览器里吗？

148 个名字是 CSS Color Module Level 4 的标准内容，现代浏览器都支持。唯一需要留意的是 `rebeccapurple` —— 它是 Level 4 才加的（为纪念 Rebecca Meyer），很老的浏览器（IE 全系）不认识它，会当作无效值忽略掉整条声明。如果还在支持很老的浏览器，把 `rebeccapurple` 当作需要加回退的颜色即可，其余 147 个从 CSS 最早期就在了。

为什么没有收录蜡笔、彩铅那种色卡？

因为没有可信的来源。蜡笔与彩铅的色名是各家厂商的产品数据（对应各自的色号体系），既没有公开标准，也不是可以随意复制的公共知识 —— 而一份凭空编出来的「48 色蜡笔色卡」，色名与色值都是我们自己定的，看起来像那么回事却对不上任何一盒真的蜡笔，那种表比没有更糟。这里收录的是 W3C 的标准色名：它是公开规范，148 个名字在浏览器里都能直接用，比任何厂商色卡都更适合屏幕上的工作。

由色值查名字时，为什么有的色值说「没有名字」？

因为 148 个名字对应的色值是离散的，而 RGB 有 1600 多万种颜色。任何不在那 139 个色值里的颜色，就是没有标准名字 —— 这不是错误，也不影响使用：直接把这个色值写进样式表就行，CSS 不需要名字。这个工具在这一支上刻意说的是「它没有名字」而不是「你输入错了」，因为那才是事实。