Color - Mixture / Composite (Mix / Blend)

Mix (Linear Interpolation)

The linear interpolation ¹⁾ is best known as a the mix function. It calculates the point in the middle of the segment where the total of the colors made up 100% of the colors.

This interpolation function is:

• the sass mix function (test it at http://sass.js.org/)
• or in CSS color-mix function

Syntax:

mix($color1, $color2, $weight); // weight is in %

With a percentage of 60, there is:

• 60% of color2
• 40% of color1

Implementation example with rgb color

mix =  ([r0,g0,b0],[r1,g1,b1],k) => [
  (lerp(r0,r1,k)),
  (lerp(g0,g1,k)),
  (lerp(b0,b1,k))]

• lerp (shorthand for linear interpolation)

lerp = (x1, x2, k) => {
  k = k === undefined ? 0.5 : k
  return x1 + (x2 - x1) * k
}

• Usage (swatch is an utility function)

let red = [255,0,0];
let green = [0,255,0];
let olive = mix(red,green,0.5); // olive - half red - half green [128,128,0]

swatch(red);
swatch(green);
swatch(olive);

• Output:

Addition

An addition is an addition of 100% of each colors (100% red + 100% green or [255,255,0])

let addition = ([r1,g1,b1],[r2,g2,b2]) => {
    return [r1+r2,g1+g2,b1+b2];
};
let red = [255,0,0];
let green = [0,255,0];
swatch(red);
swatch(green);
swatch(addition(red, green));

CSS

Css supports this blend mode

For instance, with the screen mode (equivalent to a monitor)

• The svg

<svg>
  <circle cx="40" cy="40" r="40" fill="red"/>
  <circle cx="80" cy="40" r="40" fill="lime"/>
  <circle cx="60" cy="80" r="40" fill="blue"/>
</svg>

• The screen mode

circle { mix-blend-mode: screen; }

• The output: