• 什么是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>

     

  • 相关阅读:
    在国内购买GPT服务前的一定要注意！！！
    国内首发可视化智能调优平台，小龙带你玩转KeenTune UI
    MySQL索引事务存储引擎
    90、00后严选出的数据可视化工具：奥威BI工具
    Java中使用Jsoup实现网页内容爬取与Html内容解析并使用EasyExcel实现导出为Excel文件
    [附源码]java毕业设计双学位在线考试系统
    C#实现图片对比-支持图片旋转
    [Python]百钱买鸡流程图及程序设计
    【任务调度】定时任务，SpringTask，Quartz
    ZK和redis中是否会发生脑裂问题？
  • 原文地址：https://blog.csdn.net/m0_65334415/article/details/127459935