HTML 颜色名称完整指南:147 个 CSS 颜色名怎么用,怎么和 hex 对应

写网页的时候,颜色其实有两种写法。一种是 hex,比如 #FF6347;另一种是直接写英文单词,比如 tomato。后者就是 CSS 命名颜色。很多人只记得 red、green、blue 这几个,其实标准里一共有 147 个,从最朴素的 red 到 skyblue、tomato、cornflowerblue 这种带画面感的名字都有。

这篇把这 147 个名字讲清楚:它们和 hex 是怎么对应的,什么时候写名字比写 hex 划算,以及怎么不靠死记就能快速查到、复制。

147 个命名颜色到底是哪来的

这批名字来自 CSS Color Module Level 3,IE 4 在 1997 年就实现了,到今天所有主流浏览器都一字不改地支持。它们不只能写在 CSS 里,HTML 属性、SVG 的 fill、Canvas 的 fillStyle 全都认。

为什么是 147 个这么个奇怪的数字?因为这份清单是两份历史清单合并来的:一份是 HTML 4.0 的"VGA 16 色"(aqua、lime、navy、teal 这些),另一份是 X11 的颜色表。合并时为了向后兼容,重复的名字都留了下来,所以你会看到 aqua 和 cyan 都是 #00FFFF,fuchsia 和 magenta 都是 #FF00FF,每对 *gray 和 *grey 也完全一样。挑读起来顺眼的那个写就行,渲染结果没有任何区别。

名字和 hex 的对应关系

每个命名颜色背后都是一个确定的 hex 值,记住几个常用的对应,平时随手就能写:

red = #FF0000,纯红,三原色里最干脆的那个
tomato = #FF6347,番茄红,比纯红柔一点,偏橙
skyblue = #87CEEB,天蓝
cornflowerblue = #6495ED,矢车菊蓝,做按钮链接很耐看
crimson = #DC143C,深红,接近但不等于品牌红
gold = #FFD700,金黄

举个具体例子。你想要一个比纯红柔和、偏橙一点的警示色,与其在取色器里一格一格调到 #FF6347,不如直接写 tomato。两者渲染出来是同一个像素,但 tomato 这个词本身就告诉了下一个读代码的人"这是个偏橙的番茄红",而 #FF6347 只是一串数字,得复制进取色器才知道长什么样。

什么时候该用命名色,什么时候别用

我自己的习惯是这样分的。临时补一个没接设计系统的页面时,我几乎只用命名色。上周改一个裸 CSS 的后台管理页,要个柔和的红色提示框,我没去翻 hex,直接写了 background: mistyrose; border-color: salmon,两个词搞定,而且下一个看 CSS 的同事一眼就懂我要的是哪种红。错误背景、代码示例、MDN 那种教学片段、给样式邮件配色,这些场景命名色都是最短的写法。

但有三种情况别用命名色。第一,要精确对上品牌色时对不上,147 个颜色是固定的,crimson 接近甲方的红但不是那个红。第二,设计系统里需要 red-500、red-600 这种色阶,命名色给不了这层浓淡结构。第三,命名色清单里的 HSL 亮度不是感知均匀的,拿 lightblue 到 darkblue 硬拼渐变会"凸凹"不平。这几种情况老老实实用 token 或者自己生成色阶。

怎么快速查找和复制

147 个名字背不下来很正常,也没必要背。关键是查得快。在 HTML 颜色代码表里,每个颜色一张卡片,带真色大色块、英文名、中文名,还有 hex / rgb() / hsl() 三种格式各配一个一键复制按钮。

几个查找技巧:

按英文名或中文名搜,输入"红"或 red 就把红色系挑出来
按 hex 片段搜,输入 #ff 一秒挑出所有红分量高的颜色
整张表能按色相排(沿 0°→360° 走一遍彩虹)、按亮度排(最白到最黑)、按饱和度排,做速查表截图时特别好用

需要在名字、hex、RGB、HSL 之间来回换算,或者要把一个具体 hex 反查成最接近的命名色,可以配合颜色格式转换器一起用,两个工具搭着,从"想要某种颜色"到"拿到能直接粘的代码"基本不用离开页面。

一个常被忽略的点:对比度

最后提醒一句,命名色好读不等于好看的搭配都可读。goldenrod 配 cornsilk 看着挺协调,实际对比度只有 1.6:1,远低于 WCAG AA 要求的 4.5:1。把一个命名色当文字色放到另一个上之前,先算一下对比度,别等无障碍测试打回来再改。

Made by Toolora · Updated 2026-06-13