背景

之前的文章《我画了个🌈色彩叠加计算器》写到：我需要一个「色彩叠加计算器」工具，可以帮我方便的调试颜色。

现在工具已经做出来了，地址是tool.hullqin.cn/color-mixer…。

主要作用是，用户输入几个色号（允许有透明度），工具可以帮忙绘制出他们叠加在一起的效果。

但是，目前计算完毕后，是依靠取色器，让用户主动去查看新的颜色。一来不方便，二来在Mac上，取色的色号大概率不是网页中定义的色号。

Mac取色不准的原因

色域是根本原因。色域表示颜色的集合，描述的是色彩覆盖范围。最广的色域，是以人类肉眼可见光范围定义的。毕竟人类看不到的色彩也没有讨论的意义。

而屏幕上能展示的，由于物理限制，比人肉眼可见光的范围少。常见色域如下图：

sRGB

这是最经典的色域，是微软和Adobe等公司制定的标准。Windows、Web都是按照sRGB色域定义的。

目前我们普通人用的显示器，大都是sRGB显示器，因为其它广色域的显示器太太太贵了。

Adobe RGB

因为sRGB并不能完整的包含整个CMYK的色域空间，导致风光摄影中常见的绿色无法在印刷时体现。面对印刷业巨头的联合抵制和抗议，微软并没有认怂，他们之间的纠纷战争维持了三年之久，最后在Adobe公司的调解下，制定了Adobe RGB色域，这一更广阔的色域完美的包含了印刷所需的所有颜色。所以，这就是不少专业的摄影师都会使用Adobe RGB显示设备的原因。

从色域图中看到，Adobe RGB确实是最绿的。

DCI-P3

DCI-P3是美国电影行业提出的标准，覆盖了更多的绿色和红色，可以展示更加丰富绚烂的色彩效果。现在大型单机游戏画面越来越强调“电影级的震撼效果”，因此DCI-P3色域也被游戏行业广为推崇。

Display-P3

Mac上默认采用Display-P3色域，不是Web CSS采用的sRGB色域。这就导致：取色结果跟CSS定义的色号不一致。

如果要想解决这个问题，需要按上图，修改显示器的“预置”，改成sRGB。

此外，Mac内置的应用「数码测色计」，可以手动选择色域，但是它只能帮忙粗略换算，无法得到最准确的sRGB色值。

开发

因为Mac取色不准，所以我的「色彩叠加计算器」工具需要有计算色号叠加的功能，不然Mac用户无法取色获得准确的混合后的色号。

怎么计算呢？

• 方案一：自己搞明白CSS颜色混合算法，手算。
• 方案二：通过在canvas叠加多个颜色，而canvas是支持取色的，就可以利用原生能力帮我计算颜色混合了。

最终，我才用了方案二，代码也很简单：

const canvasEl = document.createElement('canvas');
canvasEl.style.display = 'none';
const ctx = canvasEl.getContext('2d');
for (const c of realColors) {
  ctx.fillStyle = c;
  ctx.fillRect(0, 0, 11, 11);
}
document.body.appendChild(canvasEl);
const pixel = ctx.getImageData(6, 6, 1, 1).data;
document.body.removeChild(canvasEl);
const rgbaColor = `rgba(${pixel[0]}, ${pixel[1]}, ${pixel[2]}, ${Math.round(pixel[3] * 1000 / 255) / 1000})`;

最终，得到了rgbaColor颜色字符串，就是realColors数组里各个色号混合的结果。

写在最后

我是HullQin，公众号线下聚会游戏的作者（欢迎关注公众号，联系我，交个朋友），转发本文前需获得作者HullQin授权。我独立开发了《联机桌游合集》，是个网页，可以很方便的跟朋友联机玩斗地主、五子棋等游戏，不收费无广告。还独立开发了《合成大西瓜重制版》。还开发了《Dice Crush》参加Game Jam 2022。喜欢可以关注我噢～我有空了会分享做游戏的相关技术，会在这2个专栏里分享：《教你做小游戏》、《极致用户体验》。