就color 这个单词就知道，background-color是设置背景颜色的。在CSS 中，它为背景容器设置纯色，这里的纯色指的是非渐变色。话说人靠衣装，马靠鞍。background-color让背景容器显得更加帅气。
background-color属性的值有以下几种形式
系统定义的颜色名
HEX（十六进制）
rgb()/rgba()
hsl()/hsla()
transparent
比如：red、blue、black这些关键字就是系统定义的CSS颜色名，另外还有
其他颜色名请查看http://www.css88.com/book/css/appendix/color-keywords.htm#basic
其实我经常用的颜色就那么几类：white、black、blue、yellow、green、pink、yellowgreen、purple、tan、gray
比如：
background-color: white; background-color: green;在网页上表示颜色一般用的是加法混色的RGB 模式，而这里要讲的十六进制颜色是RGB 模式的“变种”，就像是生物学上说的基因和性状表现的关系，同一个基因因为环境的差异会有不同的性状表现，所谓橘生南国为橘，生北国则为枳。RGB 加法模式是基因，而rgb() /rgba() 和HEX 十六进制是基因的不同表现形式。
平时生活中，我们接触的都是十进制数字，因为方便。如果我们要翻拍“花钱买饼”这部经典剧。
十进制版的是：我今天花了100 块钱，买了25 张饼
二进制版的是：我今天花了01100100 块钱，买了00011001 张饼。
八进制版的是：我今天花了O144 块钱，买了O31 张饼。
十六进制版的是：我今天花了0x64 块钱，买了0x19 张饼。
对于上述非十进制的数字表达，你是不是和我一样有种保证不打死他的冲动。日常生活中我们用十进制很合适, 如果用其他进制表示生活中的数字，那我们只有哭晕在厕所了。
但是在其他领域可能用非十进制的更加容易应用，比如电路领域，关于位的操作，用二进制很合适。早期的以三为倍数的计算机（如12位）经常使用8进制，但现在以2为倍数的计算机（32位，64位）就不是很好用了，所以用的也不是很多。因为2进制表示一个很小的数都很长，所以就有了十六进制，一个十六进制数可以表示的数占二进制的4位，所以十六进制数可以很好地表示二进制，他们之间的转换非常容易。
说了一大堆，我没怎么听懂。那么，好，我们直奔主题。我们来探讨一下RGB 颜色值和十六进制颜色值是如何地下交易的。
RGB 模式的三原色是红（Red）、绿（Green）、蓝（Blue）。在CSS 中它们的值都是0~255（每个颜色都有 28 个值）。
比如：
rgb(255,255,255)表示纯白; rgb(0,0,0)表示纯黑。
这里的0~255是数字的十进制，还记不记得上面蹩脚的十六进制表示法，比如:
十进制100 用十六进制表示就是 161×6+160×4 ，即是64 。
十六进制大于等于10的位用a（十进制10）~f（十进制15）表示。
有图有真相，十六进制颜色是以”#”开头的，后面紧跟3对十六进制数字，第一对表示Red 颜色，第二位表示Green 颜色，第三对表示Blue 颜色。比如：
rgb(100,25,25)变换成十六进制颜色就是#641919
另外，如果每对中的数值相同，则可以省略写成一个，比如：
#44aaff可以简写成：#4af #cccccc可以简写成：#ccc
就像上面说过的，rgb() 是加法混合，它的书写格式是这样的：
rgb(100,25,25);其中第一个数字（100）表示Red 颜色，第二个数字（25）表示Green，第三个数字（25）表示Blue 颜色。数字越大（不超过255）则表示其对应的颜色加的越多。
你可能看到了，除了rgb() 外，还有rgba()。rgba() 是CSS 为rgb() 开的一个小灶，其中的a 表示Alpha 通道，表示不透明度。它就像是一个暗道，偷偷的偷走了RGB 的颜色，为了不偏袒，它会雨露均沾的偷（一个有道德的小偷）。a 的值为0~1之间的值，0表示全部偷走（透明色），1表示一点不偷（不透明），0.5表示每个（R、G、B）都偷走50%。比如：
rgba(100,25,25,0.5)也可以这样写：
rgba(100,25,25,.5)省略a 中0.5的0，只写.5
hsl() 是按照人类对颜色认知的习惯来生成的一种颜色表示法，H 表示色相，其值的范围是0~360，S 表示饱和度，其值范围是0~100%，L 表示亮度，其值范围是0~100%。色相就是纯色，其中
0/360表示红色
60表示黄色
120表示绿色
180表示青色
240表示蓝色
300表示品红色（紫色）
我的理解是：
饱和度表示纯色加灰度的量，加的灰越多饱和度越低，反之，加的灰越少则饱和度越高。S值为0%时颜色为灰色，100%时颜色最鲜艳，是纯颜色。。亮度表示纯色加白或加黑的量，加白亮度高，加黑亮度低。L值为0%时颜色为黑色；100%颜色为白色。
和rgba() 相似，hsla() 中的a 是Alpha 通道，表示不透明度,值为0到1。 比如：
hsl(120,30%,24%); hsla(120,30%,24%,.3);transparent 表示透明色，其相当于把rgba() 或hsla() 中的a值设置成0。利用transparent这个特性，可以做出各种意想不到的东西，不信你就试试。
背景颜色的范围
不像background-image有那么多的控制，background-color就background-clip能够控制，它的范围就是背景区域就是border-box区域，background-origin、background-position、background-repeat、background-size、和background-attachment都不能控制background-color。
原文链接
