CSS 合法颜色值

在 CSS 中，颜色值可以使用多种格式表示，包括关键字、十六进制、RGB、RGBA、HSL、HSLA 等。下面将介绍这些不同格式的颜色值。

1. 关键字颜色值

在 CSS 中，可以使用一些预定义的颜色关键字表示颜色值，如 red、blue、green 等。这些关键字代表了常见的颜色，使用简单并直观。

示例代码：

p {
  color: red;
  background-color: lightblue;
}

2. 十六进制颜色值

使用十六进制表示颜色值是最常见的方式之一。十六进制颜色值由 # 开头，后面跟随 6 位十六进制数字（0-9，A-F）表示红、绿、蓝三个颜色通道的值。

示例代码：

p {
  color: #ff0000; /* 红色 */
  background-color: #00ff00; /* 绿色 */
}

3. RGB 颜色值

RGB 颜色值由红、绿、蓝三个颜色通道的取值组成，每个通道的取值范围是 0-255。可以使用 rgb() 函数表示 RGB 颜色值。

示例代码：

p {
  color: rgb(255, 0, 0); /* 红色 */
  background-color: rgb(0, 255, 0); /* 绿色 */
}

4. RGBA 颜色值

RGBA 颜色值与 RGB 颜色值类似，不同之处在于 RGBA 颜色值还包括一个表示透明度的数值，取值范围是 0-1。可以使用 rgba() 函数表示 RGBA 颜色值。

示例代码：

p {
  color: rgba(255, 0, 0, 0.5); /* 半透明红色 */
  background-color: rgba(0, 255, 0, 0.8); /* 半透明绿色 */
}

5. HSL 颜色值

HSL 颜色值由色相（Hue）、饱和度（Saturation）、亮度（Lightness）三个参数组成。色相取值范围是 0-360，饱和度和亮度取值范围是 0%-100%。可以使用 hsl() 函数表示 HSL 颜色值。

示例代码：

p {
  color: hsl(0, 100%, 50%); /* 红色 */
  background-color: hsl(120, 100%, 50%); /* 绿色 */
}

6. HSLA 颜色值

HSLA 颜色值与 HSL 颜色值类似，不同之处在于 HSLA 颜色值还包括一个表示透明度的数值，取值范围是 0-1。可以使用 hsla() 函数表示 HSLA 颜色值。

示例代码：

p {
  color: hsla(0, 100%, 50%, 0.5); /* 半透明红色 */
  background-color: hsla(120, 100%, 50%, 0.8); /* 半透明绿色 */
}

以上就是 CSS 中常用的颜色值表示方式，根据需要选择合适的颜色值格式来设置元素的颜色。