CSS 颜色详解

深入学习 color/background-color/opacity · 难度：入门 · +10XP

CSS 颜色详解

颜色是网页设计中最基础也最重要的元素。CSS 支持多种颜色表示方式：颜色名称、十六进制（Hex）、RGB/RGBA、HSL/HSLA 和 HWB 等。了解每种方式的优缺点，能让你在不同场景中选择最合适的颜色格式。

颜色名称（Named Colors）

CSS 支持约 140 种标准颜色名称，如 red、blue、green 等。这是最直观但灵活性最低的方式。

p { color: red; }
div { background-color: lightblue; }
h1 { color: tomato; }
span { color: darkcyan; }

十六进制颜色（Hex）

Hex 颜色以 # 开头，后跟 3、4、6 或 8 个十六进制字符。这是 Web 开发中最常用的颜色格式。

p { color: #ff0000; }       /* 纯红色（6 位） */
p { color: #f00; }          /* 简写（3 位）等价于 #ff0000 */
p { color: #333333; }       /* 深灰色 */
p { color: #333; }          /* 简写深灰色 */
p { color: #ff000080; }     /* 8 位，最后两位是透明度 */
p { color: #00000080; }     /* 半透明黑色 */

RGB 和 RGBA

RGB 通过红（Red）、绿（Green）、蓝（Blue）三个通道来定义颜色，每个通道取值范围 0-255。RGBA 增加了 Alpha 透明度通道（0-1）。

p { color: rgb(255, 0, 0); }         /* 纯红色 */
p { color: rgb(0, 128, 0); }         /* 绿色 */
h1 { color: rgb(51, 51, 51); }       /* 深灰色 */
div {
  background-color: rgba(0, 0, 0, 0.5);  /* 半透明黑色 */
}
/* 新的逗号省略写法 */
p {
  color: rgb(255 0 0 / 0.5);  /* 半透明红色 */
}

HSL 和 HSLA

HSL 通过色相（Hue）、饱和度（Saturation）和亮度（Lightness）来定义颜色，更符合人类直觉。

p { color: hsl(0, 100%, 50%); }       /* 纯红色 */
p { color: hsl(120, 100%, 50%); }     /* 纯绿色 */
p { color: hsl(240, 100%, 50%); }     /* 纯蓝色 */
/* 调节明度 */
div.light { background: hsl(200, 60%, 80%); }  /* 浅色 */
div.dark  { background: hsl(200, 60%, 20%); }  /* 深色 */
/* 带透明度 */
div {
  background: hsl(200 60% 50% / 0.5);
}

颜色格式对比表

格式	示例	优点	缺点
颜色名称	red, tomato	直观易读	颜色有限
Hex 6 位	#ff6600	简洁通用	不易直观调色
Hex 8 位	#ff660080	支持透明度	兼容性需注意
RGB	rgb(255,102,0)	直观，支持 JS 操作	不易调色相
RGBA	rgba(255,102,0,0.8)	支持透明度	调色不方便
HSL	hsl(24,100%,50%)	直觉化调色	学习成本
HSLA	hsla(24,100%,50%,0.8)	透明度+直觉调色	学习成本

当前颜色 currentColor

currentColor 是一个特殊关键字，引用当前元素的 color 属性值。

div {
  color: #3498db;
  border: 2px solid currentColor;  /* 边框自动匹配文字颜色 */
  box-shadow: 0 0 10px currentColor; /* 阴影也匹配 */
}

???? 练习

1. 用 Hex 值定义一个主色调（如 #3498db）作为网站主题色
2. 使用 RGBA 创建一个半透明覆盖层（0.5 透明度）
3. 用 HSL 创建一个颜色系列：同一色相不同明度的 5 个色值
4. 使用 currentColor 让元素的多个属性自动跟随文字颜色
5. 尝试用 8 位 Hex 值设置一个半透明的边框颜色