HTML 颜色名

写颜色最偷懒的方式，是直接说它的英文名字："把标题变 red"。现代浏览器内置了一套颜色名称（Color Names），直接当值用即可，无需记忆任何数字，是初学 HTML 时最容易上手的取色方式。

颜色名从哪来

颜色名由浏览器厂商约定的标准名称组成，共 147 个，涵盖 red、blue、green 等常用色和 pink、tomato 这类形象色。只要写对名字，所有现代浏览器都认得，写法不区分大小写，Red、RED、red 效果一样。

<p style="color:red;">红色 red</p>
<p style="color:Blue;">蓝色 Blue（大小写均可）</p>

在浏览器中显示为：第一行红色文字"红色 red"，第二行蓝色文字"蓝色 Blue"。

常用颜色名速查

不必背全 147 个，记住高频的几个就能应付大多数场景。红系 red/pink/tomato，橙黄系 orange/yellow/gold，绿系 green/lime/olive，蓝系 blue/skyblue/navy，紫系 purple/violet，以及黑灰白 black/gray/white。

<p style="color:tomato;">西红柿红 tomato</p>
<p style="color:gold;">金色 gold</p>
<p style="color:skyblue;">天蓝 skyblue</p>

在浏览器中显示为：分别显示为西红柿红、金色、天蓝色的三行文字。

灰色系：gray 与 grey

灰色有两种拼法都能用：美式 gray 与英式 grey，浏览器视作同一个颜色，随便写哪个都不算错。灰阶从浅到深还有 gainsboro、silver、darkgray 等一堆名字，按需选用即可。

<p style="color:gray;">gray 拼法</p>
<p style="color:grey;">grey 拼法（效果相同）</p>
<p style="background-color:lightgray;">浅灰背景 lightgray</p>

在浏览器中显示为：两行相同灰色的文字，以及一行浅灰背景的文字。

用在背景与边框上

颜色名不止能给文字用，背景 background-color、边框 border 同样直接写名字，一个页面往往就是几种名字色搭出来的，阅读起来比一堆 # 开头的十六进制码直观得多。

<div style="background-color:lightblue;padding:10px;">
  <p style="color:white;">白字配浅蓝底</p>
</div>

在浏览器中显示为：浅蓝色底的方块中有一行白色文字"白字配浅蓝底"。

易错点提示

• 名字只有 147 个，想要更细腻的过渡色会"词穷"，此时应改用 HEX 或 RGB。
• 拼写必须完全正确（如 skyblue 是连写的），写错浏览器就不认，颜色会失效。
• 名字色无法表达透明度，需要半透明效果请用 RGBA 等颜色值写法。

小结

颜色名是最直观的取色方式：记住 red、blue 等常用名，注意拼写与 gray/grey 通用即可直接上色。需要更丰富或半透明的颜色时，下一节的颜色值（HEX/RGB）会派上用场。