HTML: HTML 颜色
在 HTML 中，颜色可以有多种表示方式。掌握不同的颜色表示方法，该方法能让您对网页设计中的每一个像素进行灵活且精确的控制。
1. 颜色表示方式概览
HTML 和 CSS 中主流的颜色表示法有三种：颜色名、十六进制和RGB。它们都能用来定义颜色，但各有适用场景：
▶ 示例
HTML
<!-- 三种方式都表示红色背景 -->
<div style="background-color: red;">颜色名：red</div>
<div style="background-color: #FF0000;">十六进制：#FF0000</div>
<div style="background-color: rgb(255,0,0);">RGB：rgb(255,0,0)</div>
2. 颜色名（Color Names）
HTML 支持 140 多个标准颜色名。最常用的包括：red、blue、green、black、white、gray、orange、purple、yellow 等。使用颜色名最直观，无需记忆编码规则：
(1) 常用颜色名一览
| 颜色名 | 十六进制 | RGB | 说明 |
|---|---|---|---|
red |
#FF0000 | rgb(255,0,0) | 红色 |
green |
#008000 | rgb(0,128,0) | 绿色（标准绿） |
lime |
#00FF00 | rgb(0,255,0) | 酸橙绿（亮绿） |
blue |
#0000FF | rgb(0,0,255) | 蓝色 |
black |
#000000 | rgb(0,0,0) | 黑色 |
white |
#FFFFFF | rgb(255,255,255) | 白色 |
gray |
#808080 | rgb(128,128,128) | 灰色 |
silver |
#C0C0C0 | rgb(192,192,192) | 银灰色 |
orange |
#FFA500 | rgb(255,165,0) | 橙色 |
yellow |
#FFFF00 | rgb(255,255,0) | 黄色 |
purple |
#800080 | rgb(128,0,128) | 紫色 |
cyan |
#00FFFF | rgb(0,255,255) | 青色 |
magenta |
#FF00FF | rgb(255,0,255) | 品红 |
pink |
#FFC0CB | rgb(255,192,203) | 粉色 |
brown |
#A52A2A | rgb(165,42,42) | 棕色 |
gold |
#FFD700 | rgb(255,215,0) | 金色 |
navy |
#000080 | rgb(0,0,128) | 海军蓝 |
teal |
#008080 | rgb(0,128,128) | 鸭绿色 |
olive |
#808000 | rgb(128,128,0) | 橄榄绿 |
coral |
#FF7F50 | rgb(255,127,80) | 珊瑚色 |
tomato |
#FF6347 | rgb(255,99,71) | 番茄色 |
skyblue |
#87CEEB | rgb(135,206,235) | 天蓝色 |
violet |
#EE82EE | rgb(238,130,238) | 紫罗兰 |
📌 小贴士： 颜色名简单直观，适合快速原型和教学场景。但在生产环境中，颜色名可选范围有限且不够精确，更推荐使用十六进制或 RGB 表示法。
3. 十六进制（Hex）
十六进制颜色以 # 开头，格式为 #RRGGBB，其中 RR 表示红色值、GG 表示绿色值、BB 表示蓝色值，取值范围为 00 ~ FF（十六进制）。如果每组值相同，可以简写为三位 #RGB：
(1) 常用颜色十六进制值
| 颜色 | 十六进制 | RGB 值 | 说明 |
|---|---|---|---|
| 纯红 | #FF0000 | 255,0,0 | 红通道最大，其他为0 |
| 纯绿 | #00FF00 | 0,255,0 | 绿通道最大，其他为0 |
| 纯蓝 | #0000FF | 0,0,255 | 蓝通道最大，其他为0 |
| 纯黑 | #000000 | 0,0,0 | 所有通道为0 |
| 纯白 | #FFFFFF | 255,255,255 | 所有通道最大 |
| 天蓝 | #87CEEB | 135,206,235 | 浅蓝色 |
| 深蓝 | #00008B | 0,0,139 | 深蓝色 |
| 珊瑚色 | #FF7F50 | 255,127,80 | 橙粉色 |
| 番茄色 | #FF6347 | 255,99,71 | 红橙色 |
| 金色 | #FFD700 | 255,215,0 | 金黄色 |
| 橄榄色 | #808000 | 128,128,0 | 暗黄色 |
| 栗色 | #800000 | 128,0,0 | 暗红色 |
| 海军蓝 | #000080 | 0,0,128 | 深蓝色 |
| 紫罗兰 | #EE82EE | 238,130,238 | 紫粉色 |
| 青绿色 | #00CED1 | 0,206,209 | 深青色 |
▶ 示例
HTML
<!-- 六位十六进制 -->
<div style="background-color: #FF5733;">#FF5733（橙色）</div>
<div style="background-color: #33A1FF;">#33A1FF（蓝色）</div>
<div style="background-color: #2ECC71;">#2ECC71（绿色）</div>
<!-- 三位简写（每组值相同） -->
<div style="background-color: #F00;">#F00 等价于 #FF0000（红色）</div>
<div style="background-color: #0F0;">#0F0 等价于 #00FF00（绿色）</div>
<div style="background-color: #00F;">#00F 等价于 #0000FF（蓝色）</div>
💡 三位简写规则：
#RGB 会自动扩展为 #RRGGBB。例如 #F0A → #FF00AA。只有每组值相同时才能简写，#FF5733 不能简写。
4. RGB 与 RGBA
rgb(red, green, blue) 函数使用 0~255 的十进制数表示红、绿、蓝三个通道。相比十六进制，RGB 更接近人类对数字的直观理解。rgba() 在 RGB 基础上增加了 Alpha 透明度通道：
(1) RGB 值与颜色对应
| RGB 值 | 颜色 | 说明 |
|---|---|---|
| rgb(255, 0, 0) | 红色 | 红通道最大，其他为0 |
| rgb(0, 255, 0) | 绿色 | 绿通道最大，其他为0 |
| rgb(0, 0, 255) | 蓝色 | 蓝通道最大，其他为0 |
| rgb(255, 255, 0) | 黄色 | 红+绿混合 |
| rgb(0, 255, 255) | 青色 | 绿+蓝混合 |
| rgb(255, 0, 255) | 品红 | 红+蓝混合 |
| rgb(255, 255, 255) | 白色 | 所有通道最大 |
| rgb(0, 0, 0) | 黑色 | 所有通道为0 |
| rgb(128, 128, 128) | 灰色 | 所有通道中等 |
| rgb(255, 165, 0) | 橙色 | 红+部分绿 |
| rgb(255, 192, 203) | 粉色 | 红+少量绿蓝 |
| rgb(165, 42, 42) | 棕色 | 暗红+少量绿 |
| rgb(0, 128, 128) | 鸭绿色 | 绿+蓝各半 |
| rgb(128, 0, 128) | 紫色 | 红+蓝各半 |
| rgb(0, 0, 128) | 海军蓝 | 深蓝色 |
▶ 示例
HTML
<div style="background-color: rgb(255, 99, 71);">
rgb(255, 99, 71) — 番茄红
</div>
<div style="background-color: rgb(60, 179, 113);">
rgb(60, 179, 113) — 海洋绿
</div>
<!-- rgba 增加透明度，最后一个参数 0~1 -->
<div style="background-color: rgba(255, 0, 0, 0.3);">
半透明红色（30% 不透明度）
</div>
<div style="background-color: rgba(0, 0, 255, 0.6);">
半透明蓝色（60% 不透明度）
</div>
💡 RGB 混合规律： 红+绿=黄，红+蓝=品红，绿+蓝=青，红+绿+蓝=白。理解这个规律有助于快速估算颜色值。
5. HSL
hsl(hue, saturation, lightness) 是一种更符合人类直觉的配色方式。Hue 是色相（0~360 度），Saturation 是饱和度（百分比），Lightness 是亮度（百分比）。同样 hsla() 支持透明度：
(1) HSL 色相环
| 角度 | 颜色 | HSL 值 | 说明 |
|---|---|---|---|
| 0° | 红色 | hsl(0, 100%, 50%) | 色相起点 |
| 30° | 橙色 | hsl(30, 100%, 50%) | 红→黄过渡 |
| 60° | 黄色 | hsl(60, 100%, 50%) | 红+绿 |
| 90° | 黄绿 | hsl(90, 100%, 50%) | 黄→绿过渡 |
| 120° | 绿色 | hsl(120, 100%, 50%) | 色相中点 |
| 150° | 青绿 | hsl(150, 100%, 50%) | 绿→青过渡 |
| 180° | 青色 | hsl(180, 100%, 50%) | 绿+蓝 |
| 210° | 天蓝 | hsl(210, 100%, 50%) | 青→蓝过渡 |
| 240° | 蓝色 | hsl(240, 100%, 50%) | 色相终点 |
| 270° | 紫色 | hsl(270, 100%, 50%) | 蓝→红过渡 |
| 300° | 品红 | hsl(300, 100%, 50%) | 蓝+红 |
| 330° | 玫红 | hsl(330, 100%, 50%) | 品红→红过渡 |
| 360° | 红色 | hsl(360, 100%, 50%) | 回到起点 |
(2) 饱和度与亮度调节
| 调整 | 效果 | 示例 |
|---|---|---|
| 饱和度 100% | 最鲜艳 | hsl(0, 100%, 50%) = 纯红 |
| 饱和度 50% | 较柔和 | hsl(0, 50%, 50%) = 暗红 |
| 饱和度 0% | 灰色 | hsl(0, 0%, 50%) = 灰色 |
| 亮度 50% | 正常 | hsl(0, 100%, 50%) = 纯红 |
| 亮度 100% | 全白 | hsl(0, 100%, 100%) = 白色 |
| 亮度 0% | 全黑 | hsl(0, 100%, 0%) = 黑色 |
▶ 示例
HTML
<!-- hsl 调色示例 -->
<div style="background-color: hsl(0, 100%, 50%);">
hsl(0, 100%, 50%) — 纯红色
</div>
<div style="background-color: hsl(120, 100%, 50%);">
hsl(120, 100%, 50%) — 纯绿色
</div>
<div style="background-color: hsl(240, 100%, 50%);">
hsl(240, 100%, 50%) — 纯蓝色
</div>
<div style="background-color: hsl(200, 80%, 60%);">
hsl(200, 80%, 60%) — 柔和的蓝色
</div>
<!-- hsla 增加透明度 -->
<div style="background-color: hsla(0, 100%, 50%, 0.4);">
hsla(0, 100%, 50%, 0.4) — 半透明红色
</div>
💡 设计师之选： HSL 对设计师更友好。只需调整色相（hue）就能轮转不同颜色，调节饱和度（saturation）控制鲜艳程度，调节亮度（lightness）控制明暗——三个维度即可轻松生成完整的配色方案。
❓ 常见问题
Q 十六进制（
#FF5733）和RGB（rgb(255, 87, 51)）有什么区别？A 两者表示的是同一种颜色，只是写法不同。十六进制用6位16进制数表示，每两位代表红、绿、蓝通道（00-FF）；RGB用三个0-255的十进制数表示。十六进制更简洁（6个字符），RGB更直观（直接看到数值）。实际开发中，十六进制更常用；需要透明度时用RGBA。
Q 什么时候用RGBA？透明度怎么计算？
A RGBA在RGB基础上增加了Alpha通道（透明度），值范围0（完全透明）到1（完全不透明）。使用场景：1）半透明背景（如遮罩层、毛玻璃效果）；2）文字叠加在图片上时增加可读性；3）悬浮提示框的背景。透明度计算：
rgba(0, 0, 0, 0.5)表示50%透明的黑色。Q HSL比RGB好在哪里？
A HSL（色相、饱和度、亮度）更符合人类对颜色的直觉理解。RGB需要同时调整三个数值才能得到想要的颜色，而HSL可以：1）只调色相（0-360度）就能轮转整个色谱；2）只调饱和度控制鲜艳程度；3）只调亮度控制明暗。设计师通常用HSL生成配色方案，开发者通常用RGB/十六进制。
Q 颜色名可以用中文吗？比如
红色？A 不可以。HTML/CSS只支持英文颜色名（如
red、blue、green），而且只有147个标准颜色名。中文颜色名（如红色）不会被识别。建议：1）简单场景用英文颜色名；2）精确场景用十六进制或RGB；3）需要大量颜色时用CSS变量管理。颜色名的局限性：不同浏览器对同一颜色名的渲染可能略有差异。📖 小节
- 颜色名（如 red、blue）：简单直观，但精度有限
- 十六进制（如 #FF5733）：Web 开发中最常用的精确表示法
- RGB / RGBA：rgb() 用 0~255 表示三通道，rgba() 增加透明度
- HSL / HSLA：hsl() 以色相/饱和度/亮度调色，hsla() 增加透明度
- Alpha 通道（RGBA/HSLA）实现半透明效果，值范围 0（透明）~ 1（不透明）
📝 作业
- 调色板：用三种不同的颜色表示法（颜色名、十六进制、RGB）分别创建三个彩色方块，每个方块 100×100px，并排显示。
- 渐变透明：用 rgba() 创建一个背景颜色从完全不透明到完全透明的水平渐变效果（提示：使用
background: linear-gradient()）。
