CSS中的颜色表示方法详解

描述
CSS中的颜色表示方法是指定元素颜色的各种方式，包括关键字、十六进制、RGB/RGBA、HSL/HSLA等格式。理解这些方法能帮助你在不同场景下选择最合适的颜色表示方式。

基本颜色关键字
CSS提供了147种预定义颜色名称，如red、blue、lightseagreen等。这些关键字简单易用，但颜色选择有限且不够精确。

十六进制表示法
使用6位十六进制数表示颜色，格式为#RRGGBB：

• 每两位分别表示红、绿、蓝分量
• 取值范围00-FF（0-255）
• 例如#FF0000表示纯红色
  若每对字符相同，可简写为3位，如#F00等同于#FF0000

RGB函数
使用rgb(red, green, blue)函数：

• 参数为0-255的整数或百分比
• 例如rgb(255, 0, 0)或rgb(100%, 0%, 0%)
  RGBA在此基础上增加alpha通道（透明度）：
• rgba(255, 0, 0, 0.5)表示半透明红色
• alpha取值范围0（完全透明）到1（完全不透明）

HSL函数
更符合人类直觉的表示方式：hsl(hue, saturation, lightness)

• 色相（hue）：0-360度色轮角度（0红、120绿、240蓝）
• 饱和度（saturation）：0%（灰度）到100%（全彩）
• 明度（lightness）：0%（黑）到100%（白）
  HSLA同样支持透明度：
• hsla(120, 100%, 50%, 0.3)表示30%透明的纯绿色

当前颜色关键字
使用currentColor关键字可引用当前元素的color属性值，便于保持样式一致性：

.button {
  color: #3498db;
  border: 2px solid currentColor; /* 边框颜色与文字颜色一致 */
}

透明度注意事项

1. RGBA/HSLA的透明度会影响元素自身及子元素
2. 与opacity属性的区别：opacity会影响整个元素包括内容
3. 浏览器支持：现代浏览器均支持，IE9+支持RGB/HSL，IE9支持RGBA/HSLA

使用场景建议

• 简单项目：颜色关键字或十六进制
• 需要透明度：RGBA/HSLA
• 动态调整颜色：HSL（易于程序化调整明度/饱和度）
• 设计系统：考虑使用CSS变量结合HSL便于主题切换