CSS Function
color-mix()
The color-mix() function blends two colors in a specified color space by given percentages.
Syntax
color-mix(in colorspace, color1 p1%, color2 p2%)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| colorspace | ident | Yes | Interpolation color space: srgb, srgb-linear, lab, oklab, oklch, hsl, hwb, lch, xyz |
| color1 | color | Yes | First color to mix |
| color2 | color | Yes | Second color to mix |
| p1 / p2 | percentage | No | Mix percentages. Must sum to 100% or be individually specified |
Examples
50/50 mix in oklch
Equal mix of blue and red in OKLCH space.
css
color: color-mix(in oklch, blue, red);75/25 tint
75% white blended with Tailwind blue-500.
css
background: color-mix(in srgb, white 75%, #3b82f6);Darken with Tailwind
Darkening a Tailwind color using color-mix.
html
<div class="bg-[color-mix(in_oklch,theme(colors.blue.500)_80%,black)]">Darker</div>Browser Support
✓
Chrome
v111++
✓
Firefox
v113++
✓
Safari
v16.2++
✓
Edge
v111++
✓
Opera
v97++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
No direct utility. Use arbitrary values or CSS custom properties with color-mix()Frequently Asked Questions
Which color space should I use for mixing?▼
oklch generally produces the most natural results. srgb can create muddy midpoints. hsl may produce unexpected hue shifts.
Can I use color-mix with CSS variables?▼
Yes. color-mix(in oklch, var(--primary) 60%, white) is a powerful pattern for creating tints and shades from a single variable.
Explore CSS Color Tools
Try our free tools to work with color-mix() and other CSS color functions.
Open Tools