Color - Mixture / Composite (Mix / Blend)

Monet Femme Ombrelle 1886 Logo


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:

Discover More
CSS - Function

A css function is a function that can be used in a CSS property value to calculate complex styling requirement. Css function are mostly used with CSS Variable. Below we define the space unit variable...
Monet Femme Ombrelle 1886 Logo

A color is: a light wave in a range called the visual spectrum (that our eye see) the absence of light or mixed (achromatic colors (white, black, gray) in computer a data type that denotes a color....
Subtractive Color Wheel
Color - (Wheel|Circle|Disc) (Hue Organization)

After Newton had used a prism to separate daylight and count seven individual colors (hue), it appeared to him that this was a closed system. By taking the violet end of the spectrum and linking it to...
Hue Scale
Color - Hue (Wavelength, type of color) (Shades of red, orange, yellow, green, blue, and purple)

A Hue is a color of the rainbow. They can be highly simplified as being the color name that gives a particular wavelength (thenwithout white, black or gray) It is one of the main properties describing...
Pure Hue Tint Tone Shade
Color - Shade (Darken)

A shade is a a color function that increases darkness (ie decrease lightness). You can darken/shade with two methods: shade: a mixture with the black color. darken: decreasing the lightness directly...
Pure Hue Tint Tone Shade
Color Tint (lighten)

A tint is a mixture of a color with white, which increases lightness.
Card Puncher Data Processing
Datacadamia - Data all the things

Computer science from a data perspective

Share this page:
Follow us:
Task Runner