CSS中常用的5种颜色单位

css中有丰富多彩的颜色，如何让计算机能知道我们想要的是哪种颜色呢？可以通过以下的颜色单位。

1:在CSS可以直接使用颜色的单词来表示不同的颜色

红色：red 蓝色：blue 绿色：green  黄色：yellow

注意： 这种用的比较少 不好描述，难记

2:使用RGB值来表示不同的颜色

- 所谓的RGB值指的是通过Red Green Blue三元色，通过这三种颜色的不同的浓度，来表示出不同的颜色

- 例子：rgb(红色的浓度,绿色的浓度,蓝色的浓度);

- 颜色的浓度需要一个0-255之间的值，255表示最大，0表示没有

- 浓度也可以采用一个百分数来设置，需要一个0% - 100%之间的数字

        使用百分数最终也会转换为0-255之间的数

        0%表示0

        100%表示255

-语法：RGB(红色，绿色，蓝色)

-注意：比较常用，计算机可以很好的识别

3:RGBA

-语法：RGB(红色，绿色，蓝色，透明度)，a:透明度（0-1） 1不透明，0透明

4:使用十六进制的rgb值来表示颜色，原理和上边RGB原理一样

十六进制： 0 1 2 3 4 5 6 7 8 9 a b c d e f

                  00 - ff

                00表示没有，相当于rgb中的0

                -ff表示最大，相当于rgb中255

只不过使用十六进制数来代替，使用三组两位的十六进制数组来表示一个颜色

每组表示一个颜色

第一组表示红色的浓度，范围00-ff

第二组表示绿色的浓度，范围是00-ff

第三组表示蓝色的浓度，范围00-ff

-语法：#红色绿色蓝色

红色：#ff0000

像这种两位两位重复的颜色，可以简写

比如：#ff0000 可以写成 #f00，#abc #aabbcc

常用的十六进制颜色：#f00 红色， #f60 橘色， #ccc 灰， #0f0 绿色， #000黑色， #fff 白色

5:HSL值 HSLA值

H         色相 （0-360）hue 

S         饱和度 saturation       颜色浓度0%-100%

L         亮度 lightness      颜色亮度0%-100%

A         透明度 alpha

以下为代码演示