What browsers support color-mix()?

Chrome 111+, Edge 111+, Firefox 113+, and Safari 16.2+ all support color-mix() natively. For older browsers, provide a plain hex fallback above the color-mix() declaration.

What does the percentage mean?

The percentage represents how much of the SECOND color is included in the mix. At 0% you get Color 1 unchanged; at 100% you get Color 2 unchanged; at 50% (the default) you get an equal blend.

Which color space should I use?

sRGB is the most widely understood and matches what CSS has always done. OKLAB and OKLCH produce perceptually uniform blends that look more natural, especially for hue-shifting gradients. HSL can introduce unexpected hue shifts when blending complementary colors.

Can I mix with transparent?

Yes. Type "transparent" or use the alpha channel of your color. color-mix() supports alpha premultiplied blending in all supported spaces.

How do I use this in a CSS custom property?

You can write: --color-tinted: color-mix(in oklab, var(--brand) 80%, white); and use var(--color-tinted) anywhere. Modern browsers evaluate it at computed-value time.

CSS color-mix() Builder

Name: CSS color-mix() Builder
Availability: InStock
Author: Nham Vu

Pick two colors, choose a color space, set the blend percentage, and get a ready-to-paste CSS color-mix() snippet with a live preview swatch.

Color 1

Color 2

Color Space

Color 2 weight 50%

0% = only Color 1 100% = only Color 2

Live Preview

Color 1

Mixed

Color 2

Color 1 → Color 2 gradient (visual reference)

Generated CSS

Browser Support Note

color-mix() requires Chrome 111+, Edge 111+, Firefox 113+, or Safari 16.2+. Add a plain-color fallback on the line above for older browsers.

Copied!

Summary

Pick two colors, choose a color space, set the blend percentage, and get a ready-to-paste CSS color-mix() snippet with a live preview swatch.

How it works

Pick a base color using the color picker or hex input.
Pick a second color to blend into.
Choose the interpolation color space (sRGB, HSL, HWB, LAB, LCH, OKLAB, OKLCH).
Drag the percentage slider to control how much of Color 2 is mixed in.
The live swatch updates in real time showing the blended result.
Click "Copy CSS" to copy the color-mix() snippet to your clipboard.

Use cases

Generate tinted variants of a brand color without a preprocessor.
Create accessible hover states by darkening a button color by 10–20%.
Blend a color toward white or black to build a palette programmatically.
Experiment with perceptual color spaces (OKLAB, OKLCH) for smoother gradients.
Prototype CSS custom property themes with dynamic color mixing.
Learn the difference between sRGB and OKLCH interpolation visually.

Frequently Asked Questions

Last updated: 2026-06-09 · Reviewed by Nham Vu