三、CSS 颜色的四种表示方法

站长

2023年11月28日 15:45 · 阅读数 21

CSS 颜色的四种表示方法颜色

1、单词表示

h1 {
    color: black;
}
h2 {
    color:red;
}

2、rgb/rgba表示

red、green、blue是光的三原色。

h1 {
    color: rgb(255, 0, 0);
}

h2 {
    color: rgba(0%, 0%, 100%, 0);
}

注意:

三种颜色相同，就是灰色，值越大，灰色越深。
全 0 为黑色，全 255 为白色。
rgba中的a取值范围是0-1，值越小，可见度越低。
rgb，三者的取值要么全是百分数，要么全是数值，不能混用。

3、hex/hexa

用16进制的数表示颜色的取值。（ff = 255）, 需要在前面加上一个 #

/*HEX*/
h2 {
    color: #ff0000;
}

/*HEXA*/
h3 {
    color: #ff4a7bff;
}

注意：两两重复可以简写,一旦前三位简写，最后一位也要简写。

h3 {
    color: #f00f
}

4、hsl/hsla表示法

用法：color:hsl(色相，饱和度，亮度) 三、CSS 颜色的四种表示方法

.hsl {
    color: hsl(0deg, 100%, 100%);
}

hsL是通过色相、饱和度、亮度、来表示颜色的一种格式。hsl(色相、饱和度、亮度)。

色相：取值范围是0-360,单位deg可以省略，详情见上图。
饱和度：取值范围是0%-100%,理解为往对应颜色中加入灰色。(0%为全灰，100%没有灰)
亮度：取值范围是0%-100%,。（0%黑色，100%白色）

代码

<!DOCTYPE html>
<html lang="zn-CH">
<head>
    <meta charset="UTF-8">
    <title>Rock学前端</title>
    <style>
        h1 {
            color: red;
        }

        /*光的三原色*/
        .h1 {
            color: rgb(255, 0, 0);
        }

        .h2 {
            color: rgb(0, 255, 0);
        }

        .h3 {
            color: rgb(0%, 0%, 100%);
        }

        /*完全透明*/
        .rgba {
            color: rgba(255, 0, 0, 0.5);
        }

        .rgb000 {
            color: rgb(0, 0, 0); /*黑色*/
        }

        .rgb2553 {
            color: rgb(255, 255, 255); /*白色*/
        }

        .violet {
            color: rgb(138, 43, 226)
        }

        .HEX {
            color: #ff0000;
            /*两两重复可以简写,一旦前三位简写，后面三位也要简写*/
            /*color: #f00;*/
        }

        /*ie不支持hexA*/
        .HEXA {
            color: #87ceedff;
        }

        /*deg可以省略*/
        .hsl {
            /*color: hsl(0,100%,50%);*/
            /*0% 灰色*/
            /*100 白色*/
            color: hsl(14, 100%, 50%);
        }

        .hsla {
            color: hsla(0, 100%, 50%);
        }
    </style>
</head>
<body>
<div>
    <h1>词语表示</h1>
    <h1>Rock1688学</h1>
    <h1>rgb</h1>
    <h2 class="h1">Lorem.</h2>
    <h2 class="h2">Eveniet!</h2>
    <h2 class="h3">Numquam!</h2>
    <h1>rgba</h1>
    <h2 class="rgba">Rock test</h2>

    <hr>
    <hr>
    <h1 class="rgb000">rgb000</h1>
    <h1 class="rgb2553">rgb 255 255 255</h1>
    <hr>
    <h2 class="violet">紫罗兰</h2>

    <hr>
    <hr>
    <h1>HEX/HEXA</h1>
    <h2 class="HEX">HEX</h2>
    <h2 class="HEXA">HEXA</h2>
    <hr>
    <hr>
    <h1>hsl表示法</h1>
    <h2 class="hsl">Rock Test</h2>
    <h2 class="hsla">Rock Test</h2>
</div>

</body>
</html>