css颜色表示

最新推荐文章于 2024-10-30 21:47:46 发布

小小小小小阿玲

最新推荐文章于 2024-10-30 21:47:46 发布

阅读量53

点赞数

文章标签： css 前端 html 笔记

本文链接：https://blog.csdn.net/weixin_52874247/article/details/132254318

版权

本文介绍了四种常见的颜色表示方式：方式一是直接使用颜色单词；方式二是RGB和RGBA通过红绿蓝三原色组合，包括透明度；方式三是十六进制HEX和HEXA；方式四是HSL和HSLA以色相、饱和度和亮度表示。详细解释了各自的编写规则和注意事项。

摘要由CSDN通过智能技术生成

一、方式一

1、编写方式

直接使用颜色对应的单词名表示，eg：red、blue、green......

2、局限性

（1）表达的颜色比较单一，所以用的不多

二、方式二

1、方式

用rgb或rgba

2、编写方式

使用红、黄、蓝三原色进行组合

r：红色

g：绿色

b：蓝色

a：透明度

3、举例

（1）代码

        .hi1 {
            color: rgb(255, 0, 0);
        }
        .hi2 {
            color: rgb(0, 255, 0);
        }
        .hi3 {
            color: rgb(0, 0, 255);
        }
        .hi4 {
            color: rgb(100% , 0%, 0%);
        }
        .hi5 {
            color: rgba(255, 0, 0, 0.5);
        }
        .hi6 {
            color: rgba(255, 0, 0, 50%);
        }
        .hi7 {
            color: rgb(0, 0, 0);
        }
        .hi8 {
            color: rgb(255, 255, 255);
        }
        .hi9 {
            color: rgb(209, 246, 0);
        }

    <p class="hi1">hello</p>
    <p class="hi2">hello</p>
    <p class="hi3">hello</p>
    <p class="hi4">hello</p>
    <p class="hi5">hello</p>
    <p class="hi6">hello</p>
    <p class="hi7">hello</p>
    <p class="hi8">hello</p>
    <p class="hi9">hello</p>

（2）运行效果

4、注意

（1）三种颜色数值相同时，为灰色，值越大，灰色越浅

（2）rgb的形式要保持一致，要么均为0~255的数字。要么都是百分比；

rbga中前三位保持一致，最后一位可数字、可百分比

（3）rgb全为0是黑色，全为255为白色

三、方式三

1、方式

HEX或HEXA

2、编写方式

HEX的原理与rgb一样，依然是通过红绿蓝进行组合，但是是用6位数字分为3组来表示，格式为#rrggbb

3、数字取值范围

每一位数字的取值范围是：0~f ，即（0,1,2,3,4,5,6,7,8,9，a，b，c，d，e，f）

所以：每一种光的最小值是00，最大值是ff

4、举例

（1）代码

        .hi1 {
            color: #ff0000;
        }
        .hi2 {
            color: #00ff00;
        }
        .hi3 {
            color: #0000ff;
        }
        /* 半透明 */
        .hi4 {
            color: #0000ff88;
        }
        .hi4 {
            color: #aabbcc;
        }
        /* 颜色的两位相同，可简写为一位 */
        .hi5 {
            color: #abc;
        }
        /* 颜色简写时，透明度也要简写 */
        .hi6 {
            color: #abc8;
        }
        .hi7 {
            color: #90c0f7;
        }
        .hi8 {
            color: #AAbbcc;
        }
        /* 白色 */
        .hi9 {
            color: #ffffff;
        }
        /* 黑色 */
        .hi10 {
            color: #000000;
        }

    <p class="hi1">hello</p>
    <p class="hi2">hello</p>
    <p class="hi3">hello</p>
    <p class="hi4">hello</p>
    <p class="hi5">hello</p>
    <p class="hi6">hello</p>
    <p class="hi7">hello</p>
    <p class="hi8">hello</p>
    <p class="hi9">hello</p>
    <p class="hi10">hello</p>

（2）运行效果

5、注意

IE浏览器不支持HEXA，只支持HEX

四、方式四

1、方式

HSL或HSLA

2、编写方式

（1）HSL是通过色相、饱和度、亮度来表示一个颜色的，格式为：hsl（色相，饱和度，亮度）

（2）色相：取值范围是0~360度

（3）饱和度：取值范围是0%~100%（向色相中对应颜色中添加灰色，0%全灰，100%没有灰）

（4）亮度：取值范围是0%~100%（0%无亮度，为黑色；100%全亮，为白色）

（5）HSLA是在HSL的基础上，添加了透明度

3、举例

（1）代码

        /* (色相，饱和度，亮度) */
        .hi1 {
            color: hsl(0deg, 100%, 50%);
        }
        .hi2 {
            color: hsl(60deg, 100%, 50%);
        }
        .hi3 {
            color: hsl(120deg, 100%, 50%);
        }
        .hi4 {
            color: hsl(180deg, 100%, 50%);
        }
        .hi5 {
            color: hsl(240deg, 100%, 50%);
        }
        .hi6 {
            color: hsl(360deg, 100%, 50%);
        }
        .hi7{
            color: hsl(0deg, 50%, 50%);
        }
        .hi8 {
            color: hsl(0deg, 20%, 50%);
        }
        .hi9 {
            color: hsl(0deg, 50%, 30%);
        }
        .hi10 {
            color: hsl(0deg, 50%, 90%);
        }
        /* 透明度 */
        .hi11 {
            color: hsla(0, 49%, 50%, 0.414);
        }

    <p class="hi1">hello</p>
    <p class="hi2">hello</p>
    <p class="hi3">hello</p>
    <p class="hi4">hello</p>
    <p class="hi5">hello</p>
    <p class="hi6">hello</p>
    <p class="hi7">hello</p>
    <p class="hi8">hello</p>
    <p class="hi9">hello</p>
    <p class="hi10">hello</p>
    <p class="hi11">hello</p>

（2）运行效果