用了很长时间的RGB方式来作为css中的颜色样式，却不知道它是什么原理，据说这还是一道面试题，这篇文章就用来总结一下它的原理。

我们生活中最常见的光就是太阳光，据说在1672年牛顿用三棱镜将太阳光分离成了赤橙黄绿蓝紫青七色光。随着科技的进步，人们发现肉眼细胞对红绿蓝三种颜色较为敏感，而且这三种颜色按照不同比例混合会制造出很多其他的颜色，比如7色光中的其他4种颜色就可以用红绿蓝配比出来，是不是很神奇？这有点像电子数字，可以通过8衍生出其他九种数字。

图1

基于上面的理论，咱们就可以在计算机世界里用红绿蓝的搭配来显示各种颜色。

目前RGB方式是将这三种颜色各用一个字节表示，每个字节8位，每位的大小是0到255，即这三种颜色每一个有256个选择，RGB一共可以表示256*256*256=16777216种颜色。虽然这并不能完全描述自然界中所有的光，但已经可以满足正常的生活需要了。

在CSS中，我们的写法如下：

#p1 {background-color:rgb(255,0,0);} /* 红 */
#p2 {background-color:rgb(0,255,0);} /* 绿 */
#p3 {background-color:rgb(0,0,255);} /* 蓝 */

RGB括号中每一位数字都要在0到255之间。

CSS颜色还有另外一种写法，如下：

#p1 {color: #001122}

因为每个颜色是8位，所以还可以将每位颜色转成2位的16进制，三种颜色就是6位。

对于上面重复的数字还可以简写，如下：

#p1 {color: #012}

在CSS代码规范里面咱们可以做一些代码的检测，至少可以少写几个字符。

存储格式

1、RGB565

这种方式用16位二进制来表示一个像素的颜色，红色5位，绿色6位，蓝色5位；

2、RGB55

这种方式也是用16位表示一个像素的颜色，但是最高位是保留位，不用，剩下的15位被三种颜色平分，即各五位。

3、RGB24

这种方式每个颜色用一个字节表示，和原理中说的方式一致。

4、RGB32

这种方式每个颜色用一个字节表示，还剩一个字节为保留位，不用。

5、ARGB32

这种方式用4个字节表示颜色，前三个字节分别表示红、绿、蓝，最后一个字节表示透明度alpha。

总结

在实际生活中我们有很多三原色的应用场景，比如电视，它显示的每个像素点可以认为是隐藏在屏幕后面的三种颜色的小灯照射形成的。所以三原色原理不仅应用在web页面中，生活中的应用场景也随处可见。