color-mix() Function

color-mix() blends two colours together in a specified colour space, returning a new colour. It is supported in all modern browsers and eliminates the need for preprocessor colour functions like Sass's mix().

Syntax

color-mix(in <colorspace>, <color1> <percentage>, <color2>). If the percentages do not add up to 100 %, the remainder is transparent, effectively diluting the result.

Colour Spaces

The colour space affects the midpoint of the blend. in srgb is the default. in oklch produces more vibrant, perceptually even blends. in hsl can create rainbow effects by interpolating hue.

Practical Uses

Generate tints, shades, and disabled-state colours without a preprocessor.

Example

:root {
    --brand: #1a73e8;
    --white: #ffffff;
    --black: #000000;
}

/* 20% brand colour — a very light tint */
.tint-20 {
    background: color-mix(in srgb, var(--brand) 20%, var(--white));
}

/* 80% brand colour — a strong shade */
.shade-80 {
    background: color-mix(in srgb, var(--brand) 80%, var(--black));
}

/* Vibrant mid-blend using oklch */
.mix-oklch {
    background: color-mix(in oklch, #ff6b6b, #6b6bff);
}

/* Disabled button — 40% of brand mixed with white */
.btn:disabled {
    background: color-mix(in srgb, var(--brand) 40%, var(--white));
    cursor: not-allowed;
}

/* Semi-transparent overlay via partial percentages */
.overlay {
    background: color-mix(in srgb, navy 50%, transparent);
}

CSS

Full Editor

Pro Tip

Combine color-mix() with CSS custom properties to build entire design-token colour scales at runtime — no build step, no Sass, just one base colour variable and math in the browser.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned