CSS Color Mix Generator

Interpolation spaces can produce visibly different results. Preview in your target browsers and keep a fallback color if older clients matter.

Color 1

Color 1 weight 50%

Color 2

Interpolation space

color-mix()

Generated color—

Interpolation space changes the result

sRGB, HSL, OKLab and OKLCH can produce visibly different mixtures from the same two endpoints. Choose the space intentionally rather than treating the function as a universal arithmetic average.

Keep a fallback when compatibility matters

Modern browsers support color-mix(), but older clients may need a preceding static color declaration.