What is CSS color-mix()?

color-mix() is a CSS function that blends two colors together in a specified color space. It is part of CSS Color Level 5 and is supported in all modern browsers. Example: color-mix(in oklch, #a855f7 50%, #6366f1) blends purple and indigo equally in OKLCH space.

Which color spaces does color-mix() support?

CSS color-mix() supports: srgb, srgb-linear, hsl, hwb, lab, lch, oklab, oklch, display-p3, a98-rgb, prophoto-rgb, and xyz. OKLCH and OKLAB are recommended for perceptually uniform blending because they produce more natural-looking results.

What does the percentage mean in color-mix()?

The percentage controls how much of the first color to use. color-mix(in srgb, red 30%, blue) means 30% red and 70% blue. If the two percentages do not add up to 100%, they are normalized proportionally. Omitting the second percentage means it defaults to (100% − first%).

Is color-mix() supported in all browsers?

Yes — color-mix() is supported in Chrome 111+, Firefox 113+, Safari 16.2+, and Edge 111+. As of 2024 it has over 93% global browser coverage, making it safe to use in production without a fallback for most projects.

Why does OKLCH produce better color blends than sRGB?

OKLCH is a perceptually uniform color space, meaning equal numerical steps correspond to equal perceived differences in color. When you blend two colors in sRGB, you can get unexpected muddy or grey midpoints. OKLCH avoids this, producing vivid, natural-looking intermediate colors.

Modern CSS Color Blending

Generate CSS
color-mix() Expressions

Pick two colors, choose a color space, and get pixel-perfect color-mix() CSS instantly. Supports sRGB, HSL, HWB, LAB, OKLCH, and more.

🎨

All Color Spaces

Blend colors in sRGB, HSL, HWB, LAB, LCH, OKLCH, OKLAB — every space supported by the CSS spec.

⚡

Instant Preview

See the mixed color update in real-time as you tweak the percentage slider or swap color spaces.

📋

Copy-Ready Code

One click copies the exact color-mix() CSS snippet ready to paste into your stylesheet.

color-mix(in oklch, #a855f7 50%, #6366f1)

Color 1

Color 2

Color Space

Mix Percentage50% color1 / 50% color2

Color ramp (5 steps)

Frequently Asked Questions

Everything you need to know about CSS color-mix() Generator.

Generate CSScolor-mix() Expressions

All Color Spaces

Instant Preview

Copy-Ready Code

Frequently Asked Questions

Generate CSS
color-mix() Expressions