javascript - What color format allows for correct "adding" or "mixing" of the color value? -

i need represent addition of numbers (scientific data) corresponding "real" color. (additive mixing)

e.g. red + blue = magenta

however, there small percent of red, , large percent of blue, change shade of green.

question

is there color format (rgb, hex, etc) or method can use calculate corresponding color?

background

i need animate cryptography using "color mixing" analogy. b , c represent color each. color combinations need demonstrate are:

• a
• b
• c
• a + b
• c + b
• a + b + c

my goal take large number (private key) , make represent color... diluting 96 bits of entropy rgb, hsv or other value can "added".

the example video linked uses color addition (and cool, +1). tipoff actual lamps use before animation: light (electromagnetic radiation) additive. wikipedia's example image matches example, red + blue = magenta.

the other key concept of video inverse color, video describes "the complimentary color, when added [the original color] produces white"

mathematically, can apply color operation , representation visual effect want, as long as operation choose has exact mathematic inverse. demonstrate, let's @ example give referring list of web colors , above image.

alice secret color: red. #ff0000
alice's public color: cyan. #00ffff
technically, web name aqua, it's easy verify #ff0000 + #00ffff = #ffffff white, it's same thing. (they state assumption it's hard figure out red + cyan = white; false, it's necessary conceit visual color representation).
color bob wants share alice: yellow #ffff00
color bob transmits: green (= yellow + cyan) #008000
color alice decodes green: yellow (= red + green)

but wait! last 2 steps don't make sense.

green   = yellow  + cyan #008000 = #ffff00 ? #00ffff  yellow  = red     + green #ffff00 = #ff0000 ? #008000 

and yet every step of matches additive color wheel wikipedia. you've figured out already. reason color addition works physical light real intensity unbounded. our eyes analog , our pupils dilate , constrict dimmer or brighter colors automatically. (and involuntarily close our eyes against super-intense light).

the trouble digital representations of color bounded, meaning can experience overflow. you've tagged question css, no exception. there several color representations available in css, including name, rgb hexadecimal triplet or sextuplet, rgb on 100% scale, , hue-saturation-lightness (hsl) @jbzd points out. of these bounded, , w3c specification describes intended behavior of values out-of-bound: values variously clipped or constrained gamut of allowed values. picking 1 schema isn't going save inherit bounds.

what means animation if blindly add color values together, end white, #ffffff, rgb(100%, 100%, 100%), or hsl(0, 100%, 100%) large number of combinations. (in fact, happen half of every possible combination of 2 colors. that's not visually interesting if you're allowing full range of input colors.) indeed, simple overflow capping our final 2 examples video produce:

yellow  + cyan    = ?  #ffff00 + #00ffff = #ffffff : white!  red     + green   = ? #ff0000 + #008000 = #ff8000 : kind of orange, actually. 

the conclusion digital addition not equivalent physical addition. goes fundamental difference between physical , digital representations described above. distinction not lost on photographers, programmers, et al. , there exist large variety of color manipulation , combination operations, referred 'in trade' blend modes. turns out, blend mode closely matches visual color addition called screen. adapting wikipedia's language our cryptographic example:

with screen blend mode values of 2 colors inverted, multiplied, , inverted again. result brighter picture.

screen(a,b) = 1 - (1 - a)x(1 - b), alice's secret color , b color bob sent alice.

but work? css3 standard includes screen 1 of blend modes, , should work nicely whatever animation effect want define. check out:

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 simple snippet adapted this excellent css tricks article on blend modes. create canvas 3 overlapping circles of our familar rgb primary colors , sets canvas composite operation 'screen', , that, css hard work of replicating color addition example.