CSS 颜色：颜色名、十六进制、RGB、RGBA、HSL 与透明度

CSS 中写颜色的方式

任何接受颜色的属性（color、background-color、border-color、阴影、SVG 的 fill）都接受同样的格式。前四个色块是用四种方式写的同一种蓝色，第五个是与之相近的颜色名：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

十六进制颜色

十六进制颜色是 # 后面跟上红、绿、蓝三个分量，每个分量用两位十六进制数字表示，范围从 00 到 ff。另外三种形式是简写或扩展：

• #rgb：每一位都会重复一次，所以 #25e 就是 #2255ee。
• #rrggbbaa：最后两位是 alpha，所以 #2563eb80 的不透明度约为 50%。
• #rgba：带 alpha 的简写形式。

十六进制不区分大小写：#2563EB 和 #2563eb 是同一种颜色。

rgb() 和 rgba()

rgb() 接收红、绿、蓝三个值，范围从 0 到 255（或从 0% 到 100%）。斜杠后面可选的第四个值是 alpha，范围从 0（完全不可见）到 1，或从 0% 到 100%。

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() 和 rgb() 现在是同一个函数：两者都接受两种语法，也都可以带可选的 alpha。旧代码在需要透明度时会用 rgba()，它仍然可以正常使用。

hsl()：最容易调整的格式

hsl() 描述颜色的方式和人的思考方式一致：色轮上的色相、饱和度和亮度。保持色相不变、只改亮度，就能得到一整套色阶：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

第一行保持色相 221 和饱和度 83%，只改变亮度。第二行用相同的饱和度和亮度绕色轮走了一圈。

透明度：alpha 与 opacity

alpha 通道让某一种颜色变得透明。opacity 让整个元素变得透明，包括文字和子元素：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent 是一个关键字，表示完全透明的黑色，即 rgb(0 0 0 / 0)。它是大多数元素的默认背景。

currentColor

currentColor 等于元素自身的 color。如果一个按钮的边框、图标和文字都用它，一条声明就能改变全部颜色：

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

边框的颜色默认就是 currentColor，所以不写颜色的 border: 2px solid 会和文字颜色一致。

试试任意颜色

用任意格式输入一个颜色。浏览器会解析它并显示计算后的结果；无效的颜色不会改变色块。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

试试 tomato、#0f0、#2563eb80、rgb(0 0 0 / 25%)、oklch(70% 0.15 150) 和 color-mix(in srgb, #2563eb, white 50%)。

较新的颜色函数

• oklch(L C H)：亮度、彩度和色相，所在的色彩空间经过专门设计，亮度相同的颜色看起来也一样亮。用它做出的调色板，中间色阶比 HSL 更少发灰发浑。
• color-mix(in srgb, A, B 30%)：混合两种颜色。和 white 或 black 混合，就能从一个品牌色调出浅色和深色，而且它可以和 CSS 变量一起用：color-mix(in srgb, var(--brand), white 80%)。

当前版本的 Chrome、Firefox 和 Safari 都支持这两个函数。把品牌色放在 CSS 变量里，这样无论你选哪种格式，颜色都只定义在一个地方。

常见错误

• 十六进制颜色漏了 #。 color: 2563eb 是无效的，会被忽略。
• 用 opacity 让背景透明。 它会让文字也一起变淡。请用带 alpha 的颜色。
• 在现代语法中混用分隔符。 rgb(37 99, 235) 是无效的：要么全用空格，要么全用逗号。
• 以为颜色名和你的设计稿一致。 royalblue 不是 #2563eb。请复制准确的颜色码。
• 凭肉眼判断对比度。 用对比度检查工具检查文字颜色和背景的对比；正文文字的对比度至少要达到 4.5:1。