# 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:

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:

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);
```

### 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:

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...
Color

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....
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...
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...
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...
Color Tint (lighten)

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

Computer science from a data perspective