Color Mixer

Mix two or more colors together to see the resulting blend with adjustable ratios and color space options.

Tested tool guide Tested browser tools Checked August 16, 2026

What Color Mixer does, with a checked example

Color Mixer combines two or more entered colors into one calculated blend. You adjust each color's relative share and choose the color space used for interpolation, then inspect the resulting color. The important surprise is that identical source colors and ratios can produce different blends when the color space changes. A 50:50 ratio means equal numeric influence in the selected space, not necessarily a shade that looks visually halfway between the inputs.

Worked example

A concrete input and expected output from the current implementation.

Input

Color 1: #336699
Color 2: #336699
Ratio: 1:1
Color space: sRGB

Expected output

#336699

Both inputs have sRGB channels (51, 102, 153). Their equal-weight channel averages remain (51, 102, 153), which converts back to #336699.

How the result is produced

Ratios set influence

Each entered color has a relative share in the blend. Equal shares give the inputs equal weight, while increasing one share moves the result toward that color. When more than two colors are included, every active input contributes according to its share, so changing one ratio can alter the relative influence of all the others.

Color space sets the path

The selected color space determines which color coordinates are interpolated. Different spaces encode lightness, chroma, and channel values differently, so switching spaces can change the result without changing the source colors or ratios. This is a calculation between digital color values, not a simulation of pigments being physically stirred together.

Good uses

Choosing an intermediate brand color between two approved palette colors.
Testing several accent-to-background ratios before adding a blended color to a user interface.
Comparing equal-ratio results across the available color spaces before specifying a CSS color mix.

Limits and checks

A 3:1 ratio and a 1:3 ratio favor opposite inputs, so confirm the color order before recording the result.
Equal numeric ratios do not guarantee a perceptually even midpoint, especially when the source colors differ greatly in lightness.
The result predicts digital interpolation, not the color produced by mixing paint, ink, dye, or other physical materials.

Common questions

Why does a 50:50 blend change when I select another color space?

The equal weighting is applied to coordinates in the selected space, and different spaces assign different coordinates to the same visible colors. The interpolation therefore follows a different path between the endpoints. Neither result is universally correct; each represents the midpoint defined by that particular color space.

Can the result predict what two paints or printing inks will make?

No. The mixer interpolates digital color values, while physical mixtures depend on pigment absorption, ink density, substrate, illumination, and other material properties. Use the result for screen-color exploration. For paint or print production, make a physical test or use measurements and a color-managed production workflow.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.