javascript - 什么颜色格式允许正确的颜色值 "adding"或 "mixing"？

Question

我需要将数字(科学数据)的加法表示为相应的“真实”颜色。 (添加剂混合)

例如红色 + 蓝色 = 洋红色

但是，可能会有一小部分的红色和大部分的蓝色，这会改变绿色的阴影。

问题

是否有颜色格式(RGB、HEX 等)或我可以用来轻松计算相应颜色的某种方法？

背景

我需要 animate cryptography使用“颜色混合”类比。 A B 和 C 分别代表一种颜色。我需要演示的颜色组合是:

一个

乙

中号

甲+乙

C + B

A + B + C

我的目标是获取大量(私钥)并使其代表一种颜色……将 96 位熵稀释为 RGB、HSV 或其他可以“添加”的值。

Answer 1

您链接的示例视频使用了颜色添加(真的很酷，所以 +1)。提示是他们在动画之前使用的实际灯:Light (electromagnetic radiation) is additive .维基百科的示例图像与您的示例相匹配，红色 + 蓝色 = 洋红色。

视频的另一个关键概念是反色，视频将其描述为“互补色，当添加到它[原始颜色]时会产生白色”
在数学上，您可以将其应用于任何颜色操作和表示以获得您想要的视觉效果，只要您选择的操作具有精确的数学逆。为了演示，让我们看一下他们给出的示例，引用 list of web colors和上图。
爱丽丝的 secret 颜色:红色。 #FF0000爱丽丝的公共(public)颜色:青色。 #00FFFF从技术上讲，它的 Web 名称是 Aqua，但很容易验证 #FF0000 + #00FFFF = #FFFFFF白色，所以它是一样的。
(他们假设很难弄清楚红色 + 青色 = 白色；这显然是错误的，但这是视觉颜色表示的必要自负)。
Bob 想与 Alice 分享的颜色:黄色 #FFFF00Bob 实际传输的颜色:绿色(= 黄色 + 青色)#008000颜色 Alice 从绿色解码:黄色(= 红色 + 绿色)
可是等等!最后两个步骤没有意义。

Green   = Yellow  + Cyan
#008000 = #FFFF00 ? #00FFFF

Yellow  = Red     + Green
#FFFF00 = #FF0000 ? #008000

然而，这每一步都与维基百科的加色轮相匹配。你可能已经为自己想了这么多。颜色添加对物理光如此有效的原因是真实强度是无限的。我们的眼睛是模拟的，我们的瞳孔会自动扩张和收缩以获得更暗或更亮的颜色。 (而且我们会不由自主地闭上眼睛面对超强光)。
颜色数字表示的问题在于它们是有界的，这意味着它们可能会出现溢出。您已将问题标记为 css , 这也不异常(exception)。有几种颜色表示available in CSS ，包括名称、RGB 十六进制三元组或六元组、100% 比例的 RGB 以及 @JBzd 指出的色相饱和度亮度 (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 .使维基百科的语言适应我们的加密示例:

With Screen blend mode the values of the two colors are inverted, multiplied, and then inverted again. The result is a brighter picture.

screen(a,b) = 1 - (1 - a)x(1 - b), where A is Alice's secret color and B is the color Bob sent to 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 的简单片段.它所做的只是用我们熟悉的 RGB 原色的 3 个重叠圆圈创建一个 Canvas ，并将 Canvas 合成操作设置为“屏幕”，就像这样，CSS 完成了复制颜色添加示例的艰苦工作。