color-mix()

The color-mix() function is used to blend 2 colours together. Typically a base colour maybe mixed with a certain amount of black to create shades or with white to create tints. However you can use any two colours.

The function takes 3 arguments: the colour space, the first colour and the second colour.

If you only include the percentage of one colour the other is calculated. So below the amount of red will be 90%. That is 100% - 10%.

div {
    background: color-mix(in oklch, red, black 10%);
}

Here we mix two colours. The hue of the second colour can be changed with the slider.

Below we blend two different colours.

Transparency

You can also make one of the colours transparent.

Also if you use 2 percentage values for 2 colours and they don’t add up to 100% the the remaining percentage is transparency.

So below would leave 65% for transparency:

div {
    background-color: color-mix(
        in srgb,
        red 10%,
        blue 25%
    )
}

Codepen example

Below is an example of what can be done using color-mix() by Stuart Robson.

See the Pen Quick and Dirty Colour Palettes using color-mix() by Stuart Robson (@sturobson) on CodePen.