Question

I have this function that takes two arguments. They are arrays in the [r, g, b] format.

function mix(color1, color2) 
{
    var r = Math.round((color1[0] + color2[0])/2);
    var g = Math.round((color1[1] + color2[1])/2);
    var b = Math.round((color1[2] + color2[2])/2);

    return [r, g, b];
}

If I try to mix red (255, 0, 0) and blue (0, 0, 255), tt gives me [128,0,128], which is purple. But if I try mixing blue (0, 0, 255) and yellow (255, 255, 0)

console.log(mix([255,0,0], [0,0,255]));
console.log(mix([255,255,0], [0,0,255]));

it gives me gray [128, 128, 128], instead of green. Why is this happening?

Answer 1

Because you are calculating resulting color as the arythmetic average of two base colors.

Colors work in a different way depending on what you mix. If you would mix paints of many different colors, the result would be dark, nearly black. But if you would mix lights of different colors, the result would be nearly white. First define the process you want to simulate – I bet it is the one that is similar to mixing paints, correct?

Two basic methods of mixing colors are:

• subtractive mixing, which looks like that:

  

• additive mixing, which looks like that:

  

What you need is subtractive color mixing, whose output should be in RGB notation.