您链接的示例视频使用了颜色添加（真的很酷，所以 +1）。提示是他们在动画之前使用的实际灯：Light (electromagnetic radiation) is additive。 Wikipedia 的示例图片与您的示例相匹配，Red + Blue = Magenta。
视频的另一个关键概念是反色，视频将其描述为“互补色，当添加到 [原始颜色] 时会产生白色”
在数学上，您可以将其应用于任何颜色运算和表示以获得您想要的视觉效果，只要您选择的运算具有精确的数学逆。为了演示，让我们看一下他们给出的示例，参考list of web colors 和上图。
爱丽丝的秘密颜色：红色。 #FF0000
爱丽丝的公共颜色：青色。 #00FFFF
从技术上讲，它的网络名称是 Aqua，但很容易验证 #FF0000 + #00FFFF = #FFFFFF White，所以它是一回事。
（他们假设很难弄清楚红色 + 青色 = 白色；这显然是错误的，但这是视觉颜色表示的必要自负）。
Bob 想与 Alice 分享的颜色：黄色 #FFFF00
Bob 实际传输的颜色：绿色（= 黄色 + 青色）#008000
颜色 Alice 从绿色解码：黄色（= 红色 + 绿色）
但是等等！最后两个步骤没有意义。
Green = Yellow + Cyan
#008000 = #FFFF00 ? #00FFFF
Yellow = Red + Green
#FFFF00 = #FF0000 ? #008000
然而，这每一步都与维基百科的加色轮相匹配。你可能已经为自己想了这么多。颜色添加对物理光如此有效的原因是真实强度是无限的。我们的眼睛是模拟的，我们的瞳孔会自动扩张和收缩以获得更暗或更亮的颜色。 （而且我们会不由自主地闭上眼睛，对着超强光）。
颜色的数字表示的问题在于它们是有界的，这意味着它们可能会出现溢出。你已经用css 标记了这个问题，这也不例外。 @JBzd 指出，有几种颜色表示 available in CSS，包括名称、RGB 十六进制三元组或六元组、100% 比例的 RGB 和色相饱和度亮度 (HSL)。所有这些都是有界的，W3C 规范描述了超出范围的值的预期行为：值被各种裁剪或限制在允许值的范围内。选择一种模式不会让您摆脱继承界限。
这对您的动画意味着，如果您盲目地将颜色值相加，那么您最终会得到白色、#FFFFFF、rgb(100%, 100%, 100%) 或 hsl(0, 100%, 100%) 的大量组合。 （事实上，这将发生在两种颜色的每种可能组合中的一半。如果您允许输入颜色的全部范围，这在视觉上并不是很有趣。）确实，简单的溢出限制了视频中的最后两个示例生产：
Yellow + Cyan = ?
#FFFF00 + #00FFFF = #FFFFFF : white!
Red + Green = ?
#FF0000 + #008000 = #FF8000 : kind of orange, actually.
唯一的结论是数字加法不等于物理加法。这可以追溯到我上面描述的物理表示和数字表示之间的根本区别。摄影师、程序员等人并没有失去这种区别。因此存在各种各样的颜色操作和组合操作，在“行业”中称为blend modes。事实证明，最接近视觉颜色添加的混合模式称为Screen。使维基百科的语言适应我们的加密示例：
在屏幕混合模式下，两种颜色的值会被反转、相乘，然后再次反转。结果是一张更亮的照片。
screen(a,b) = 1 - (1 - a)x(1 - b)，其中 A 是 Alice 的秘密颜色，B 是 Bob 发送给 Alice 的颜色。
但它有效吗？ CSS3 标准将屏幕作为其混合模式之一，它应该可以很好地用于您想要定义的任何动画效果。看看吧：
var canvas = document.getElementById('canvas');
canvas.width = 300;
canvas.height = 300;
var ctx = canvas.getContext('2d');
/* globalCompositeOperation :
normal | multiply | screen | overlay |
darken | lighten | color-dodge | color-burn | hard-light |
soft-light | difference | exclusion | hue | saturation |
color | luminosity
*/
ctx.globalCompositeOperation = 'screen';
//red
ctx.fillStyle = 'rgb(255,0,0)';
ctx.beginPath();
ctx.arc(150, 100, 100, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
//green
ctx.fillStyle = 'rgb(0,255,0)';
ctx.beginPath();
ctx.arc(100, 200, 100, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
//blue
ctx.fillStyle = 'rgb(0,0,255)';
ctx.beginPath();
ctx.arc(200, 200, 100, 0, Math.PI * 2, true);
ctx.closePath();
ctx.fill();
<canvas id="canvas"></canvas>
这是一个改编自this excellent CSS Tricks article on blend modes 的简单sn-p。它所做的只是创建一个具有我们熟悉的 RGB 原色的 3 个重叠圆圈的画布，并将画布合成操作设置为“屏幕”，就像这样，CSS 完成了复制颜色添加示例的艰苦工作。