Color Mixer Tool

Mix two or more colors together with adjustable ratios in RGB, HSL, or LAB color space.

Tested tool guide Tested browser tools Checked August 16, 2026

What Color Mixer Tool does, with a checked example

Color Mixer Tool calculates one color from two or more selected colors, with each source contributing according to its assigned ratio. Mixing can be performed in RGB, HSL, or LAB coordinates. That choice matters because identical colors and ratios can produce different results in different spaces. The most common misconception is expecting the result to behave like mixed paint. This tool interpolates digital color values, not physical pigments, so its output models a numerical color mixture rather than subtractive paint or ink mixing.

Worked example

A concrete input and expected output from the current implementation.

Input

#fe0000 and #0000fe; RGB color space; ratio 1:1

Expected output

rgb(127, 0, 127), equivalent to #7f007f

With equal RGB weights, each channel is averaged independently. Red is (254 + 0) / 2 = 127, green remains 0, and blue is (0 + 254) / 2 = 127.

How the result is produced

Relative color weights

Each ratio specifies the relative contribution of its color. A 1:1 ratio gives two colors equal influence, while 2:1 gives the first color two shares for every one share from the second. For an RGB mixture, the weighted calculation is applied separately to the red, green, and blue channel values.

Choice of color space

RGB mode mixes red, green, and blue coordinates. HSL mode mixes hue, saturation, and lightness coordinates, while LAB mode mixes L*, a*, and b* coordinates. These systems describe color differently, so switching the selected space can change the resulting color even when every input color and ratio remains unchanged.

Good uses

Calculate an intermediate color for a gradient stop between two interface colors.
Create a weighted mixture in which one palette color contributes more strongly than another.
Compare RGB, HSL, and LAB mixtures before choosing colors for a multi-step design palette.

Limits and checks

The result represents numerical color interpolation, not the physical behavior of paint, dye, or printing ink.
Hue is circular. For HSL colors near the 0 and 360 degree boundary, inspect the result instead of assuming hue behaves like an ordinary linear number.
A LAB mixture may not fit within the gamut of a particular display or RGB representation, so its displayed or converted appearance may require gamut adjustment.

Common questions

Why does a 50:50 mixture change when I switch color spaces?

A 50:50 setting averages coordinates, but RGB, HSL, and LAB assign different coordinates to the same visible colors. Their midpoints therefore need not describe the same resulting color. The ratio still gives the inputs equal weight; changing the space changes what a numerical midpoint means.

Can this tool predict the color produced by mixing two paints?

No. Paint and ink involve subtractive mixing, pigment spectra, concentration, opacity, and material properties that are not represented by ordinary RGB, HSL, or LAB interpolation. Use this result for digital color planning. Physical mixtures should be tested with the actual pigments and substrate.

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.