前端——颜色

最新推荐文章于 2025-07-11 12:44:40 发布

原创最新推荐文章于 2025-07-11 12:44:40 发布 · 291 阅读

0 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

26 篇文章

订阅专栏

本文深入探讨前端开发中颜色的处理，包括颜色选择、转换、混合以及在CSS中的使用，解析不同颜色模式如RGB、HSV和HEX，并介绍如何在JavaScript中进行颜色操作。通过实例展示颜色在网页设计中的重要性和实用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html{
            background-color: skyblue;
        }
        .box1{
            width: 100px;
            height: 100px;
            /* 
                颜色单位：
                    在CSS中可以直接使用颜色名来设置各种颜色
                        比如：red、orange、yellow、blue、green……
                        但是在CSS中直接使用颜色名是非常不方便的

                RGB值:
                    -RGB通过三种颜色的不同浓度来调配出不同的颜色
                    -R red  G green  B blue
                    -每一种颜色的范围都在 0~255（0%~100%）之间
                    -语法：RGB（红色，绿色，蓝色）

                RGBA:
                    -就是在RGB的基础上增加了一个a表示不透明度
                    -设置透明度，1为不透明，.5为半透明，0为全透明
                    -需要四个值，前三个和RGB一样，第四位表示不透明度

                十六进制的RGB值：
                    -语法：#红色绿色蓝色
                    -颜色浓度通过 00~ff
                    -如果颜色两位两位重复可以进行简写
                        #aabbcc --> #abc

                HSL值 HSLA值
                    H hue         色相 （0~360）
                    S saturation  饱和度 即颜色浓度（0%~100%）
                    L lightness   亮度 即颜色亮度（0%~100%）
                    A
             */
            background-color: red;
            background-color: rgb(255,0,0);
            background-color: rgb(0,255,0);
            background-color: rgb(160, 170, 20);
            background-color: rgb(0,0,0);
            background-color: rgb(255,255,255);
            background-color: rgba(160, 170, 20, .5);
            background-color: #ff0000;
            background-color: #ffff00;
            background-color: #bbffaa;
            background-color: hsl(120, 100%, 50%);
            background-color: hsla(98, 50%, 50%, 0.688);

        }
    </style>
</head>
<body>

    <div class="box1"></div>
    
</body>
</html>```