从老朋友CSS说起我们熟悉的CSS风格的颜色表示方式。大致有以下几种。Canvas一般直接遵循这些写法，但是最后包含透明的写法有点不同。#RRGGBB：十六进制格式，红绿蓝分别用两个十六进制数表示。#RGB：简写十六进制格式，转换为6位格式时会重复三基色，例如#fb0->#ffbb00。rgb(R,G,B)：函数表达式，三原色用0到255的整数值表示。rgba(R,G,B,A)：包含透明度的函数表达式，其中alpha参数为0~1，需要指定透明度的颜色必须使用这种格式。作为前端人员，平时用的比较多，但是大家可能会疑惑，之前写的color字符串居然是16进制的？让我详细解释一下。这里R是红色（red），G是绿色（green），B是蓝色（blue）。这三种是显示器常用的三原色，属于叠加原色。百科摘录如下。【科普】原色是指不能通过其他颜色混合、调和得到的“基本色”。其他新颜色可以通过将原色按不同比例混合而产生。用一个数学向量空间来解释颜色系统，可以将原色作为空间中的一组基向量，组合出一个“颜色空间”。由于人的肉眼具有三种不同颜色的感光器，所以所见的色彩空间通常可以用三种基本颜色来表示，称为“三基色”。一般来说，叠加型的三基色是红、绿、蓝（又称三基色，用于电视机、投影仪等显示设备）；而减色法的三基色是品红、黄、青（多用于书籍、杂志等印刷）。解密后的色值每种颜色都是由三种原色组成的，所以我们需要告诉计算机每种原色的比例（浓度）。量化这个比例是0到255之间的一个整数，也可以说是256级。越大，即原色越多（越浓）。[PS]至于为什么有256关？因为在计算机中每一种原色都是用8位二进制（0或1）来表示的，即2的8次方一共是256。每种颜色有256级，所以它的组合可能是256*256*256=16777216。也就是说，一种颜色用24位二进制表示，换算成十进制就是0~16777215。到这里你应该能够理解上面CSS颜色表示方法中前三种的含义了。至于rgba(R,G,B,A)，加了A表示透明度。这是32位颜色系统的扩展版本。多出一个8位二进制表示透明度的高低，CSS将其简化为0~1。举个例子！以颜色#FF55F3为例进行说明。（0x开头表示十六进制数，js不区分大小写，至于不知道什么是十六进制数请自行百度）红色为0xFF，绿色为0x55，蓝色为0xF3。换算成十进制：红色为255，绿色为85，蓝色为243。也就是说这个值相当于rgb(255,85,243)。[PS]简单的转换方式，直接在控制台打印即可，如console.log(0xF3);，js默认输出一个十进制表示的字符串。颜色合成颜色理论学的差不多了，现在来看合成，知道了三基色的取值，如何用代码合成一个颜色？以上面的#FF55F3为例。现在我们知道每种颜色的值了。这里有两种方法：获取rgb(R,G,B)格式，直接使用js数字默认转成字符串。设r=0xFF；设g=0x55；设b=0xF3；设颜色=`rgb(${r},${g},${b})`；得到一个#RRGGBB格式的24位颜色值，二进制即：RRRRRRRRRGGGGGGGBBBBBBBBB红色值左移16位，绿色值左移8位，三者用“或”结合可以得到24位颜色值，然后转换成十六进制字符串。0xff<<16=1111111100000000000000000x55<<08=000000000101010100000000000000000xf3=00000000000000000000111100111OR=1111111111101010111111111111111111111111111111111111111111111111111111111111111110011//}`;颜色分解合成结束，现在考虑如何用代码分解颜色，即将一种颜色分离成红、绿、蓝。刚才说了rgb(R,G,B)格式，把字符串切开就可以搞定。重点关注#RRGGBB格式，其实就是第二种合成方式的逆过程。右移后的“与”运算，简单来说就是把想要的颜色值的位置移动到末尾，然后用“与”0xFF消除其他颜色。仍以#FF55F3为例。既然知道了这个字符串，就需要对三原色的值进行分解。将“#”号截掉，得到十六进制字符串；红色：右移16位，与0xFF进行“与”运算；绿色：右移8位，与0xFF进行“与”运算；blue:直接用0xFFand”运算进行“AND”运算。letcolor=parseInt('#FF55F3'.slice(1),16);letr=color>>16&0xFFletg=color>>8&0xFFletb=颜色＆0xff以绿色提取过程为例：0xff55f3=11111111010101011111111111111110XFF555F3>>8=0000000000111111111010101010101010101010101010101010101010XFF为了健壮性会打包成更合理的工具。js工具utils.colorToRGB()中的两个函数colorToRGB()和parseColor()用于将#RRGGBB格式或任意数字转换成rgb(R,G,B)或rgba(R,G,B,A);parseColor()用于将#RRGGBB格式转换为数字，将数字转换为#RRGGBB格式。
