CSS Color Mix Calculator

Home/Tools/Color Mix Calculator

Mix two colors in different color spaces using the CSS color-mix() function.

No sign-up neededRuns in your browserProduction-ready CSS

Colors

Color A

Color B

Mix Amount

Color A: 50%50%

Color B: 50%

Color Space

Different spaces produce different perceptual mixes. OKLCH often gives the most natural results.

Preview

Color A (50%)Mixed ResultColor B (50%)

#a857c5 (approx sRGB)

CSS color-mix()

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

Generated CSS

/* color-mix() — Chrome 111+, Firefox 113+, Safari 16.2+ */
.element {
  /* Fallback */
  background-color: #a857c5;
  /* color-mix */
  background-color: color-mix(in oklch, #6366f1 50%, #ec4899);
}

Related Tools

Gradient Generator

Create beautiful CSS gradients with live preview. Linear, radial, and conic gradients supported.

Color Converter

Convert colors between HEX, RGB, HSL, and other formats instantly.

Gradient Text Generator

Generate stunning gradient text effects using background-clip and text-fill techniques.