CSS: CSS 颜色
颜色是网页设计中最基本的视觉元素之一。CSS 提供了多种表示颜色的方式，从最简单的颜色名称到灵活的 HSL，每种都有其适用场景。
颜色值速查表
| 格式 | 示例 | 说明 |
|---|---|---|
| 颜色名称 | red, blue, tomato, skyblue |
直观但颜色有限（约 140 种） |
| HEX | #ff0000, #333, #e3f2fd |
最常用的格式，6 位/3 位缩写 |
| RGB | rgb(255, 0, 0), rgb(51, 51, 51) |
红绿黄各 0~255 的数字值 |
| RGBA | rgba(255, 0, 0, 0.5) |
RGB + 透明度（alpha: 0~1） |
| HSL | hsl(0, 100%, 50%) |
色相(0~360) + 饱和度(0~100%) + 亮度(0~100%) |
| HSLA | hsla(0, 100%, 50%, 0.5) |
HSL + 透明度 |
opacity |
0.5, 1, 0.25 |
整体透明度（影响元素所有内容，包括子元素） |
1. 颜色名称
CSS 支持 140 多种预定义的颜色名称，使用起来最直观：
▶ 示例
HTML
<style>
p {
color: red;
}
h1 {
color: blue;
}
h2 {
color: green;
}
</style>
<p>这是一个段落示例。</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
常用颜色名称：
| 颜色名称 | 中文名 | 颜色名称 | 中文名 |
|---|---|---|---|
| red | 红色 | orange | 橙色 |
| yellow | 黄色 | green | 绿色 |
| blue | 蓝色 | purple | 紫色 |
| black | 黑色 | white | 白色 |
| gray | 灰色 | tomato | 番茄红 |
| gold | 金色 | dodgerblue | 道奇蓝 |
2. 十六进制颜色值
这是网页中最常用的一种颜色表示方式。以 # 开头，后面跟 6 位或 3 位十六进制字符（0-9, A-F）：
▶ 示例
HTML
<style>
h1 {
color: #ff0000; /* 红色 */
}
h2 {
color: #00ff00; /* 绿色 */
}
h3 {
color: #0000ff; /* 蓝色 */
}
p {
color: #333; /* 深灰色（简写） */
}
</style>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<p>这是一个段落示例。</p>
格式为 #RRGGBB：
- RR：红色通道（00-FF）
- GG：绿色通道（00-FF）
- BB：蓝色通道（00-FF）
如果每两位相同，可以简写为 3 位，如 #ff0000 可以简写为 #f00。
3. RGB 和 RGBA
RGB 使用 rgb() 函数表示颜色，三个参数分别代表红、绿、蓝的强度：
▶ 示例
HTML
<style>
p {
color: rgb(255, 0, 0); /* 红色 */
}
h1 {
color: rgb(0, 255, 0); /* 绿色 */
}
h2 {
color: rgb(0, 0, 255); /* 蓝色 */
}
</style>
<p>这是一个段落示例。</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
每个参数的值范围是 0 到 255，也可以用百分比（0% 到 100%）。
RGBA是 RGB 的扩展，增加了一个 Alpha 通道用于控制透明度（0.0 完全透明 ~ 1.0 完全不透明）：
▶ 示例
HTML
<style>
p {
color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
background: rgba(0, 0, 0, 0.1); /* 10%不透明的黑色背景 */
}
</style>
<p>这是一个段落示例。</p>
4. HSL 和 HSLA
HSL 代表色相（Hue）、饱和度（Saturation）和亮度（Lightness）：
▶ 示例
HTML
<style>
p {
color: hsl(0, 100%, 50%); /* 红色 */
}
h1 {
color: hsl(120, 100%, 50%); /* 绿色 */
}
h2 {
color: hsl(240, 100%, 50%); /* 蓝色 */
}
</style>
<p>这是一个段落示例。</p>
<h1>一级标题</h1>
<h2>二级标题</h2>
参数说明：
- 色相（Hue）：0-360 度，0=红色，120=绿色，240=蓝色
- 饱和度（Saturation）：0%-100%，0%=灰色，100%=纯色
- 亮度（Lightness）：0%-100%，0%=黑色，50%=正常，100%=白色
HSLA 增加透明度：
▶ 示例
HTML
<style>
p {
color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
}
</style>
<p>这是一个段落示例。</p>
HSL 的优势在于：你可以很容易地通过调整亮度值来创建同一色系的不同深浅：
▶ 示例
HTML
<style>
/* 同一蓝色系的不同亮度 */
.light-blue {
color: hsl(240, 100%, 70%); /* 浅蓝 */
}
.medium-blue {
color: hsl(240, 100%, 50%); /* 中蓝 */
}
.dark-blue {
color: hsl(240, 100%, 30%); /* 深蓝 */
}
</style>
<div class="light-blue">浅蓝色背景区域</div>
<div class="medium-blue">中蓝色背景区域</div>
<div class="dark-blue">深蓝色背景区域</div>
5. 不透明度属性 opacity
除了在颜色值中控制透明度，还可以使用 opacity 属性单独控制元素的不透明度：
▶ 示例
HTML
<style>
.half-opaque {
opacity: 0.5; /* 50%不透明度 */
}
.invisible {
opacity: 0; /* 完全透明（不可见） */
}
</style>
<div class="half-opaque">半透明效果（不透明度 50%）</div>
<div class="invisible">不可见元素（占位隐藏）</div>
注意：opacity 会影响整个元素（包括所有子元素），而 RGBA/HSLA 只影响应用了该颜色值的属性。
6. currentColor 关键字
currentColor 关键字代表元素当前继承的 color 值，可以用来保持颜色一致：
▶ 示例
HTML
<style>
.card {
color: #e74c3c; /* 红色 */
border: 2px solid currentColor; /* 边框也是红色 */
}
.card .icon {
fill: currentColor; /* 图标也是红色 */
}
</style>
<div class="card">Card</div>
<div class="card">Card</div>
<div class="icon">图标标识</div>
7. 颜色选择小技巧
- 十六进制：最常用，适合精确指定颜色
- RGBA：适合需要透明度的场景（如遮罩层）
- HSL：适合需要调整同一色系亮度的场景
- 颜色名称：适合快速原型或简单的颜色
❓ 常见问题
Q 十六进制颜色和 RGB 颜色哪种好用？
A 十六进制（#FF5733）是 Web 开发中最常用的写法，代码短、复制方便。RGB（rgb(255,87,51)）更接近人类对数字的理解。两者本质等价，常用哪个都可以，团队统一就行。
Q HSL 颜色模式有什么优势？
A HSL 更符合人的直觉：调色相（hue）换颜色，调饱和度（saturation）控制鲜艳度，调亮度（lightness）控制明暗。设计师喜欢 HSL 是因为可以轻松生成一套配色方案。
Q 颜色透明度怎么设置？
A 用 rgba() 或 hsla() 的第四个参数，0 完全透明，1 完全不透明。也可以单独写 opacity 属性，但它会影响整个元素（包括里面的文字），rgba 只影响背景色本身。
📖 小节
- CSS 提供了多种表示颜色的方式：颜色名称最简单直接，十六进制最常用，RGB/RGBA 适合需要透明度的场景，HSL/HSLA 则方便调整色系
- 在实际开发中，十六进制和 RGBA 是使用最频繁的
- VS Code 等编辑器中会有颜色预览面板，点击色块就能直观地调整颜色
📝 作业
- 创建一个 HTML 页面，在页面中展示至少 6 种不同颜色的段落，每种段落使用不同的颜色表示法（颜色名称、十六进制、RGB、RGBA、HSL、HSLA）。
- 使用
opacity属性创建一个"淡出"效果——让一个元素从完全不透明渐变到半透明。 - 用 HSL 创建一组"同色系"颜色块（比如从浅蓝到深蓝共 5 个色块），观察只改变亮度值的效果。
