本教程共 44 篇 · 第 17 篇 · 更新于 2026-07-29 · 约 10 分钟阅读

17. 颜色表示法

本节目标：掌握 CSS 中 5 种颜色表示法（颜色名、HEX、RGB、HSL、透明色），能根据场景选择合适的颜色写法。

CSS 支持的颜色表示法

CSS 提供了多种定义颜色的方式，就像可以用不同语言说”红色”一样。最常用的是：颜色名、十六进制（HEX）、RGB、HSL，以及带透明度的 RGBA 和 HSLA。

颜色名 —— 最直观

CSS 预定义了 140 种颜色名，直接用英文单词就能用。

.color-name {
    color: Tomato;
    background: DodgerBlue;
    border: 2px solid MediumSeaGreen;
}

常见颜色名：Tomato（番茄红）、DodgerBlue（道奇蓝）、MediumSeaGreen（中海绿）、Gray（灰）、Violet（紫罗兰）、LightGray（浅灰）。

颜色名数量有限，适合快速原型开发，精确配色时通常用 HEX 或 RGB。

HEX 十六进制 —— 最流行

HEX 格式以 # 开头，后面跟 6 位十六进制数，每两位分别代表红、绿、蓝。

.hex-color {
    color: #ff6347; /* 番茄红 */
    background: #4CAF50; /* 绿色 */
    border: #333333; /* 深灰 */
}

取值范围：#000000（黑）到 #ffffff（白）。

RGB —— 最直觉

RGB 用三个 0-255 的数字表示红、绿、蓝的强度。

.rgb-color {
    color: rgb(255, 99, 71); /* 番茄红 */
    background: rgb(76, 175, 80); /* 绿色 */
}

常见组合：

rgb(255, 0, 0) 纯红
rgb(0, 0, 255) 纯蓝
rgb(0, 0, 0) 黑色
rgb(255, 255, 255) 白色

三个值相等时就是灰度：rgb(128, 128, 128) 是中灰。

HSL —— 最符合人类直觉

HSL 用色相、饱和度、亮度三个参数描述颜色，最贴近人眼感知。

.hsl-color {
    color: hsl(9, 100%, 64%); /* 番茄红 */
    background: hsl(120, 100%, 50%); /* 纯绿 */
}

参数含义：

色相（Hue）：0-360 度，0 是红，120 是绿，240 是蓝
饱和度（Saturation）：0%-100%，0% 是灰色，100% 是纯色
亮度（Lightness）：0%-100%，0% 是黑，50% 是正常，100% 是白

HSL 调颜色特别方便：想要深一点？降低亮度。想要淡一点？降低饱和度。

RGBA —— 带透明度的 RGB

RGBA 在 RGB 基础上加了一个 alpha 通道，控制透明度。

.rgba-color {
    background: rgba(76, 175, 80, 0.5); /* 半透绿 */
    border: rgba(0, 0, 0, 0.2); /* 浅黑边框 */
}

alpha 取值 0.0（完全透明）到 1.0（完全不透明）。

<!DOCTYPE html>
<html lang="zh">
<head>
    <style>
        .transparent-demo {
            width: 300px;
            padding: 20px;
            background: url('https://picsum.photos/300/200') center/cover;
        }
        .overlay {
            background: rgba(0, 0, 0, 0.6); /* 黑色遮罩 60% 不透明 */
            color: white;
            padding: 20px;
        }
    </style>
</head>
<body>
    <div class="transparent-demo">
        <div class="overlay">半透明遮罩上的白色文字</div>
    </div>
</body>
</html>

HSLA —— 带透明度的 HSL

HSLA 在 HSL 基础上加 alpha 通道，用法和 RGBA 一样。

.hsla-color {
    background: hsla(120, 100%, 50%, 0.3); /* 30% 不透明的绿色 */
}

各种灰度表示法

当 R=G=B 时就是灰色，灰度是 UI 设计中最常用的颜色。

.grayscale {
    color: gray;
    background: #e0e0e0;
    border: rgb(200, 200, 200);
    /* 以上都是同样的灰色 */
}

完整示例：卡片配色

<!DOCTYPE html>
<html lang="zh">
<head>
    <style>
        .card {
            width: 280px;
            padding: 20px;
            border-radius: 8px;
            /* 白色背景 */
            background: #ffffff;
            /* 浅灰边框 */
            border: 1px solid #e0e0e0;
            /* 半透明黑色阴影 */
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
        }
        .card-title {
            /* 深灰文字 */
            color: #333333;
            font-size: 18px;
            margin: 0 0 10px;
        }
        .card-text {
            /* 中灰文字 */
            color: #666666;
            font-size: 14px;
            line-height: 1.6;
        }
        .card-btn {
            display: inline-block;
            padding: 8px 20px;
            /* 蓝色按钮 */
            background: hsl(210, 100%, 50%);
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            text-decoration: none;
        }
        .card-btn:hover {
            /* 悬停时加深：降低亮度 */
            background: hsl(210, 100%, 40%);
        }
    </style>
</head>
<body>
    <div class="card">
        <h3 class="card-title">卡片标题</h3>
        <p class="card-text">这是卡片的正文内容，使用了多种颜色表示法。</p>
        <a href="#" class="card-btn">了解更多</a>
    </div>
</body>
</html>

各表示法对比速查

表示法	示例	透明度	使用场景
颜色名	`Tomato`	不支持	快速原型
HEX	`#ff6347`	不支持	设计稿还原
RGB	`rgb(255,99,71)`	不支持	编程计算
HSL	`hsl(9,100%,64%)`	不支持	调色方便
RGBA	`rgba(0,0,0,0.5)`	支持	遮罩、阴影
HSLA	`hsla(0,0%,0%,0.5)`	支持	动态调色+透明

日常开发推荐：固定色用 HEX，需要透明用 RGBA，需要动态调色用 HSL。

小结

颜色名最直观，但数量有限
HEX 最常用，设计稿直接复制
RGB 最直觉，三个 0-255 数字
HSL 最适合调色，调饱和度、亮度很方便
RGBA/HSLA 用于需要透明效果的场景