一、概述

在我们的显示屏中，一个像素点由三原色构成，分别为：红、绿、蓝。然而在计算机中使用0-255来表示某个原色的不同程度，在二进制中，可以使用八位二进制（00000000-11111111）进行表示。在十六进制中用（ 00-ff ）表示。那么红色（0-255），绿色（0-255），蓝色（0-255）三原色组成的颜色就有256*256*256种，组成了屏幕中五彩缤纷的画面。

22.jpg

由此就可以衍生出颜色的表示方式：

• 使用十进制表示：
  RGB(0, 0, 0);//这就代表黑色
  RGB(255, 255, 255);//这就代表白色
• 使用十六进制表示：
  #ffffff;//这就代表白色
  #000000;//这就代表黑色
  可以简写为：#fff，#000，

加入透明度：

• 最后一个参数0-1，表示透明度，1表示不透明，0表示完全透明
  rgba(255,255,0,0.5);

使用色相表示（hsl）：
这是一种将所有颜色对应成一个圆，一个角度代表一种颜色，所以取值范围为0-360，但是它还包括了饱和度和亮度。
h:0-360,色相
s:0-100%，饱和度
l:0-100%，亮度
例如：hsl(0, 50%, 50%);

21.jpg

二、代码

       .box2{
            width: 400px;
            height: 400px;
            background-color: rgb(100,100,100);
        }
        .box3{
            width: 400px;
            height: 400px;
            background-color: rgba(255,255,0,0.5);
        }
        .box4{
            width: 400px;
            height: 400px;
            background-color: #bbffaa;
        }
        .box5{
            width: 300px;
            height: 300px;
            background-color: hsl(0, 50%, 50%);
        }