How Does CSS color-mix() Blend Colors?

The CSS color-mix() function enables developers to take two distinct color values and combine them into a single resultant color directly within standard stylesheets. By specifying a color space alongside optional percentage weights for each input, browsers mathematically interpolate the color channels to produce smooth transitions, transparent tints, or balanced intermediate hues without requiring CSS preprocessors or JavaScript calculations.

Syntax and Basic Mechanics

The core structure of color-mix() requires defining an interpolation color space followed by two color values, each capable of accepting a custom percentage.

color-mix(in <color-space>, <color-1> [percentage], <color-2> [percentage])

By default, if no percentages are specified, the browser assigns a 50% weight to each color, creating an even midpoint blend.

/* Creates an even 50/50 mix of blue and white */
background-color: color-mix(in srgb, blue, white);

/* Creates a tint with 80% blue and 20% white */
background-color: color-mix(in srgb, blue 80%, white);

When specifying percentages, the browser normalizes the values so their total sum equals 100%. If a single percentage is provided (e.g., blue 70%), the second color automatically receives the remaining balance (30%). If the combined percentages total less than 100%, the browser applies an alpha channel multiplier, creating a partially transparent result.

The Role of Color Spaces

The in <color-space> parameter determines the mathematical model the browser uses during channel interpolation. Blending identical colors in different color spaces yields noticeably different visual results.

Rectangular Color Spaces (sRGB, Display-P3, Oklab)

In rectangular color spaces like srgb or oklab, the browser calculates linear or non-linear averages across independent red, green, and blue (or lightness and chromaticity) axes. Modern spaces like oklab and lab are perceptually uniform, preventing the muddy grayish transitions often seen when blending complementary colors in standard srgb.

Polar Color Spaces (HSL, HWB, LCH, Oklch)

In cylindrical or polar spaces, color is represented via hue angles (0° to 360°), chroma/saturation, and lightness. Because hues sit on a circular wheel, blending between two angles requires choosing a path around that circle. CSS provides hue interpolation modifiers to control this trajectory:

/* Blends yellow and blue via the longer arc of the hue circle in Oklch */
background-color: color-mix(in oklch longer hue, yellow, blue);

Common Use Cases