Color - Mixture / Composite (Mix / Blend)


Color mixtures are a mixture of two colors.

There is a lot of way to mix (or blend) two colors.

The most known is the addition of primary color that creates composite colors (secondary, ..) located at the intermediate and interior points of color wheels. They are also known as composite hues.

If you mix/blend:

Function / Blend mode

There is a lot of blend / mixture mode.

This section shows some of them.

Mix (Linear Interpolation)

The linear interpolation 1) 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:


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 (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]

  • Output:


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(addition(red, green));


Css supports this blend mode

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

  • The 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"/>
  • The screen mode
circle { mix-blend-mode: screen; }
  • The output:

Powered by ComboStrap