CSS 命名颜色：148 种颜色完整清单
完整的 CSS 命名颜色清单，含 hex 和 RGB 对应值。可搜索、可复制，移动端友好。
什么是 CSS 命名颜色？
CSS 内置了 148 种命名颜色，可以代替十六进制代码或 RGB 值使用。诸如 "tomato"、"rebeccapurple"、"lightseagreen" 这样的单词都是合法的 CSS 颜色值，由 W3C 定义，所有现代浏览器都支持。命名颜色让你的样式表更易读、更易记。
它们覆盖了整个色环：原色、二次色、三次色、灰色，以及一些特殊色调。每个名字都对应一个精确的 sRGB 值。有些名字很明显（"red"、"blue"、"green"），其它则出奇地具体（"papayawhip"、"lemonchiffon"、"mediumvioletred"）。
常见使用场景
- 快速原型：用颜色名设置占位符
- 可读 CSS：用 `tomato` 代替 `#ff6347`，更清晰
- 主题化：在 CSS 变量中使用语义化名字（--brand-primary: rebeccapurple）
- 邮件模板：一些客户端限制 hex，命名颜色支持更广
- 教学：命名颜色是给 CSS 初学者讲课的好材料
方法 1：使用 UtilBoxx CSS 命名颜色清单（推荐）
我们的 CSS 命名颜色清单 展示每个命名颜色对应的 hex 和 RGB，支持搜索，一键复制名字或值。步骤如下：
- 访问 utilboxx.com/zh/tools/color/named
- 浏览或搜索清单（试试 "purple" 或 "gray"）
- 点击任意色板复制其名字
- 点击 hex 值复制精确代码
- 用收藏按钮收藏最常用的颜色
这个方法的优势：
- 可搜索、按颜色分组的清单
- 名字、hex、RGB 一键复制
- 每种颜色都有可视色板
- 移动端友好布局
- 免费、无需注册、无广告
方法 2：记住基础颜色
一组小而常用的命名颜色能覆盖 80% 的日常 CSS 工作：
- red、green、blue（原色）
- yellow、cyan、magenta（二次色）
- black、white、gray
- orange、pink、purple、brown
- 浅/深变体：lightgray、darkblue 等
需要更特殊的颜色时，备一份参考清单即可。
方法 3：在样式表中使用 CSS 变量
把你的色板定义为 CSS 自定义属性，在代码中使用名字：
```css :root { --color-bg: white; --color-text: black; --color-accent: rebeccapurple; --color-warning: tomato; } ```
这既保留了命名颜色的可读性，又具备集中化设计系统的能力。
常见问题
CSS 一共有多少命名颜色？
CSS Color Module Level 4 规范中定义了 148 种命名颜色。清单包括所有历史颜色以及较新的 rebeccapurple（2014 年为纪念 Eric Meyer 的女儿而加入）。
命名颜色大小写敏感吗？
不敏感。"Tomato"、"tomato" 和 "TOMATO" 都指向同一种颜色。小写是约定风格。
什么是 rebeccapurple？
它是 `#663399`，2014 年加入 CSS 规范，用以纪念 CSS 先驱 Eric Meyer 的女儿 Rebecca Alison Meyer。它是 CSS 中唯一因非技术原因加入的命名颜色。
SVG 和 canvas 中能用命名颜色吗？
可以。SVG 和 HTML5 canvas API 都接受 CSS 命名颜色，名字和值在各处通用。
结论
CSS 命名颜色是被低估的瑰宝。想要一个快速、可搜索的参考，把 UtilBoxx CSS 命名颜色清单 加为书签是最佳选择。