HTML 颜色

黑色文字配白底太久会单调，颜色让网页有性格、有层次。HTML 本身没有独立的"颜色标签"，颜色是通过属性的值写出来的——给文字、背景、边框指定颜色值，浏览器就会按值渲染，是美化网页的第一步。

颜色用在哪里

颜色主要加在三个地方，写法都是在对应元素上设置：color 是文字颜色，background-color 是背景颜色，border-color 是边框颜色，三者常配合使用。

<h1 style="color:blue;">蓝色标题</h1>
<p style="background-color:yellow;">黄底文字</p>
<p style="border:2px solid red;">红框内容</p>

在浏览器中显示为：蓝色大标题、黄底的一段文字，以及带红色边框的一段文字。

颜色的三种写法

同一个颜色有三种常见写法，效果完全相同，任选其一：

• 颜色名称：直接写英文名，如 red、green，简单但可选有限。
• 十六进制（HEX）：#RRGGBB 形式，如 #FF0000 表示纯红。
• RGB：rgb(红, 绿, 蓝)，三个值范围 0~255，如 rgb(255,0,0)。

<p style="color:red;">名称写法：red</p>
<p style="color:#FF0000;">HEX 写法：#FF0000</p>
<p style="color:rgb(255,0,0);">RGB 写法：rgb(255,0,0)</p>

在浏览器中显示为：三行都是红色的文字，只是写法不同。

用一个例子串起来

把背景、文字、边框三种颜色组合到一个"卡片"里，能直观看到颜色搭配的效果，这也是写页面时最常用的练习。

<div style="background-color:#f0f0f0;padding:15px;
            border:3px solid #336699;">
  <h3 style="color:#336699;">颜色卡片</h3>
  <p style="color:#666666;">灰字正文，蓝边框，浅灰底。</p>
</div>

在浏览器中显示为：一个浅灰底、深蓝边框的方块，内有深蓝标题和灰色正文。

选择颜色的技巧

• 十六进制中 #RRGGBB 每两位相同时可缩写为三位，如 #336699 写为 #369。
• R、G、B 都为 0 是黑色，都为 255（即 #FFFFFF）是白色。
• 拿不准颜色时，可用取色器吸取设计稿上的颜色，再抄成 HEX 或 RGB 值。
• 颜色名、HEX、RGB 的更多细节与色表，将在"颜色名"与"颜色值"两节详细讲解。

小结

颜色写在 style 里，三个常用落点是文字 color、背景 background-color、边框 border-color；值的写法有颜色名、HEX、RGB 三种，掌握任一种即可给页面随心"上色"。