Table of Contents

About

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:

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:
Rendered by WebCode

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));
Rendered by WebCode

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:
Rendered by WebCode
1)
linear interpolation