CSS 颜色

CSS 提供了多种方式来表示颜色。最常用的属性是 color（文字颜色）和 background-color（背景颜色）。

十六进制（Hex）

以 # 开头，后跟 3~8 位十六进制字符。这是 Web 上最常见的颜色表示法：

css 
.red { color: #ef4444; }
.green { color: #22c55e; }
.blue { color: #2563eb; }
.black { color: #000000; }
.white { color: #ffffff; }

格式说明：

格式示例说明
#RGB#f00简写，等价于 #ff0000
#RRGGBB#ef4444标准六位 hex
#RRGGBBAA#ef444480带 alpha 透明通道（后两位）
#RGBA#f008简写带 alpha（等价于 #ff000088）
css 
/* 半透明红色 */
.overlay {
  background: #ef444480; /* 50% 透明度 */
}

RGB / RGBA

用红（Red）、绿（Green）、蓝（Blue）三个通道的值（0~255）混合出颜色：

css 
.red { color: rgb(239, 68, 68); }
.green { color: rgb(34, 197, 94); }
.blue { color: rgb(37, 99, 235); }

/* 带透明度，0 = 全透明，1 = 不透明 */
.half-transparent {
  background: rgba(37, 99, 235, 0.5);
}

现代 CSS 中 rgb() 和 rgba() 合二为一：rgb(37, 99, 235, 0.5) 等价于 rgba(37, 99, 235, 0.5)。不带 alpha 时可省略最后一个参数。

新的逗号自由语法

css 
/* 新写法：用空格分隔，alpha 用斜线 */
.new-syntax {
  color: rgb(37 99 235);
  background: rgb(37 99 235 / 50%);
}

HSL / HSLA

HSL 用**色相（Hue）、饱和度（Saturation）、亮度（Lightness）**来描述颜色，比 RGB 更直观：

css 
/* 格式：hsl(色相, 饱和度%, 亮度%)
   色相：0~360（色环角度）
   饱和度：0%（灰）~100%（鲜艳）
   亮度：0%（黑）~100%（白） */
.primary { color: hsl(221, 83%, 53%); }
.light { color: hsl(221, 83%, 80%); }
.dark { color: hsl(221, 83%, 30%); }

HSL 的直观性体现在调整同一色系时只需改动亮度：

css 
/* 同一蓝色，不同明暗 */
hsl(221, 83%, 90%) /* 极浅蓝 */
hsl(221, 83%, 53%) /* 标准蓝 */
hsl(221, 83%, 20%) /* 深蓝 */

饱和度越低，越接近灰色：

css 
hsl(221, 0%, 50%)   /* 中灰 */
hsl(221, 50%, 50%)  /* 半饱和蓝 */
hsl(221, 100%, 50%) /* 纯饱和蓝 */

命名颜色

CSS 内置了约 150 种有名字的颜色：

css 
.red { color: red; }
.tomato { color: tomato; }
.dodgerblue { color: dodgerblue; }
.mediumseagreen { color: mediumseagreen; }

常用命名色：black、white、gray、red、blue、green、yellow、orange、purple、transparent。

命名颜色适合快速原型，但在正式项目中不够精确——你无法一眼看出 tomato 是什么颜色。推荐使用 hex 或 HSL。

currentColor

currentColor 代表当前元素的 color 属性值。它在不需要显式指定颜色时非常方便：

css 
.icon {
  color: #2563eb;
  /* stroke 和 fill 自动继承 color 的蓝色 */
  stroke: currentColor;
  fill: currentColor;
}

/* 改变 color 即可统一修改所有引用 currentColor 的属性 */
.icon.red {
  color: #ef4444;
}

transparent

表示完全透明的颜色：

css 
/* 等价写法 */
.invisible { color: transparent; }
.invisible { color: rgba(0, 0, 0, 0); }

opacity vs 颜色 alpha 通道

两者都能实现透明效果，但机制不同：

css 
/* opacity 让整个元素（包括子元素）透明 */
.box-opacity {
  background: #2563eb;
  opacity: 0.5;
  /* 文字和边框也会变半透明 */
}

/* alpha 通道：只让当前属性透明，不影响子元素 */
.box-alpha {
  background: rgb(37, 99, 235, 0.5);
  /* 只有背景半透明，文字依然 100% 不透明 */
}

opacity 会让整个元素及其子元素都变透明，包括文字。如果你只想让背景半透明，请使用 rgba/hsla 的 alpha 通道。

颜色函数

现代 CSS 还提供了更多颜色函数：

css 
/* oklch：感知均匀的 LCH 颜色空间（现代推荐） */
oklch(50% 0.2 250)

/* lab：CIELAB 颜色空间 */
lab(50% 20 -30)

/* color-mix：混合两种颜色 */
color-mix(in srgb, #2563eb 50%, white)

这些新函数在支持的浏览器中能提供更精确的颜色控制，但 hex、rgb、hsl 仍然是兼容性最广的选择。