定义色彩的6中方法

        随着前端体系的发展，CSS定义色彩的方法同样出现的很多，找到更便于自己的，适合在团队开发中使用的

        

CSS发展到CSS3至今有六种色彩模式

色彩关键字	预定义的颜色名称（red，green，等等）
十六进制	#RRGGBB
RGB	rgb(red,green,blue)
RGBA	rgba(red,green,blue,alpha)      CSS3
HSL	hsl(色相，饱和度，明度)          CSS3
HSLA	hsla（色相，饱和度，明度，alpha）     CSS3

    色彩关键字：colorName

        色彩的英文名---预定义、跨浏览器颜色名称（17种标准色 + 130中浏览器定义）。

        实际应用少，多用于测试，简单小项目。

        兼容性好，所有浏览器都支持。

.div1{
	background-color:green;	/*绿色*/
}

        十六进制（#HEX）：#RRGGBB    

        屏幕色通过红、绿、蓝三种光源组合显示，R代表红，G代表绿，B代表蓝。

        所有值必须介于00与FF之间，00最黑（不发光），FF最亮（发光值最高）。

        代表同一通道的2个数值如果相同，可以简写：#RRGGBB >#RGB。

        兼容性好，所有浏览器都支持，实际应用多。

/*黄色；红色和绿色叠加到一起*/
.div2{
	background-color:#ffff00;
}

        RGB：rgb（red，green，blue）

        括号中的三个通道的色彩亮度。

        亮度的值介于（0-255）之间（最常用），也可以用百分比整数表示（0% - 100%）。

        兼容性好所有浏览器都支持，实际应用多。

.div3{
	background-color:rgb(255,0,0);
}

        RGBA：rgba（red，green，blue，alpha）

        rgb模式的扩展，添加alpha透明通道的设置。

        alpha参数的值介于0.0（完全透明）和1.0（完全不透明）之间。

        rgba不会延伸到子元素。

.div4{
	background-color:rgba(0,0,255,0.5);
}

        

        HSL（色轮）：hsl（色相，饱和度，明度）

        色相：色彩相貌（红黄蓝绿...），用角度代表（0表示红色）（120表示绿色）（240表示蓝色）。

        饱和度：色彩纯度，用%表示；100%为满饱和度，0%是灰度。

        明度：色彩亮度，用%表示；100%为白色，0%为黑色。

        例：红色red的写法：hsl（0,100%，50%）

                0代表红色在色轮上的角度位置。

                100%代表红色的饱和度为最高纯度。

                50%代表红色的明度是正中间值，不偏向黑也不偏向白。

        HSL目前的应用状况

                适用于配色方案或者色彩变化的CSS3动画。

                目前应用较少，大多数人不适应这个模式。

                但PS软件中HSB和这里的HSL是不同的，取色不方便。

                玩HSL需要对H,S,L这三种颜色模式有一定得了解，要有色彩理论基础。

        下面来一张色轮切面图。

.div5{
	background-color:hsl(240,100%,50%);
}
.div6{
	background-color:hsl(240,100%,60%);
}
.div7{
	background-color:hsl(240,100%,70%);
}
.div8{
	background-color:hsl(240,100%,80%);
}

        HSLA（色轮）：hsla（色相，饱和度，明度，alpha）

        与rgba同理，给hsl模式增加了alpha透明通道。

.div9{
	background-color:hsla(0,100%,50%,0.5);
}

        掌握色彩基础，有助于在页面配色的时候更好的配色。

--主页传送门--