Color Mix
The CSS color-mix() function blends two colors in a specified color space (sRGB, oklch, hsl), enabling dynamic tints, hover variants, and design token variations entirely in CSS without a preprocessor.
Plain English
Before color-mix(), generating color variants — a lighter hover state, a semi-transparent version of your brand color — required either Sass/Less functions, JavaScript, or manually computing the hex value. color-mix() brings that power directly to CSS. You say "give me 30% of this blue mixed with white in the oklch color space" and the browser computes the exact result. The choice of color space matters: sRGB mixing creates muddy midpoints on saturated colors (the classic "brown in the middle" problem), while oklch produces perceptually uniform mixes that look cleaner. This makes color-mix() especially powerful for building hover states, disabled states, and tint scales from a single base token.
Technical
Syntax: `color-mix(in <color-space>, <color1> [<percentage>], <color2> [<percentage>])`. Example: `color-mix(in oklch, #3B82F6 30%, white)` — produces a light tint of the blue. Percentages indicate how much of each color contributes; they must sum to 100% (omitting one calculates the remainder). Color spaces: `srgb` (default, muddy midpoints), `hsl` (hue-preserving but saturated midpoints), `oklch` (perceptually uniform, best for tints/shades), `lab`, `display-p3`. Use with CSS custom properties: `--color-primary: #3B82F6; --color-primary-hover: color-mix(in oklch, var(--color-primary) 85%, black);` — the hover variant updates automatically if the base token changes. Alpha transparency: `color-mix(in srgb, blue, transparent 50%)` produces a 50% transparent blue, replacing `rgba()` in many cases. Browser support: all modern browsers (Chrome 111+, Firefox 113+, Safari 16.2+). Use `@supports (color: color-mix(in oklch, red, blue))` for progressive enhancement.
Live Demo
color-mix()
CSS color-mix() blends two colors in a given colorspace. Pick two colors, adjust the mix amount, and see the result update live.
mix
↑ Result
color-mix(in srgb, #6366f1 50%, #ec4899 50%)
color-mix() is native CSS — no JS or preprocessor needed for dynamic color blending.
Usage
✓ Good usage
Defining `--btn-hover: color-mix(in oklch, var(--color-primary) 85%, black)` as a CSS custom property — the hover state is always a perceptually consistent darkened version of the primary, and if the design team changes the primary token, the hover updates automatically.
✗ Bad usage
Using `color-mix(in srgb, red, green)` expecting a clean olive or yellow — sRGB mixes of complementary colors produce muddy browns. Always choose a perceptual color space like oklch for saturated mixing.
Recommended values
- Tint (lighter): color-mix(in oklch, var(--color) 70%, white)
- Shade (darker): color-mix(in oklch, var(--color) 85%, black)
- Hover variant: color-mix(in oklch, var(--color) 80%, black)
- Disabled state: color-mix(in oklch, var(--color) 40%, white)
- Semi-transparent: color-mix(in srgb, var(--color), transparent 30%)
- Prefer oklch for tint/shade scales; srgb for transparency
Common mistakes
- Defaulting to sRGB color space for tint/shade scales — it produces non-uniform brightness steps and desaturated midpoints.
- Summing percentages to more than 100% — the result is implementation-defined and inconsistent across browsers.
- Using color-mix() for colors that need exact brand hex values — color-mix() is for derived/calculated variants, not anchor brand colors.
- No @supports fallback — older browsers will receive an invalid value and the property will not apply at all.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Replace all hardcoded hover/active color variants with color-mix(). For every button and interactive element, derive hover state as `color-mix(in oklch, var(--color-primary) 82%, black)` and disabled state as `color-mix(in oklch, var(--color-primary) 40%, white)`. Use `color-mix(in srgb, var(--color-primary), transparent 20%)` for focus rings. All derived colors should reference the base token so updating one variable cascades everywhere.