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:

  • shorter hue: Takes the shortest angular distance between the two hues (default).
  • longer hue: Takes the longer path around the perimeter.
  • increasing hue: Travels in the direction of increasing degree values.
  • decreasing hue: Travels in the direction of decreasing degree values.
/* 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

  • Dynamic Tints and Shades: Adjusting background and border states (such as :hover or :active) by mixing a base theme variable with black or white.
  • Semi-Transparent Overlays: Blending a theme color with the transparent keyword to create dynamic alpha channels while preserving the exact base color.
  • Palette Generation: Creating coherent intermediate swatches between primary and secondary brand colors directly inside CSS custom properties.