扩展资料：
原理
RGB是从颜色发光的原理来设计定的，通俗点说它的颜色混合方式就好像有红、绿、蓝三盏灯，当它们的光相互叠合的时候，色彩相混，而亮度却等于三者亮度之总和，越混合亮度越高，即加法混合。
红、绿、蓝三盏灯的叠加情况，中心三色最亮的叠加区为白色，加法混合的特点：越叠加越明亮。
红、绿、蓝三个颜色通道每种色各分为256阶亮度，在0时“灯”最弱——是关掉的，而在255时“灯”最亮。当三色灰度数值相同时，产生不同灰度值的灰色调，即三色灰度都为0时，是最暗的黑色调；三色灰度都为255时，是最亮的白色调。
在制作页面的时候我们经常需要设置字体颜色或者背景颜色，丰富多彩的颜色能够让页面呈现更好的效果，在网站中用到颜色的地方也很多，文字颜色，背景颜色，边框颜色等都需要用到。
在css中表示颜色的方法主要有以下几种。
1. 关键字颜色
属性值是颜色的名称。
例如：
div{
color:red
}
2. 十六进制
十六进制表示颜色的原理是利用光的三原色：红色，绿色，蓝色。利用这三种颜色就能组合出很多颜色，比如红色光和绿色光就可以组合成黄色，三种颜色的光可以组成白色，没有光的时候就是黑色。
下图为光色三原色：
请点击输入图片描述
十六进制颜色是由#加六位的十六进制表示的，范围是00到ff，前两位表示红色，中间两位表示绿色，最后两位表示蓝色。
例如：
#ff0000表示红色，这个色值包含最大数量的红色，但是没有绿色和蓝色，所以是红色。
#00ff00表示绿色，这个色值包含最大数量的绿色，但是没有红色和蓝色，所以是绿色。
#0000ff表示蓝色，这个色值包含最大数量的蓝色，但是没有红色和蓝色，所以是蓝色。
#000000表示黑色，这个色值没有颜色，表示没有光，所以是黑色。
#ffffff表示白色，这个色值包含最大数量的红色绿色和蓝色，组合到一起是白色。
十六进制的00到ff，是十进制的0到255，因此每种颜色都有256种取值，能够组合出来的颜色就是：256*256*256=16777216，这么多种色值足够可以让我们的页面变的丰富多彩。
这里的三原色为什么是红色、绿色、蓝色，而和我们学美术的时候的红色、黄色、蓝色不一样呢?因为学美术的时候用的是颜料的三原色，颜料的三原色利用的是光的反射原理。
3. RGB
RGB表示颜色的方式原理和十六进制是一样的，是利用光的三原色：红色，绿色，蓝色。
R表示red，红色。
G表示green，绿色。
B表示blue，蓝色。
取值从0到255，也可以是百分数。
rgb(red, green, blue)
例如：
rgb(255,0,0)或者rgb(100%,0,0)表示红色，
rgb(0,255,0)或者rgb(0,100%,0)表示绿色，
rgb(0,0,255)或者rgb(0,0,100%)表示蓝色，
rgb(0,0,0)或者rgb(0,,0,0)表示黑色，
rgb(255,255,255)或者rgb(100%100%,100%)表示白色，
4. HSL
HSL表示颜色的方法是通过色相，饱和度和亮度表示的。其中H是Hue色相，S是Saturation饱和度，L是Lightness亮度。
下图为HSL颜色模式：
请点击输入图片描述
H：色相。就是颜色名称。取值为是0到360。
S：饱和度。是色彩的纯度，取值是0%到100%。
L：亮度。取值为是0%到100%。
hsl(hue, saturation, lightness)
例如：
div{
width: 100px
height: 100px
background: hsl(100, 80%, 50%)
}
5. RGBA
RGBA颜色表示形式只是比RGB多了一个A。A表示Alpha透明度。取值是0到1.
rgba(red, green, blue, alpha)
例如：
div{
width: 100px
height: 100px
background: rgba(255, 0, 0, 0.5)
}
效果图：
6. HSLA
HSLA颜色表示形式只是比HSL多了一个A。A表示Alpha透明度。取值是0到1.
hsla(hue, saturation, lightness, alpha)
例如：
div{
width: 100px
height: 100px
background:hsla(100, 80%, 50%,0.8)
}
CSS就是一种叫做样式表（stylesheet）的技术。也有的人称之为层叠样式表（CascadingStylesheet）。
在主页制作时采用CSS技术，可以有效地对页面的布局、字体、颜色、背景和其它效果实现更加精确的控制。
只要对相应的代码做一些简单的修改，就可以改变同一页面的不同部分，或者页数不同的网页的外观和格式。
它的作用可以达到：
（1）在几乎所有的浏览器上都可以使用。
（2）以前一些非得通过图片转换实现的功能，现在只要用CSS就可以轻松实现，从而更快地下载页面。
（3）使页面的字体变得更漂亮，更容易编排，使页面真正赏心悦目。
（4）你可以轻松地控制页面的布局
。
（5）你可以将许多网页的风格格式同时更新，不用再一页一页地更新了。你可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。
