FreeDev Tools

Color Mixer

Blend two colors at any ratio — computed hex plus the modern color-mix() syntax.

/* Mixed color: #b06ace */
.element {
  background: #b06ace;
}

/* Modern CSS (live-computed by the browser) */
.element {
  background: color-mix(in srgb, #3b82f6 50%, #ec4899 50%);
}

/* preview */
.mix-a { background: #3b82f6; }
.mix-b { background: #ec4899; }
.mix-result, .mix-swatch { background: #b06ace; }
.mix-label::after { content: "#b06ace"; }

Generated locally in your browser — nothing is uploaded.

How to Use

  1. 1

    Pick two colors

    Color A and color B with native pickers.

  2. 2

    Drag the ratio

    The mixed swatch and hex update live.

  3. 3

    Copy hex or color-mix()

    Precomputed value plus the modern CSS syntax.

Frequently Asked Questions

Channels are blended in gamma-corrected space (not naive RGB averaging), which avoids the muddy grey midpoints naive mixing produces — closer to how paint and light actually combine.

Related Tools

CSS Gradient GeneratorBuild linear and radial CSS gradients visuallyBox Shadow GeneratorCreate CSS box shadows with a live previewBorder Radius GeneratorGenerate CSS border-radius values visuallyFlexbox GeneratorBuild CSS flexbox layouts with a visual editorCSS Grid GeneratorBuild CSS grid layouts with a visual editorText Shadow GeneratorGenerate CSS text-shadow effects with live previewCSS Animation GeneratorCreate CSS keyframe animations with a live editorClip-Path GeneratorGenerate CSS clip-path polygon shapes visually