Blend two colors at any ratio

Interpolate colors in a selected space to create intermediate swatches.

freeworks offlinenothing uploaded
ToolColor Mixer
Input
Output
—
Put this on your own site

The frame below runs the same code as this page, in the reader's own browser. Nothing is sent to us, and nothing is sent to you.

Pick a dark background and the text and panels follow it, so the frame stays readable on a dark page.

Preview

How it works

Color channels are interpolated between two or more colors in the selected color space, with hue direction and weighting controlling intermediate stops. Mixing in gamma-encoded RGB differs from mixing in a linear or perceptual space.

  • The color space and interpolation path define reproducible output.

Worked example

Mix Red and Blue
Mix red and blue equally to get purple
Input
											Input1: #FF0000
Input2: #0000FF
Output
												Original: #FF0000 + #0000FF
Modified: Mixed (50%): #800080
RGB: rgb(128, 0, 128)

When to use this

Palette generation, gradients, and design-token blending mix colors.

Edge cases

  • Mixing red and blue in RGB can produce a dull midpoint compared with perceptual spaces.
  • Hue interpolation can wrap the long way around a color wheel.
  • Different alpha values require premultiplied or explicit compositing rules.

References