The color-mix() CSS function is a <color> function that allows you to blend two colors together in a specified color space to produce a new computed color value. It enables precise control over color interpolation directly in CSS, making it especially useful for generating tints, shades, and design variations without manually calculating color values.

Rather than defining multiple hard-coded colors, color-mix() lets you dynamically combine two color inputs using percentage weights. The browser calculates the result at render time, which makes it ideal for theme systems, hover states, overlays, and design tokens.

The function works anywhere a color value is accepted, including properties such as color, background-color, border-color, and box-shadow.

How It Works

When two colors are mixed, the browser interpolates them within a chosen color space. The selected color space affects how the blending behaves visually. For example:

• Perceptual spaces like Lab or OKLab produce more natural-looking blends.
• RGB-based spaces blend channel-by-channel and may produce less visually uniform transitions.

If percentages are not explicitly defined for both colors, the remaining percentage is automatically calculated so that the total equals 100%.

Common Use Cases

1. Creating a Tint (Mixing with White)

.button {
  background-color: color-mix(in srgb, blue 80%, white 20%);
}

This produces a lighter version of blue without needing to manually calculate a new hex value.

2. Creating a Shade (Mixing with Black)

.card {
  background-color: color-mix(in srgb, #ff6b6b 70%, black 30%);
}

This darkens the base color smoothly.

3. Blending Two Brand Colors

.banner {
  background-color: color-mix(in oklab, #4f46e5 50%, #ec4899 50%);
}

Using a perceptual color space like OKLab often produces more visually balanced results than sRGB.

4. Creating Transparent Variations

You can mix a color with transparent to create opacity variations:

.alert {
  background-color: color-mix(in srgb, red 60%, transparent);
}

This can sometimes replace rgba() when you want percentage-based transparency blending.

Benefits of Using color-mix()

• Reduces the need for precomputed color palettes
• Works directly in modern CSS without preprocessors
• Supports advanced color spaces
• Improves maintainability in design systems
• Enables dynamic theming

Browser Behavior and Computation

The resulting color is computed during style calculation and behaves like any other color value. Once calculated, it can be inherited or cascaded like standard color definitions. Because it is resolved at render time, it can be combined with CSS custom properties for powerful theming systems.

Example using a CSS variable:

:root {
  --brand: #2563eb;
}

.button:hover {
  background-color: color-mix(in srgb, var(--brand) 85%, white);
}

Design Considerations

The chosen color space significantly affects the final appearance. Perceptually uniform spaces like OKLab or Lab often produce smoother gradients and more predictable blends compared to traditional sRGB interpolation.

When consistency across devices is important, test blends in different browsers, as color space support may vary slightly depending on rendering engines.