CSS color-mix() with Custom Properties

CSS color-mix() with Custom Properties

The color-mix() function is a native CSS feature that blends two colors in a specified color space. Combined with CSS variables, it enables dynamic shade generation without build tools.

Basic Syntax

.element {
  /* Mix 70% primary with 30% white = lighter tint */
  background: color-mix(in srgb, var(--primary) 70%, white);
}

Creating Tints and Shades

:root {
  --primary: #3b82f6;

  /* Auto-generated tints */
  --primary-light:  color-mix(in srgb, var(--primary) 30%, white);
  --primary-lighter: color-mix(in srgb, var(--primary) 15%, white);

  /* Auto-generated shades */
  --primary-dark:   color-mix(in srgb, var(--primary) 70%, black);
  --primary-darker: color-mix(in srgb, var(--primary) 50%, black);
}

Perceptual Color Spaces

The in oklch color space produces more perceptually uniform blends:

.element {
  background: color-mix(in oklch, var(--primary) 50%, var(--secondary));
}

Hover State Pattern

Generate hover colors dynamically from any base:

.button {
  --bg: var(--primary);
  background: var(--bg);
}
.button:hover {
  background: color-mix(in oklch, var(--bg) 85%, black);
}

This approach works with any --bg value, making the hover effect theme-agnostic.

Browser Support

color-mix() is supported in Chrome 111+, Firefox 113+, and Safari 16.2+. For older browsers, use computed hex fallbacks generated by the CSS Variable Generator.

Advantages Over Pre-Computed Shades

• Fewer variables to maintain (1 base vs 11 shades)
• Dynamic — changes propagate when the base variable changes at runtime
• Smaller CSS output for large palettes