CSS3 颜色

CSS 颜色值 (Color Values)

在 CSS 中定义颜色

CSS 提供了多种指定颜色的方法，包括预定义的颜色名称、十六进制代码 (hexadecimal codes)、RGB、RGBA、HSL 和 HSLA 值。

新增的 RGBA 和 HSLA 等现代颜色表示方法允许直接在颜色值中指定不透明度 (opacity)。

• Color Names (颜色名称): red, blue, transparent (支持超过 140 种名称)
• Hexadecimal (十六进制): #RRGGBB 或 #RGB (例如: #ff0000, #f00)
• RGB: rgb(red, green, blue) (值范围 0-255)
• RGBA: rgba(red, green, blue, alpha) (alpha 值范围 0.0-1.0)
• HSL: hsl(hue, saturation, lightness) (色相 hue 0-360, 饱和度 sat/亮度 light 0%-100%)
• HSLA: hsla(hue, saturation, lightness, alpha) (alpha 值范围 0.0-1.0)

浏览器支持 (Browser Support)

所有现代浏览器都完全支持这些 CSS 颜色值格式，包括 RGBA, HSL 和 HSLA。

颜色值/属性 (Color Value/Property)	Internet Explorer	Chrome	Firefox	Safari	Opera
RGBA, HSL, HSLA	IE 9+	Chrome	Firefox	Safari	Opera
opacity Property	IE 9+	Chrome	Firefox	Safari	Opera

RGBA 颜色

RGBA 在 RGB 的基础上增加了一个 alpha 通道 (alpha channel) 用于控制透明度。语法是 rgba(red, green, blue, alpha)。alpha 值的范围从 0.0 (完全透明) 到 1.0 (完全不透明)。

这对于创建半透明背景或文本颜色非常有用，且不会影响整个元素的不透明度。

示例: 半透明红色背景

[一个背景色为 rgba(255, 0, 0, 0.2) 的 Div]

[一个背景色为 rgba(255, 0, 0, 0.5) 的 Div]

[一个背景色为 rgba(255, 0, 0, 0.8) 的 Div]

CSS 示例:

.element1 {
  background-color: rgba(255, 0, 0, 0.3); /* 红色，30% 不透明度 */
}
.element2 {
  background-color: rgba(0, 255, 0, 0.3); /* 绿色，30% 不透明度 */
}
.element3 {
  background-color: rgba(0, 0, 255, 0.3); /* 蓝色，30% 不透明度 */
}

HSL 颜色

HSL (Hue, Saturation, Lightness) 提供了一种更直观的方式，基于色轮 (color wheel) 来定义颜色。

• Hue (色相): 色轮上的角度 (0-360 度)。0 或 360 是红色，120 是绿色，240 是蓝色。
• Saturation (饱和度): 颜色的强度 (0% 是灰色，100% 是全色)。
• Lightness (亮度): 颜色的明亮程度 (0% 是黑色，50% 是“正常”颜色，100% 是白色)。

语法: hsl(hue, saturation%, lightness%)

示例: 绿色的变体

[一个背景色为 hsl(120, 100%, 50%) 的 Div /* 正常绿色 */]

[一个背景色为 hsl(120, 100%, 75%) 的 Div /* 浅绿色 */]

[一个背景色为 hsl(120, 100%, 25%) 的 Div /* 深绿色 */]

[一个背景色为 hsl(120, 50%, 70%) 的 Div /* 粉绿色 */]

CSS 示例:

.element1 {
  background-color: hsl(120, 100%, 50%); /* 绿色 */
}
.element2 {
  background-color: hsl(120, 100%, 75%); /* 浅绿色 */
}
.element3 {
  background-color: hsl(120, 100%, 25%); /* 深绿色 */
}
.element4 {
  background-color: hsl(120, 60%, 70%);   /* 粉绿色 */
}

HSLA 颜色

HSLA 为 HSL 添加了一个 alpha 通道以实现透明度。语法是 hsla(hue, saturation%, lightness%, alpha)。alpha 值的范围与 RGBA 中的 alpha 相同 (0.0 到 1.0)。

示例: 半透明的绿色变体

[一个背景色为 hsla(120, 100%, 50%, 0.3) 的 Div]

[一个背景色为 hsla(120, 100%, 75%, 0.3) 的 Div]

[一个背景色为 hsla(120, 100%, 25%, 0.3) 的 Div]

[一个背景色为 hsla(120, 60%, 70%, 0.3) 的 Div]

CSS 示例:

.element1 {
  background-color: hsla(120, 100%, 50%, 0.3); /* 绿色带不透明度 */
}
.element2 {
  background-color: hsla(120, 100%, 75%, 0.3); /* 浅绿色带不透明度 */
}
.element3 {
  background-color: hsla(120, 100%, 25%, 0.3); /* 深绿色带不透明度 */
}
.element4 {
  background-color: hsla(120, 60%, 70%, 0.3);  /* 粉绿色带不透明度 */
}

opacity 属性

opacity 属性设置的是整个元素（包括其内容、背景和边框）的透明度级别。

值的范围从 0.0 (完全透明) 到 1.0 (完全不透明)。

示例: 对具有纯色背景的元素应用 opacity

[一个样式为 background-color: red; opacity: 0.2; 的 Div] 文本也透明 [/Div]

[一个样式为 background-color: red; opacity: 0.5; 的 Div] 文本也透明 [/Div]

[一个样式为 background-color: red; opacity: 0.8; 的 Div] 文本也透明 [/Div]

重要提示: 与 RGBA/HSLA 只影响特定颜色属性不同，opacity 会影响元素及其所有子元素。

CSS 示例:

.element1 {
  background-color: rgb(255, 0, 0); /* 纯红色 */
  opacity: 0.6; /* 整个元素 60% 不透明 */
}
.element2 {
  background-color: rgb(0, 255, 0); /* 纯绿色 */
  opacity: 0.6;
}
.element3 {
  background-color: rgb(0, 0, 255); /* 纯蓝色 */
  opacity: 0.6;
}