The CSS color-mix() Function: Dynamic Color Blending in the Browser

The CSS color-mix() function is one of the most powerful additions to modern CSS. It lets you blend two colors in a specified proportion, directly in your stylesheet, with no build step or preprocessor required.

Basic Syntax

/* 70% blue, 30% white = light tint */
background: color-mix(in srgb, #4f46e5 70%, white);

/* 80% primary, 20% black = darker shade */
background: color-mix(in srgb, var(--primary) 80%, black);

The first argument specifies the color space (in srgb, in oklch, etc.). Then two colors with optional percentages that must total 100%.

Practical Uses with Your Palette

Hover states: Instead of defining a separate hover color, mix your primary with black: color-mix(in srgb, var(--primary) 85%, black). This darkens by 15%, consistent across any primary color.

Tints: Mix with white to create light background variants: color-mix(in srgb, var(--primary) 10%, white) gives you a subtle tinted background.

Disabled states: Mix with gray to desaturate: color-mix(in srgb, var(--primary) 40%, #9ca3af).

Color Space Matters

Mixing in srgb is the most predictable and widely supported. Mixing in oklch produces perceptually uniform blends (better for gradients) but has less browser support. For most palette work, srgb is the right choice.

How This Relates to PaletteRx

PaletteRx exports your base colors as CSS custom properties. With color-mix(), you can derive an entire shade system from those base values without any additional tooling. Your PaletteRx export becomes even more powerful because each color can generate unlimited variants dynamically.