CSS 颜色值

Begindev 编辑部 March 25, 2026

颜色是网页设计的一个基本方面，影响着用户体验并传达品牌形象。

本章将深入探讨 CSS 中可用的各种颜色值格式，包括 Hex 代码、RGB、RGBA、HSL 和 HSLA。我们将探索每种格式的语法、用法和优点，使你能够根据样式需求选择最合适的方法。

1. 理解颜色值

在 CSS 中，颜色值用于指定各种元素（如文本、背景、边框等）的颜色。CSS 提供了多种表示颜色的方法，每种方法都有其自身的优点和用例。这些方法允许开发人员精确地控制颜色。

1.1 Hex 代码 (十六进制代码)

Hex 代码是颜色的十六进制表示。它们由一个井号 (#) 后跟六个十六进制数字（0-9 和 A-F）组成。前两位代表红色分量，接下来的两位代表绿色分量，最后两位代表蓝色分量。

语法: #RRGGBB

示例: #FF0000 (红), #00FF00 (绿), #0000FF (蓝), #FFFFFF (白), #000000 (黑)

解析:

#FF0000: 红色位置的 FF 表示红色的最大强度，而绿色和蓝色设置为 00，结果是纯红色。
#336699: 这代表一种蓝色。每一对数字 (33, 66, 99) 分别代表红、绿、蓝的强度。较低的值意味着较暗的阴影，而较高的值意味着较亮的阴影。

简写 Hex 代码:
对于每一对数字都相同的颜色（例如 #FF00AA），你可以使用只有三位数字的简写版本（例如 #F0A）。这等同于 #FF00AA。

语法: #RGB示例: #F00 (红 - 等同于 #FF0000), #0F0 (绿 - 等同于 #00FF00), #00F (蓝 - 等同于 #0000FF)

优点:

被所有浏览器广泛支持。表示相对紧凑。

缺点:

如果没有取色工具，很难直观理解和修改。不直接支持透明度（虽然有 8 位 Hex 代码，但兼容性略差于 RGBA）。

1.2 RGB

RGB (Red, Green, Blue) 是一种颜色模型，它将颜色表示为红、绿和蓝光的组合。在 CSS 中，RGB 值使用 rgb() 函数指定，该函数接受三个整数值 (0-255) 或百分比值 (0%-100%) 作为参数，代表每个颜色分量的强度。

语法: rgb(red, green, blue)

示例: rgb(255, 0, 0) (红), rgb(0, 255, 0) (绿), rgb(0, 0, 255) (蓝)

解析:

rgb(255, 100, 0): 这指定了一种橙色。红色为最大强度 255，绿色为 100，蓝色为 0。通过混合红色和绿色，我们生成了橙色色调。
rgb(128, 128, 128): 所有三个值相等且大约为其最大值的一半，结果为灰色。
优点:

对于一些习惯于数字混合的开发者来说比 Hex 代码更直观。被所有浏览器广泛支持。

缺点:

不直接支持透明度（需使用 RGBA）。

1.3 RGBA

RGBA (Red, Green, Blue, Alpha) 是 RGB 颜色模型的扩展，它包含一个 Alpha 通道 来指定颜色的透明度。Alpha 值的范围从 0.0（完全透明）到 1.0（完全不透明）。

语法: rgba(red, green, blue, alpha)

示例: rgba(255, 0, 0, 0.5) (50% 透明度的红色), rgba(0, 255, 0, 0.2) (20% 透明度的绿色)

解析:

rgba(0, 0, 0, 0.7): 70% 不透明度的黑色。元素会显得很暗，但它背后的东西会有些可见。
rgba(255, 255, 255, 0.3): 30% 不透明度的白色。创建半透明的白色覆盖层。
优点:

支持透明度，允许分层效果和微妙的视觉设计。仍然相对直观。

缺点:

比 RGB 支持略少（非常旧的浏览器可能不支持，但现代开发通常忽略这一点）。

1.4 HSL

HSL (Hue, Saturation, Lightness) 是一种基于色相、饱和度和亮度来表示颜色的模型。

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

语法: hsl(hue, saturation, lightness)

示例: hsl(0, 100%, 50%) (红), hsl(120, 100%, 50%) (绿), hsl(240, 100%, 50%) (蓝)

解析:

hsl(39, 100%, 50%): 明亮的橙色。色相设为 39 度（橙色），饱和度 100%，亮度 50%。
hsl(120, 30%, 70%): 柔和的浅绿色。色相 120（绿色），饱和度 30%（低强度），亮度 70%（较亮）。
优点:

对于熟悉色彩理论的设计师和艺术家来说更直观。更容易通过调整色相、饱和度或亮度来创建颜色的变体（例如，悬停状态只需降低亮度）。

缺点:

对于习惯 RGB 或 Hex 的开发者来说可能不太熟悉。不直接支持透明度（需使用 HSLA）。

1.5 HSLA

HSLA (Hue, Saturation, Lightness, Alpha) 是 HSL 颜色模型的扩展，包含 Alpha 通道以指定透明度。

语法: hsla(hue, saturation, lightness, alpha)

示例: hsla(0, 100%, 50%, 0.5) (50% 透明度的红色)

解析:

hsla(270, 50%, 50%, 0.6): 60% 不透明度的紫色。
hsla(60, 100%, 50%, 0.4): 40% 不透明度的亮黄色。
优点:

结合了 HSL 的直观性与控制透明度的能力。允许创建视觉上吸引人的效果。

2. 实战示例与演示

让我们使用不同的颜色值来设置 div 元素的样式。

<!DOCTYPE html>
<html>
<head>
<title>颜色值示例</title>
<style>
  .color-box {
    width: 200px;
    height: 100px;
    margin: 20px;
    border: 1px solid black;
    display: inline-block; /* 水平排列盒子 */
    color: white; /* 确保文字可读 */
    padding: 10px;
  }
  .hex-example {
    background-color: #ADD8E6; /* 浅蓝 (Hex) */
    color: black;
  }
  .rgb-example {
    background-color: rgb(255, 165, 0); /* 橙色 (RGB) */
  }
  .rgba-example {
    background-color: rgba(255, 0, 0, 0.5); /* 半透明红 (RGBA) */
  }
  .hsl-example {
    background-color: hsl(120, 100%, 50%); /* 绿色 (HSL) */
  }
  .hsla-example {
    background-color: hsla(240, 100%, 50%, 0.7); /* 半透明蓝 (HSLA) */
  }
</style>
</head>
<body>
  <div class="color-box hex-example">Hex: #ADD8E6</div>
  <div class="color-box rgb-example">RGB: rgb(255, 165, 0)</div>
  <div class="color-box rgba-example">RGBA: rgba(255, 0, 0, 0.5)</div>
  <div class="color-box hsl-example">HSL: hsl(120, 100%, 50%)</div>
  <div class="color-box hsla-example">HSLA: hsla(240, 100%, 50%, 0.7)</div>
</body>
</html>

这段代码创建了五个 div 元素，每个都使用不同的颜色值格式进行了样式设置，直观地展示了它们的效果。