光影色彩中的混色计算

[abbshr]

今天简单的看了看色彩学和颜色理论，终于明白视觉错觉和基色选择的原理，涨了不少姿势。

在玩前端时没少和颜色打交道，大多时间里也都是选选配色。其实我觉得配色不仅仅是看着颜色表一个个试，还应该有混色计算，补色计算等等，例如你想写一个图像处理的软件，其中的反色，混色，颜色渐变等等就需要考虑了。

高中物理讲过，“红（R）、绿（G）、蓝（B）” 是光的三原色，也称三基色。在做网页配色时常见的RGB值指的就是红绿蓝三色各自强度值以16进制表示的拼接值。
三种色光按不同比例混合就能得到所有颜色（七色）的色光，而同等强度的三基色混合，就会出现灰色，灰色代表一个范围（不含色光）：[ 纯黑, 纯白 ]，其间任何一种颜色都属于灰色。

要说混色理论，首先得了解一些颜色的基础知识。

除了三基色RGB，还有另外一种三基色CMY。按人眼能观察到的颜色来源分类，前者属于光源三基色，如灯光、显示器；而后者属于染料三基色：青（C）、洋红（M）、黄（Y），如报纸、书等本身不发光的物体。
其实染料三基色也是基于光源三基色而得到的。因为青色吸收红色，洋红吸收绿色，黄色吸收蓝色，这样就再次组成了红绿蓝三基色，通过控制CMY各自的强度，同样达到产生各种色彩。

下面简单介绍RGB三原色的混色计算。

由于不同波长的色光叠加会产生另一种色光，而且这一叠加可能蕴含某种规律。我们将三原色各自的强度以二位16进制数字表示，也就是将强度人为分成256个点。先从最简单的黑色#000000，白色#FFFFFF考虑。黑色是三色皆尽，白色是三色至上，而#000000 + #FFFFFF = #FFFFFF，也就是说“在伸手不见五指的黑夜里手电筒里射出的是白光”，数字的设定恰好符合感官的描述。

对于基本的混色计算，我们可以从单一颜色来分解：比如颜色值#60b044，可以拆成颜色1#600000、颜色2#00b000以及颜色3#000044三色光的叠加，当然，其他值的组合也行，只要满足R的加和是60，G的加和时b0，B的加和是44。所以，任意色的普通混色就是对应相加。

CMY的同理，只不过是RGB的补色运算，即：
CMY：（x，y，z） => RGB：（#FF-x，#FF-y，#FF-z）

这样我们就可以写一个混色函数：

function mix(ca, cb) {
  r = ca >> 16 + cb >> 16
  g = ca & 0xff00 >> 8  + cb & 0xff00 >> 8
  b = ca & 0xff + cb & 0xff
  return (r > 0xff ? 0xff : r) << 16 + (g > 0xff ? 0xff : g) << 8 + b > 0xff ? 0xff : b;
}