css颜色选择器

作者：残缺的不完美发布日期:2025-11-13 浏览:31

<!DOCTYPE html>
<html>
<head>
    <title>CSS颜色选择器示例</title>
    <style>
        /* 使用CSS颜色名称 */
        .color-name {
            background-color: red;
            color: white;
            padding: 10px;
        }

        /* 使用十六进制颜色代码 */
        .hex-color {
            background-color: #00ff00;
            color: #000000;
            padding: 10px;
        }

        /* 使用RGB颜色值 */
        .rgb-color {
            background-color: rgb(0, 0, 255);
            color: rgb(255, 255, 255);
            padding: 10px;
        }

        /* 使用RGBA颜色值（带透明度） */
        .rgba-color {
            background-color: rgba(255, 0, 255, 0.5);
            color: rgba(0, 0, 0, 1);
            padding: 10px;
        }

        /* 使用HSL颜色值 */
        .hsl-color {
            background-color: hsl(120, 100%, 50%);
            color: hsl(0, 0%, 100%);
            padding: 10px;
        }
    </style>
</head>
<body>
    <div class="color-name">这是使用CSS颜色名称的例子。</div>
    <div class="hex-color">这是使用十六进制颜色代码的例子。</div>
    <div class="rgb-color">这是使用RGB颜色值的例子。</div>
    <div class="rgba-color">这是使用RGBA颜色值的例子，带有透明度。</div>
    <div class="hsl-color">这是使用HSL颜色值的例子。</div>
</body>
</html>

解释说明：

CSS颜色名称：直接使用预定义的颜色名称，如 red、blue 等。
十六进制颜色代码：使用 # 加上六位十六进制数表示颜色，如 #00ff00 表示绿色。
RGB颜色值：使用 rgb(r, g, b) 函数，其中 r、g、b 分别表示红、绿、蓝的强度，范围是 0 到 255。
RGBA颜色值：类似于 RGB，但多了第四个参数表示透明度，范围是 0 到 1。
HSL颜色值：使用 hsl(h, s, l) 函数，其中 h 表示色相（角度），s 表示饱和度（百分比），l 表示亮度（百分比）。

上一篇：css3渐变

下一篇：css span换行