• 什么是RGB值，RGBA以及十六进制的RGB

    目录

    颜色单位：

     RGB 值

     RGBA

     十六进制的RGB

    HLS值，HLSA值

    颜色单位：

                    在CSS中可以直接使用颜色名来设置各种颜色

                    比如：red ,orange.yellow......

                    但是在CSS中直接使用颜色名是非常不方便的，一是因为颜色名字太多，我们不一定可以一一准确的记住，第二是因为有些颜色我们没有办法去准确的进行描述

            

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .abc{
    10.             width: 100px;
    11.             height: 200px;
    12.             background-color: red;
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.         <div class="abc">div>
    18. body>
    19. html>

     RGB 值

                    RGB通过三种颜色的不同浓度来调配出不同的颜色

                    R red  G green B blue

                    每一种颜色的范围在0~255（0%~100%）之间

                    语法：RGB（红色，绿色，蓝色）

                    另一方面，使用RGB这种数字颜色对于计算机来说是非常好的

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .abc{
    10.             width: 100px;
    11.             height: 200px;
    12.             background-color: rgb(100, 200, 200);
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.         <div class="abc">div>
    18. body>
    19. html>

     RGBA

                    就是在rgb的基础上增加了一个a表示不透明度

                    需要四个值，前三个和rgb一样，第四个表示不透明度

                    1表示不透明，0表示完全透明，.5表示半透明（也就是说透明度值在0到1之间）

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .abc{
    10.             width: 100px;
    11.             height: 200px;
    12.             background-color: rgba(200, 100, 200, 0.2)
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.         <div class="abc">div>
    18. body>
    19. html>

     十六进制的RGB

                    语法：#红色绿色蓝色

                    颜色浓度通过00~ff

                    如果颜色两位重复可以进行简写（如：#aabbcc-->abc,但是需要注意的是必须是两位重复的才可以进行简写）

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .abc{
    10.             width: 100px;
    11.             height: 200px;
    12.             background-color: #ff0000;
    13.     style>
    14. head>
    15. <body>
    16.         <div class="abc">div>
    17. body>
    18. html>

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .abc{
    10.             width: 100px;
    11.             height: 200px;
    12.             background-color: #ff0
    13.     style>
    14. head>
    15. <body>
    16.         <div class="abc">div>
    17. body>
    18. html>

    HLS值，HLSA值

                    H:色相（0~360）

                    S:饱和度，颜色的浓度（0%~100%）

                    L:亮度，颜色的亮度（0%~100%）

    HLSA就是在HLS上增加了个透明度A

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         .abc{
    10.             width: 100px;
    11.             height: 200px;
    12.             background-color: hsl(10, 20%, 30%)
    13.     style>
    14. head>
    15. <body>
    16.         <div class="abc">div>
    17. body>
    18. html>

     

  • 相关阅读:
    Redis 集群配置
    Gitlab迁移方案
    七、 循环
    使用 AgileConfig 动态配置 NLog
    Matlab遗传算法工具箱——一个例子搞懂遗传算法
    网络安全（黑客）自学
    【VRP】基于常春藤算法IVY求解带时间窗的车辆路径问题TWVRP，最短距离附Matlab代码
    DataTable导出Excel
    有效的括号（leetcode 20）
    极智Paper | 单级特征检测网络 YOLOF
  • 原文地址：https://blog.csdn.net/m0_65334415/article/details/127459935